Como celular e tábua dispositivos chegam mais perto de alcançar o domínio mundial final, o design e a tecnologia da web estão em uma corrida para acomodar o número cada vez maior de tamanhos de tela. No entanto, desenvolver ferramentas para enfrentar os desafios desse fenômeno traz um novo conjunto de problemas, com uma das últimas palavras da moda a surgir sendo “Web responsiva” . Este é o desafio de fazer a web funcionar na maioria dos dispositivos, senão em todos, sem degradar a experiência do usuário. Em vez de projetar conteúdo para caber em desktops ou laptops, as informações devem estar disponíveis para telefones celulares, tablets ou qualquer superfície conectada à web. No entanto, este web design responsivo a evolução provou ser difícil e às vezes dolorosa.

Embora possa ser quase trivial acomodar informações textuais, a parte complicada surge quando colocamos em consideração conteúdo como imagens responsivas, infográficos, vídeos e assim por diante, que antes eram projetados apenas com desktops em mente. Isso não só levanta a questão de exibir o conteúdo corretamente, mas também como o próprio conteúdo é consumido em diferentes dispositivos. Os usuários de smartphones são diferentes dos usuários de desktops. Coisas como planos de dados e velocidade de processamento também devem ser considerados. O Google começou a destacar sites otimizados para celular em seus resultados de pesquisa, com algumas especulações que isso levará a um aumento substancial do pagerank para esses sites. Soluções anteriores resolveram isso implantando subdomínios (e redirecionamentos) somente para dispositivos móveis, mas isso aumentou a complexidade e saiu de moda rapidamente. (Nem todo site tem capacidade para pagar essa rota.)

Na busca por imagens responsivas da web

Nesse ponto, os desenvolvedores e designers precisam garantir que a carga do site seja otimizada para atender aos usuários que estão em sites móveis. Mais de 20% do tráfego da web agora é de usuários móveis, e o número ainda está aumentando. Com as imagens captando as maiores parcelas de dados de conteúdo da página, torna-se uma prioridade reduzir essa carga. Várias tentativas foram feitas para simplificar o redimensionamento de imagens de design responsivo, incluindo soluções do lado do servidor e front-end. Para discutir essas soluções de imagem responsiva, precisamos primeiro entender as deficiências atuais de vinculação de imagens.

O tag tem apenas o atributo source vinculando diretamente à própria imagem. Ele não tem como determinar o tipo correto de imagem necessária sem quaisquer add-ons.

Não podemos simplesmente ter todos os tamanhos de imagem incluídos no HTML e usar as regras CSS para display:none para todos, exceto a imagem correta? Essa é a solução mais lógica em um mundo lógico perfeito. Desta forma, o navegador pode ignorar todas as imagens não exibidas e, em teoria, não baixá-las. No entanto, os navegadores são otimizados além da lógica comum. Para tornar a página renderizada com rapidez suficiente, o navegador pré-busca o conteúdo vinculado antes mesmo das folhas de estilo e arquivos JavaScript necessários serem totalmente carregados. Em vez de ignorar as imagens grandes destinadas a desktops, acabamos baixando todas as imagens e resultando em um carregamento de página ainda maior. A técnica somente CSS funciona apenas para imagens destinadas a imagens de plano de fundo, porque elas podem ser definidas na folha de estilo (usando consultas de mídia).

Então, o que um site deve fazer?

Soluções de dimensionamento de imagem responsivas de back-end

Restringindo sites / subdomínios somente para dispositivos móveis, ficamos com o sniffing user agent (UA) e usando-o para fornecer as imagens de tamanho correto de volta ao usuário. No entanto, qualquer desenvolvedor pode atestar o quão não confiável essa solução pode ser. Novas strings UA continuam surgindo o tempo todo, tornando difícil manter e atualizar uma lista abrangente. E, claro, isso nem mesmo leva em consideração a falta de confiabilidade das strings UA facilmente falsificadas em primeiro lugar.

Imagens adaptativas

No entanto, algumas soluções do lado do servidor são dignas de consideração. Imagens adaptativas é uma ótima solução para aqueles que preferem uma correção de imagem responsiva de back-end. Não requer nenhuma marcação especial, mas em vez disso usa um pequeno arquivo JavaScript e faz a maior parte do trabalho pesado em seu arquivo de back-end. Ele usa um servidor configurado com PHP e nginx. Ele também não depende de nenhuma detecção de UA, mas verifica a largura da tela. Imagens adaptáveis ​​funcionam muito bem para reduzir imagens, mas também são úteis para quando imagens grandes precisam direção da arte , ou seja, redução de imagem por técnicas como corte e rotação - não apenas dimensionamento.

Sencha Touch

Sencha Touch é outra solução de imagem de design responsivo de back-end, embora seja melhor se referir a ela como uma solução de terceiros. O Sencha Touch redimensionará a imagem de acordo com o sniffing do UA. Abaixo está um exemplo básico de como o serviço funciona:

Também existe uma opção para especificar os tamanhos da imagem, caso não desejemos que o Sencha redimensione a imagem automaticamente.

No final do dia, as soluções do lado do servidor (e de terceiros) requerem recursos para processar a solicitação antes de enviar a imagem correta de volta. Isso leva um tempo precioso e, por sua vez, retarda a viagem de solicitação-resposta. Uma solução melhor seria se o próprio dispositivo determinasse quais recursos solicitar diretamente e o servidor respondesse de acordo.

