Imagens Responsivas

Parte Javascript, parte Criatividade

Sites e sistemas hoje devem ser, no mínimo, adaptáveis e totalmente funcionais independente do dispositivo onde vocês o está visualizando (com raras exceções para navegadores de vídeo games portáteis como o 3Ds e outros dispositivos muito antigos que exigiriam adaptações exclusivas para eles). Contando com isso, foi criado o conceito do “design responsivo” para sites e sistemas, que nada mais é (em resumo) do que utilizar exatamente o mesmo código base do “desktop” para o “mobile”, fazendo alterações progressivas na ordenação e tamanho dos elementos de acordo com as dimensões das telas dos dispositivos.

“O tempo de carregamento afeta a experiência drasticamente… O ideal é que a página carregue em 4 segundos ou menos.”

Porém o responsivo resolve a questão do uso em tamanhos diferentes de telas apenas em parte, porque as imagens continuam sendo apenas redimensionadas fisicamente ou seja, uma imagem de 1280x400px que tenha 50kb terá o mesmo peso no desktop quanto no celular. Isso deve ser sempre levado em consideração já que as imagens geralmente representam bem mais de 60% do tempo de carregamento de um site.

Isso gera alguns problemas importantes. Os dois primeiros deles são o aumento do uso de banda em navegadores de celulares e o aumento no tempo de carregamento das páginas quando estão em redes móveis (3G). O tempo de carregamento afeta a experiência drasticamente já que caso o conteúdo não seja carregado rápido o suficiente, existe uma grande chance de que o usuário desista da página e procure por outro site. O ideal é que a página carregue em 4 segundos ou menos.

O segundo problema está no processamento. Computadores de mesa processam imagens de maneira eficiente e rápida, mesmo aquelas consideravelmente grandes, por terem bastante memória RAM e terem processadores bem mais rápidos que dispositivos móveis. Celulares e tablets, por sua vez, possuem pouca memória RAM e que geralmente já está encarregada de administrar os aplicativos rodando em segundo plano, além do sistema operacional, deixando menos da metade dela livre para o uso. Seus processadores também são bem mais lentos já que seu foco é a duração da bateria. Isso faz com que várias imagens de maior tamanho em uma página acabem causando lentidão no sistema ou até travamento (como ocorre facilmente em páginas cheias de GIFs animados).

Para sanar isso surgiu uma especificação nova para o HTML5: a tag <picture>. (http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element – link em inglês)

Esta tag consegue armazenar dados de vários tamanhos diferentes de imagens para os mais diversos tamanhos de telas e resoluções e exibi-las somente quando necessário. Isso por si só já salvaria a vida de muita gente se não fosse um pequeno problema: esta tag ainda não é suportada por nenhum navegador da maneira como está recomendada pela W3C.

Prefira utilizar JPGs compactados, se possível, para imagens complexas. Ajuda muito no carregamento!

Mesma Imagem, tamanhos e versões diferentes.

E aí, como fazer?

O jeito é utilizar ela e recorrer ao bom e velho Javascript para tratar as limitações dos navegadores até que a feature seja oficialmente suportada. Para isso, alguns programadores fizeram o Picturefill (http://scottjehl.github.io/picturefill/), tentando auxiliar no processo de implementação de imagens responsivas até que os principais navegadores suportem isso oficialmente.

E como funciona?

Simples! Basta utilizar a marcação real da tag picture, com algumas pequenas alterações para serem suportadas no Internet Explorer 9 (um navegador ainda muito usado especialmente em empresas) e executar o Javascript na página! A marcação da tag picture deve ficar parecida com isso:

 

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
	<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

 

Onde as imagens denotadas no <source> são as responsivas e a tag <img> serve como fallback (contingência) e como imagem base para ser utilizada quando as outras não precisarem ser carregadas. Deve-se notar que mesmo a tag <img> está com a propriedade srcset no lugar de src. Isso é utilizado como uma espécie de “hack” para que ela não seja carregada sempre pelos navegadores e sim, somente quando necessário (evitando dois possíveis carregamentos).

Mas e quando as imagens forem de background?

Aí entra a parte da criatividade. Basta que vocês gere as imagens correspondentes aos tamanhos necessários e anexe próximo ao código de onde a imagem vai estar um bloco <style> como por exemplo uma adaptação do código que utilizei neste site:

 

<style type="text/css" scoped>
    @media (min-width: 821px) {
       .single-header {background-image: url(imagem-grande.jpg);}
    }
    @media (max-width: 820px) {
       .single-header {background-image: url(imagem-media.jpg);}
    }
    @media (max-width: 550px) {
       .single-header {background-image: url(imagem-pequena.jpg);}
    }
</style>

 

E pronto! Problema resolvido. Claro que se esse elemento responsivo for parte do layout, coloque seu código aninhado em seu respectivo lugar na sua CSS geral ou no código específico para o responsivo (caso utilize mais de um arquivo de estilos).

Se gostar disso ou tiver uma sugestão melhor, me dê um alô lá no Facebook até eu finalizar a implementação dos comentários de maneira segura aqui na página. (obs: sobre a propriedade @media, posso explicá-la mais para frente em outra postagem caso haja interesse.)

Até a próxima!

Tags:
  • @media,
  • javascript,
  • layout,
  • picture,
  • picturefill,
  • responsive design,
  • responsivo,
  • tag picture,
  • w3c