Imagens responsivas: O guia definitivo

É provável que qualquer web designer que use nosso aplicativo de teste de navegador Ghostlab, que permite testes contínuos em todos os dispositivos simultaneamente, já tenha trabalhado com design responsivo de alguma forma. E, à medida que os sites e dispositivos atuais se tornam cada vez mais variados, uma infinidade de técnicas de imagens responsivas está surgindo para atender às necessidades dos desenvolvedores.

Entretanto, o design responsivo pode parecer um campo minado. A grande variedade de opções de imagens responsivas na Web é assustadora, e isso antes de enfrentar os obstáculos específicos do site em que o senhor está trabalhando. Mas não tenha medo! A seguir, apresentamos um resumo básico do que são imagens responsivas, como elas podem afetar seu processo de trabalho e alguns dos principais fatores definidores que, em nossa opinião, devem ser aplicados ao pensamento de qualquer designer, seja qual for o caminho escolhido…

O que são imagens responsivas?

Em termos simples, o design responsivo é uma abordagem que permite que o seu site se ajuste de forma fluida aos parâmetros de qualquer dispositivo, envolvendo um mínimo de rolagem ou zoom. Em outras palavras, criar sites de excelente aparência que sejam dinâmicos e flexíveis o suficiente para serem visualmente responsivos a qualquer tela, desde a largura dos dispositivos móveis até o formato de desktop. E para que isso seja possível, é claro que o senhor precisa de uma abordagem flexível para as imagens. Simples, não é?

Bem… sim e não. Embora as imagens responsivas sejam agora amplamente utilizadas e bastante fáceis de usar em layouts básicos, qualquer pessoa que esteja projetando sites mais complicados sabe que os problemas podem aparecer rapidamente. Não é preciso dizer que não existe uma chave que sirva para todas as fechaduras, portanto, listamos abaixo sete dos problemas mais comuns, juntamente com um resumo básico de técnicas eficazes relacionadas a cada problema, para ajudá-lo a fazer com que seu site funcione sem problemas.

Quais são os problemas?

Um fator importante na necessidade de imagens responsivas é o tamanho geral do site – ainda hoje, uma grande porcentagem dos sites de versão móvel é tão grande (ou até maior) do que suas versões para desktop, afetando negativamente o desempenho. As imagens desempenham um papel importante nisso, pois a qualidade e o tamanho das imagens em geral continuam a aumentar, mas não faz muito sentido se os dados forem desperdiçados por dispositivos móveis ou desktops com conexão de baixa largura de banda. Portanto, para aumentar a eficiência, cada vez mais designers estão usando imagens responsivas.

Reduzir a escala das imagens para que se ajustem melhor aos dispositivos é a abordagem mais comum para tornar o conteúdo responsivo, mas, em muitos casos, isso pode tornar a imagem menos poderosa – o “problema da direção da arte”. Outras questões menos estéticas, como processos que não são “validados” ou que não são considerados estritamente semânticos, podem ser um obstáculo para alguns designers (ou clientes). Além disso, há os aspectos técnicos a serem considerados: componentes do lado do servidor, uso de JavaScript, teste de largura de banda e opções de terceiros. Todos esses problemas têm (mais ou menos) ótimas soluções, portanto, continue lendo para descobrir qual é a mais adequada para o senhor.

Problema 1 – Semântica

Fazer com que as imagens responsivas funcionem de forma limpa e confiável em várias plataformas às vezes envolve o uso de técnicas que não são “semânticas”. Por quê? Porque quando o src de uma imagem aponta para uma imagem real, com um texto alternativo para descrevê-la, mesmo que o src seja a menor imagem possível, isso significa que o senhor está baixando dados desnecessários.

Para contornar isso, algumas das técnicas descritas abaixo exigem que o src da imagem seja removido ou que o link seja para um GIF transparente, por exemplo. Se isso não for adequado e o senhor estiver procurando uma abordagem semântica, o Adaptive Images, de Matt Wilcox, ou o plug-in HiSRC jQuery, de Marc Grabanski e Christopher Schmitt, são duas excelentes opções a serem analisadas.

Imagens adaptativas

Se o site em que o senhor está trabalhando tiver uma grande quantidade de imagens legadas, talvez não seja viável analisar e ajustar cada imagem com marcação especial ou CSS especializado. Nesse caso, o Adaptive Images é, sem dúvida, a melhor solução disponível. Ele não requer marcação personalizada para nenhuma imagem e, portanto, permite compatibilidade com versões anteriores ao redimensionar as imagens automaticamente. No entanto, ele requer o servidor da Web Apache 2 e PHP 5.x, que podem não ser compatíveis com a plataforma do seu site (mais sobre isso adiante). Ele também exige que as imagens sejam hospedadas no seu servidor da Web, e não em outro lugar por meio de uma rede de distribuição.

HiSRC