Soluções de front-end

Recentemente, houve grandes melhorias no lado do navegador para lidar com imagens responsivas.

O elemento foi introduzido e aprovado na especificação HTML5 pelo W3C. Atualmente, não está amplamente disponível em todos os navegadores, mas não demorará muito para que esteja disponível nativamente. Até então, contamos com polyfills JavaScript para o elemento. Polyfills também são uma ótima solução para navegadores legados sem o elemento.

Também é o caso do srcset atributo que está disponível para vários navegadores baseados em webKit para o elemento. Isso pode ser usado sem qualquer JavaScript e é uma ótima solução se os navegadores não webKit forem ignorados. É uma solução temporária útil para os casos estranhos em que outras soluções são insuficientes, mas não deve ser considerada uma solução abrangente.

Picturefill

Picturefill é uma biblioteca polyfill para o elemento. É uma das bibliotecas mais populares entre as soluções de front-end para problemas de dimensionamento e dimensionamento de imagem responsivos. Existem duas versões; Picturefill v1 imita o elemento usando span enquanto o Picturefill v2 usa o elemento entre os navegadores que já o oferecem e fornece um polyfill para os legados (por exemplo, para IE> = IE9). Tem algum limitações e soluções alternativas , principalmente para Android 2.3 - que, aliás, é um exemplo de onde o img srcset atributo vem para o resgate. Abaixo está um exemplo de marcação para usar o Picturefill v2:

Para melhorar o desempenho em usuários com planos de dados limitados, o Picturefill pode ser combinado com carregamento lento . No entanto, a biblioteca pode oferecer suporte de navegador mais amplo e resolver os casos estranhos, em vez de depender de patches.

Imager.js

Imager.js é uma biblioteca criada por BBC Notícias equipe para obter imagens responsivas com uma abordagem diferente da usada pela Picturefill. Enquanto a Picturefill tenta trazer o elemento para navegadores não suportados, Imager.js se concentra em baixar apenas as imagens apropriadas, ao mesmo tempo que fica atento às velocidades da rede. Ele também incorpora carregamento lento sem depender de bibliotecas de terceiros. Ele funciona usando elementos de espaço reservado e substituindo-os por elementos O código de amostra abaixo exibe este comportamento:

new Imager({ availableWidths: [480, 768, 1200] });

O HTML renderizado terá a seguinte aparência:

new Imager({ availableWidths: [480, 768, 1200] });

O suporte do navegador é muito melhor do que o do Picturefill à custa de ser uma solução mais pragmática do que uma solução com visão de futuro.

Source Shuffling

Source Shuffling aborda o problema de imagem responsiva de um ângulo ligeiramente diferente do resto das bibliotecas front-end. Ele se assemelha a algo saído da escola de pensamento do “primeiro móvel”, em que atende à menor resolução possível por padrão. Ao detectar que um dispositivo tem uma tela maior, ele troca a fonte da imagem por uma imagem maior. Parece mais um hack e menos uma biblioteca completa. Esta é uma ótima solução para sites principalmente móveis, mas significa que o download de recursos duplos para desktops e / ou tablets é inevitável.

Algumas outras bibliotecas JavaScript notáveis ​​são:

• HiSRC - Um plugin jQuery para imagens responsivas. A dependência do jQuery pode ser um problema.
• Mobify.js - Uma biblioteca mais geral para conteúdo responsivo, incluindo imagens, folhas de estilo e até mesmo JavaScript. Ele 'captura' o DOM antes do carregamento do recurso. Mobify é uma biblioteca abrangente e poderosa, mas pode ser um exagero se o objetivo for apenas imagens responsivas.

Resumo

No final do dia, cabe ao desenvolvedor decidir qual web design responsivo abordagem de imagem se adapta à base de usuários. Isso significa que a coleta e o teste de dados darão uma ideia melhor da abordagem a ser adotada.

Para finalizar, pode ser útil considerar a lista de perguntas abaixo antes de decidir a solução de imagem responsiva apropriada.

• Os navegadores legados são um problema? Caso contrário, considere usar uma abordagem mais moderna (por exemplo: Picturefill, srcset atributo)
• O tempo de resposta é crítico? Caso contrário, opte por uma solução de terceiros ou back-end.
• As soluções devem ser internas? Soluções de terceiros serão obviamente descartadas.
• Já existem muitas imagens em um site que está tentando fazer a transição para imagens responsivas? Existem preocupações sobre a validação ou tags semânticas (ou melhor, tags não semânticas)? Isso exigirá uma solução de back-end para rotear as solicitações de imagem para algo como Imagens Adaptáveis.
• A direção de arte é um problema (especificamente para imagens grandes com muitas informações)? Uma biblioteca como a Picturefill será a melhor solução para esse cenário. Além disso, qualquer uma das soluções de back-end também funcionará.
• Existe uma preocupação com a falta de JavaScript? Qualquer uma das soluções de front-end estará fora de questão, o que deixa o back-end ou opções de terceiros que dependem de detecção de UA.
• Existe uma prioridade para tempos de resposta em dispositivos móveis em relação aos tempos de resposta em computadores? Uma biblioteca como o Source Shuffling pode ser mais apropriada.
• É necessário fornecer um comportamento responsivo a todos os aspectos do site, não apenas às imagens? Mobify.js pode funcionar melhor.
• O mundo perfeito foi alcançado? Use CSS apenas display:none abordagem!