Imagens responsivas e dinâmicas com sizes e srcset

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Quando o assunto é otimização de sites, as imagens são as que devem receber uma maior atenção, pois elas são responsáveis por grande parte do tempo de carregamento das páginas.

Com a chegada do HTML5, novos recursos foram adicionados para facilitar o trabalho de otimização das imagens, e dois deles são os atributos sizes e srcset da tag img do HTML.

Imagine um celular com tela de 360px de largura e DPR 1. Não faz sentido carregar uma imagem com 1500px, feita para acesso desktop e internet rápida, certo?

A ideia deste post é mostrar na prática (vou deixar tudo pra download) como carregar imagens de forma inteligente, que se adaptam ao tamanho de tela, e pra isso vamos falar também de viewport, resolução, pixel, DPR, além dos atributos sizes e srcset. Eu considero também que você possui conhecimento de HTML e CSS.

Se preferir, acesse "Imagens responsivas e dinâmicas com sizes e srcset (atributos HTML)" no YouTube.

Os atributos srcset e sizes

O atributo srcset permite definir um conjunto de imagens e não apenas uma, como o src faz, deixando o navegador escolher qual a melhor versão para ser carregada, de acordo com as configurações do dispositivo.

<img src='img-800w.jpg'>

O código anterior é a forma padrão de inserir uma imagem no site com HTML, já o bloco a seguir define várias opções de imagens com o atributo srcset.

<img srcset="img-300w.jpg 300w,
	     img-400w.jpg 400w,
	     img-600w.jpg 600w,
	     img-800w.jpg 800w"
     sizes="(max-width: 799px) 100vw, (min-width: 800px) 800px"
     src="img-800w.jpg">

O atributo src ainda define uma imagem para os navegadores que não suportam srcset.

Na prática, o código anterior define um conjunto com 4 imagens de tamanhos diferentes para o navegador escolher qual carregar. A escolha depende da área de imagem definida com sizes e DPR do dispositivo.

O sizes define o tamanho da área reservada para a imagem. No exemplo, se a largura máxima da viewport for menor que 799px, a área terá 100% dela. Se a largura for maior que 800px, a área terá 800px.

Ficou confuso? Não se preocupe, pois ainda vou mostrar o código em ação, na prática, mas antes é importante que você conheça alguns termos e recursos relacionados, que serão explicados na sequência de maneira resumida.

Tela, Pixel, PPI, Resolução, DPR e Viewport

A tela do dispositivo (celular, monitor, tv, entre outros) é a área física em que tudo é exibido, e normalmente é medido em polegadas. Por exemplo, o celular Moto One tem uma tela de 5.9 polegadas em diagonal.

Já o pixel é o menor ponto possível que a tela consegue colocar uma luz. Tudo que aparece na tela é formado por pixels agrupados. Sendo assim, fotos, filmes e tudo na tela é formado por pixels minúsculos.

Agora, a resolução é a quantidade de pixels que uma tela consegue exibir. Por exemplo, o mesmo celular Moto One tem uma resolução de 1520x720, ou seja, 1.094.400 pixels.

Sobre o PPI, é uma sigla em inglês que significa pixels per inch, ou pixels por polegada em português. O número mostra quantos pixels estão presentes em uma polegada, ou seja, em 2,54 cm.

Já o DPR é a proporção de pixels do dispositivo, ou seja, é a relação entre pixels lógicos (CSS) e físicos. Até 2010, o desenvolvimento web era focado apenas em pixels lógicos (ex: width: 200px, margin: 5px), mas aí surgiu a tela de retina da Apple que mudou tudo, então vamos falar sobre isso.

A tela de retina da Apple surgiu com a capacidade de exibir elementos duas vezes mais nítidos, ou seja, de DPR 2. Por exemplo, uma tela com 600px e DPR 2, tem 1200 pixels físicos. Com isso, ela consegue exibir uma imagem com 1200px no espaço de 600px, e com isso muito mais qualidade.

Se você quiser, por exemplo, carregar uma imagem padrão no seu site para dispositivos com DPR 1 e uma com qualidade superior para dispositivos com DPR 2, pode usar um código HTML como este a seguir.

<img srcset="img-300w.jpg 1px,
	     img-800w.jpg 2px"
     sizes="100vw"
     src="img-400w.jpg">

A largura da imagem será de 100% da viewport, ideal para acesso mobile.

Se não quiser 100% da viewport, utilize condições no sizes ou regras CSS.

Para descobrir o DPR do seu dispositivo, basta pesquisar na internet por 'DPR calculator' e encontrar ferramentas online. De qualquer forma, uma dica pra chegar no número é dividir o PPI por 150. Se quiser exibir o DPR com JavaScript, é só usar alert(window.devicePixelRatio).

Para fechar os conceitos antes da prática, a Viewport é a área da tela onde o conteúdo é renderizado, e ela pode ser configurada. É possível definir escala, largura, altura, entre outras coisas. O código HTML a seguir define a viewport com largura igual a do dispositivo, escala de pixel 1 e permissão para o usuário aplicar zoom.

<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=yes'>

Acredito que até aqui você já entendeu os conceitos e também um pouco do funcionamento dos atributos sizes e srcset. Mas pra fechar o assunto, vamos praticar agora!

Os atributos srcset e sizes na prática

O primeiro passo é baixar os arquivos que vamos usar e abrir o index.html no Firefox, que possui diversos emuladores lógicos de dispositivos e sistema de cache mais limpo que outros navegadores.

A imagem anterior é de uma tela de notebook com resolução de 1920x1080 e DPR 1.25. A imagem carregada foi a img-800w.jpg, está correto? Sim! Vamos analisar o código, aquele lá do começo com 4 opções de imagens.

Lá no começo eu disse que o navegador vai escolher a imagem de acordo com área definida para ela com sizes e também pelo DPR do dispositivo. Então vamos analisar o sizes.

sizes='(max-width: 799px) 100vw, (min-width: 800px) 800px'

A resolução do notebook é de 1920px de largura, então ele entrou na segunda condição e criou uma área para a imagem com 800px. Depois ele pega os 800px e multiplica pelo DPR que é 1.25, resultando em 1000px. Sendo assim o navegador decidiu carregar a imagem img-800w.jpg com a melhor resolução para o dispositivo.

Vamos testar agora em um celular.

No Firefox, faça CTRL + SHIFT + M, isso irá habilitar o modo simulador de dispositivos. Escolha na lista o LG Optimus L70, com DPR 1.25, e repare que a imagem carregada será a img-600w.jpg em tela cheia.

Com tela de 384px, ele entrou na primeira condição e criou uma área para a imagem com 100% da viewport. Já o cálculo para a escolha da imagem é 384px (largura) vezes o DPR de 1.25, resultando em 480px, e a melhor opção de imagem neste caso é a com 600px.

Agora é com você! Faça experiências com outras configurações.