Ao contrário do Adaptive Images, o HiSRC requer marcação personalizada no HTML e, portanto, pode não ser apropriado no caso de sites com muito conteúdo legado. Por outro lado, ele dá ao senhor a liberdade de especificar o corte personalizado ou o zoom de imagens para plataformas menores (o “problema da direção da arte” discutido abaixo), além de permitir que o script escolha diferentes resoluções de imagem de acordo com a velocidade da rede (“o problema da largura de banda”), o que não é possível com o Adaptive Images. Por outro lado, o HiSRC só funcionará se o senhor estiver usando a biblioteca jQuery, portanto, se essa não for uma opção, tente uma dessas outras soluções.

Problema 2 – Direção de arte

Uma imagem vale mais que mil palavras… na maioria das vezes. Muitas técnicas de imagem responsiva permitem que o senhor forneça várias versões de resolução de uma imagem, que podem ser usadas de acordo com uma determinada plataforma. No entanto, isso às vezes pode ter um efeito negativo, em que a mensagem da imagem é diluída ou se perde completamente. Qual é o tamanho mínimo de uma imagem? A resposta, é claro, depende do contexto.

Até mesmo as imagens mais impressionantes podem perder sua força quando reduzidas para se ajustarem aos limites de dispositivos menores, como celulares. Se essa situação se aplica ao seu site, o senhor precisará de uma solução que resolva o “problema de direção da arte”, permitindo especificações personalizadas de corte e zoom. As técnicas HiSRC e Picturefill (descritas abaixo) oferecem muita flexibilidade nesse caso, mas lembre-se: se o seu site tiver um grande número de imagens legadas, o senhor terá que fazer muitas marcações personalizadas, o que talvez não seja desejável.

Problema 3 – Validade

Se o senhor estiver personalizando a marcação, verificar a validade da marcação usando um serviço de validação como o W3C garante que uma construção siga a sintaxe correta da linguagem com a qual trabalha (por exemplo, HTML). Embora na maioria das vezes os navegadores consigam pensar à frente para apresentar páginas da Web que não são estritamente “válidas” sem nenhum problema, esses resultados podem, às vezes, variar de um navegador para outro. Em casos raros, isso pode causar layouts confusos ou até mesmo travamentos. A “validação” de todas as páginas é uma maneira infalível de identificar esses problemas antes que eles ocorram.

Mas isso não quer dizer que o código inválido não possa funcionar perfeitamente em todos os navegadores! Na verdade, muitas vezes funciona. O Picturefill de Scott Jehl é adorado por muitos e usa JavaScript para o <picture> para exibir imagens responsivas, e funciona de forma excelente, apesar de ser uma sintaxe tecnicamente inválida. Use o que funcionar melhor para o senhor: se a validade for imprescindível, o Adaptive Images ou o HiSRC podem ser mais adequados.

Problema 4 – Recursos de largura de banda

Por mais que gostássemos de dizer o contrário, um mundo de conexões de supervelocidade e tempos de carregamento extremamente rápidos para todos ainda está longe. É por isso que, na opinião de muitos desenvolvedores, as imagens responsivas devem considerar a largura de banda disponível em um determinado dispositivo e ajustar o tamanho da imagem de acordo para eliminar o excesso de downloads.

O Foresight.js, de Adam Bradley, é uma solução que funciona como uma espécie de verificador de velocidade de conexão, primeiro baixando um arquivo de teste de 50K e, em seguida, determinando qual tamanho de imagem é mais adequado: uma técnica que também está disponível com o HiSRC. A desvantagem disso? A imagem de teste significa um download adicional de 50K e um possível atraso no tempo de carregamento da página. No entanto, muitos consideram isso preferível a servir imagens grandes que não são usadas.

Problema 5 – Componentes do lado do servidor

A maior parte do trabalho do Adaptive Images é feita por meio do .htaccess e do PHP 5.x, que oferece uma ótima solução sem a dependência total do JavaScript. O problema com o .htaccess é que ele pressupõe que o site esteja sendo executado em um servidor Apache. Se estiver usando outra coisa, como o Nginx, o senhor pode portar o .htaccess para a sintaxe do Nginx, que é semelhante à do Apache, mas isso ainda envolve algum trabalho. Além disso, adicionar arquivos PHP ao diretório raiz do seu site pode não ser possível se o senhor estiver usando outras tecnologias, como Ruby ou Python. Obviamente, isso não é ideal para todos, portanto, certifique-se de verificar primeiro antes de começar.

Problema 6 – JavaScript

Como o senhor provavelmente notou, muitas das técnicas de imagem responsiva acima requerem algum JavaScript. Se preferir manter as coisas o mais simples possível e quiser evitar o uso de JavaScript, dê uma olhada na solução Sencha.io Src de terceiros, discutida um pouco mais abaixo.

O JavaScript se aplica à maioria das opções listadas aqui. Algumas usam apenas uma pequena parte, enquanto outras envolvem muita configuração, dependendo da escala de seu projeto. Até mesmo a técnica Adaptive Images requer JavaScript, embora apenas uma quantidade mínima, fazendo a maior parte de sua mágica por meio do Apache e do PHP. O que nos leva a …

Problema 7 – Terceiros

