Tamanho único: um guia para soluções de imagem responsivas para Web Design

À medida que os dispositivos móveis e tablets se aproximam de dominar o mundo 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, a criação de ferramentas para enfrentar os desafios desse fenômeno traz todo 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, se não em todos os dispositivos 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, essa evolução do web design responsivo provou ser difícil e às vezes dolorosa.

Embora possa ser quase trivial acomodar informações textuais, a parte complicada vem quando levamos em consideração conteúdos como imagens responsivas, infográficos, vídeos e assim por diante, que antes eram projetados apenas com desktops em mente. Isso não apenas 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 consideradas. O Google começou a destacar sites compatíveis com dispositivos móveis em seus resultados de pesquisa, com alguns especulando que isso levará a um aumento substancial no pagerank desses sites. As soluções anteriores resolveram isso implantando subdomínios somente para dispositivos móveis (e redirecionamentos), mas isso aumentou a complexidade e saiu de moda rapidamente. (Nem todos os sites têm a capacidade de pagar essa rota.)

Em busca de imagens da Web responsivas

Nesse ponto, desenvolvedores e designers precisam garantir que o carregamento do site seja otimizado para atender aos usuários que estão em sites para dispositivos 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 ocupando os maiores compartilhamentos 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 imagem de design responsivo, incluindo soluções do lado do servidor e de front-end. Para discutir essas soluções de imagens responsivas, precisamos primeiro entender as deficiências atuais da vinculação de imagens.

A tag <img> possui apenas o atributo source linkando diretamente para a própria imagem. Ele não tem como determinar o tipo correto de imagem necessária sem nenhum complemento.

Não podemos ter todos os tamanhos de imagem incluídos no HTML e usar regras CSS para display:none para todos, exceto a imagem correta? Essa é a solução mais lógica em um mundo lógico perfeito. Dessa 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 que as folhas de estilo e os arquivos JavaScript necessários sejam totalmente carregados. Em vez de ignorar as imagens grandes destinadas aos 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 para fazer?

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

Exceto sites/subdomínios somente para celular, ficamos com o sniffing user-agent (UA) e usá-lo para fornecer as imagens de tamanho correto de volta ao usuário. No entanto, qualquer desenvolvedor pode atestar o quão pouco confiável essa solução pode ser. Novas strings UA continuam aparecendo o tempo todo, tornando difícil manter e atualizar uma lista abrangente. E, claro, isso nem leva em conta a falta de confiabilidade de strings UA facilmente falsificadas.

Imagens adaptáveis

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

Toque de Sencha

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

 <img src="http://src.sencha.io/http://example.com/images/kitty_cat.jpg" alt="My Kitty Cat">

Há também uma opção para especificar os tamanhos das imagens, caso não queiramos que o Sencha redimensione a imagem automaticamente.

No final das contas, as soluções do lado do servidor (e de terceiros) exigem 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 front-end

Nos últimos tempos, houve grandes melhorias no lado do navegador para abordar imagens responsivas.

O elemento <picture> 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 que não possuem o elemento.

Há também o caso do atributo srcset que está disponível para vários navegadores baseados em webKit para o elemento <img> . Isso pode ser usado sem qualquer JavaScript e é uma ótima solução se os navegadores que não são do webKit devem ser ignorados. É um tapa-buraco útil para o caso ímpar em que outras soluções ficam aquém, mas não deve ser considerada uma solução abrangente.

Preenchimento de imagem

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

 <picture> <source media="(min-width: 768px)"> <source media="(max-width: 767px)"> <img alt="My Kitty Cat"> </picture>

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 um suporte mais amplo ao navegador e resolver os casos estranhos, em vez de depender de patches.

Imager.js

Imager.js é uma biblioteca criada pela equipe da BBC News para realizar imagens responsivas com uma abordagem diferente da utilizada pelo Picturefill. Enquanto o Picturefill tenta trazer o elemento <picture> para navegadores não suportados, o Imager.js se concentra em baixar apenas as imagens apropriadas, ao mesmo tempo em que fica de olho nas 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 <img> . O código de exemplo abaixo exibe esse comportamento:

 <div> <div class="image-load" data-src="http://example.com/images/kitty_{width}.jpg" data-alt="My Kitty Cat"></div> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

O HTML renderizado ficará assim:

 <div> <img src="http://example.com/images/kitty_480.jpg" data-src="http://example.com/images/kitty_{width}.jpg" alt="My Kitty Cat" class="image-replace"> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

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.

Embaralhamento de origem

O Source Shuffling aborda o problema da imagem responsiva de um ângulo ligeiramente diferente do restante das bibliotecas front-end. Assemelha-se a algo fora da escola de pensamento “mobile first”, em que atende à menor resolução possível por padrão. Ao detectar que um dispositivo possui 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 principalmente para sites móveis, mas significa que o download duplo de recursos 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é 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 das contas, cabe ao desenvolvedor decidir qual abordagem de imagem de web design responsiva 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 encerrar, a lista de perguntas abaixo pode ser útil a ser considerada 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, atributo srcset )
• O tempo de resposta é crítico? Caso contrário, opte por uma solução de terceiros ou de back-end.
• As soluções devem ser internas? As soluções de terceiros obviamente serão descartadas.
• Já existem muitas imagens em um site que está tentando fazer a transição para imagens responsivas? Existem preocupações sobre 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 Adaptive Images.
• A direção de arte é um problema (especificamente para imagens grandes com muita informação)? Uma biblioteca como Picturefill será uma solução melhor para tal 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 as opções de back-end ou de terceiros que dependem do sniffing do UA.
• Existe uma prioridade para os tempos de resposta móvel sobre os tempos de resposta para desktop? Uma biblioteca como Source Shuffling pode ser mais apropriada.
• Existe a necessidade de 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 display:none abordagem!