Se o senhor preferir terceirizar, o Sencha.io Src é uma técnica totalmente terceirizada para redimensionar imagens para atender a qualquer usuário. Ao agir como um proxy para imagens, ele garante que o senhor nunca precisará se aprofundar em configurações personalizadas em seu servidor – basta apontar a imagem para o Sencha.io, que então usa sua string user-agent para detectar os parâmetros do dispositivo, e sua imagem é redimensionada!

Há várias outras opções se o senhor estiver optando pelo caminho de terceiros. Uma alternativa ao Sencha.io é o ReSRT.it, que oferece um serviço muito semelhante, mas sem detecção de agente de usuário ou cookies. Ele também permite a detecção de largura de banda e flexibilidade para resolver o problema de direção da arte, se isso se aplicar ao seu site. Device Atlas Cloud, Responsive.io e Thumber.io são outras opções, só para citar algumas.

Não é preciso dizer que a dependência de terceiros deve ser tratada com cautela. Embora essas soluções muitas vezes funcionem perfeitamente e sejam convenientes (e gratuitas para usuários individuais, no caso do Sencha.io), o senhor sempre corre o risco de um tempo de inatividade inesperado. Portanto, é melhor pesar as possíveis consequências antes de começar!

Melhores práticas hoje

Picturefill 2.0 foi lançado recentemente como versão beta e representa um grande avanço em relação à versão 1.

Ele nos permite usar imagens responsivas agora e de uma forma que começa a cuidar de alguns dos problemas discutidos acima.

Instalação e uso de um polyfill

Os polyfills devem ser do tipo “configure e esqueça”, mas como esse é um polyfill HTML, o senhor precisará criar o elemento picture manualmente ou usar alguma forma de shiv HTML para fazer isso por você.

Os shivs HTML são bastante onipresentes e vêm com kits de ferramentas como Modernizr; apenas verifique se a imagem é compatível com o shiv que o senhor escolher.

<!-- Create the actual picture element if you haven't already. -->
<script>
document.createElement( "picture" );
</script>

<!-- Asynchronously load the polyfill. -->
<script src="https://davidwalsh.name/picturefill.js" async></script>

Além de criar o elemento de imagem, o senhor precisa criar um link para o script. Usando o async também é recomendado, para que o Picturefill não interrompa o carregamento da página.

Usando o PictureFill 2 com srcset

Agora, vamos examinar a sintaxe que oferece o melhor suporte e que usa srcset.

Ele deve parecer familiar porque tem os mesmos atributos que vimos quando discutimos a especificação.

<img sizes="(min-width: 40em) 80vw, 100vw” 
srcset="https://davidwalsh.name/pic-small.png 400w, https://davidwalsh.name/pic-medium.png 800w, https://davidwalsh.name/pic-large.png 1200w" alt="Obama”>

A principal diferença entre esse trecho e a especificação é a remoção de um atributo src de fallback, que foi intencionalmente retirado para evitar que as imagens fossem baixadas duas vezes em navegadores sem suporte.

O atributo sizes informa ao navegador o tamanho da imagem em relação à janela de visualização. Isso geralmente é ignorado porque o srcset é a escolha das crianças descoladas agora, mas esse atributo é igualmente importante.

Usando o PictureFill 2 com o elemento picture

O RICG fez um trabalho tão bom com essa segunda versão do Picturefill que a sintaxe do elemento picture não deve ser uma surpresa. Ela corresponde muito bem à especificação:

<picture>
<source srcset="https://davidwalsh.name/extralarge.jpg, https://davidwalsh.name/extralarge.jpg 2x" media="(min-width: 1000px)">
<source srcset="https://davidwalsh.name/large.jpg, https://davidwalsh.name/large.jpg 2x" media="(min-width: 800px)">
<source srcset="https://davidwalsh.name/https://davidwalsh.name/medium.jpg">
<img srcset="https://davidwalsh.name/https://davidwalsh.name/medium.jpg" alt="Cambodia Map">
</picture>

A maior mudança entre as versões 1.0 e 2.0 é a remoção de alguns elementos HTML tradicionais (divs e spans) e a adição de elementos mais novos (picture e source). Veja também, srcset foi incorporado.

A diferença entre esse elemento e o elemento de imagem oficial é o fallback img. O senhor notará que o fallback img também tem asrcset em vez de um src normal (que é amplamente aceito).

Novamente, isso é para evitar o download duplo. O srcset na tag img também causaria download duplo se o navegador suportasse srcset, mas não picture.

Conclusão

Não é preciso dizer que, até que surja uma fórmula mágica única para todos, nenhuma das soluções acima abordará todas as eventualidades possíveis de design. Mas isso não significa que o senhor não possa criar um conteúdo bonito e responsivo que funcione como um sonho do desktop para o celular. Como acontece com a maioria das coisas, a chave é avaliar quais problemas o senhor mais deseja resolver, sejam eles de conteúdo legado, largura de banda, direção de arte ou outros, e começar a partir daí. Boa sorte e, como sempre, adoraríamos ouvir suas opiniões e histórias sobre como o senhor está se saindo com as imagens responsivas e com o Ghostlab.