Use srcset para escolher automaticamente o tamanho certo da imagem.
De acordo com o HTTP Archive, uma página da Web para dispositivos móveis típica pesa mais de 2,6 MB, e mais de dois terços desse peso são imagens. Essa é uma ótima oportunidade de otimização.
Resumo
- Não salve imagens maiores que o tamanho de exibição.
- Salve vários tamanhos para cada imagem e use o atributo
srcset
para permitir que o navegador escolha o menor. O valorw
informa ao navegador a largura de cada versão:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Salvar imagens com o tamanho certo
Você pode deixar seu site mais rápido e reduzir o consumo de dados usando imagens com dimensões que correspondem ao tamanho de exibição. Em outras palavras, dê às imagens a largura e a altura corretas ao salvá-las.
Confira as imagens abaixo.
Eles parecem quase idênticos, mas o tamanho de um arquivo é mais de 10 vezes maior que o outro.
O tamanho do arquivo da primeira imagem é muito maior porque ela é salva com dimensões muito maiores que o tamanho da tela. Ambas as imagens são exibidas com uma largura fixa de 300 pixels. Portanto, é recomendável usar uma imagem salva no mesmo tamanho.
Para larguras fixas, use imagens salvas com as mesmas dimensões do tamanho da tela.
Mas e se o tamanho da tela variar?
Em um mundo de vários dispositivos, as imagens nem sempre são exibidas em um único tamanho fixo.
Os elementos de imagem podem ter uma largura percentual ou fazer parte de layouts responsivos, em que os tamanhos de exibição da imagem mudam para se ajustar à tela.
…e o que acontece com dispositivos que exigem muitos pixels, como telas Retina?
Ajudar o navegador a escolher o tamanho certo da imagem
Não seria ótimo disponibilizar cada imagem em tamanhos diferentes e permitir que o navegador escolha o melhor tamanho para o dispositivo e a tela? Infelizmente, há uma contradição ao definir qual imagem é a melhor. O navegador usará a menor imagem possível, mas não poderá saber a largura de uma imagem sem fazer o download dela para verificação.
É aí que a propriedade srcset
vai ser útil. Você salva imagens em tamanhos diferentes e informa ao navegador a largura de cada versão:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Os valores de w
mostram a largura de cada imagem em pixels. Por exemplo,
small.jpg 500w
informa ao navegador que small.jpg tem 500
pixels de largura. Isso permite que o navegador escolha a imagem menor possível,
dependendo do tipo de tela e do tamanho da janela de visualização, sem precisar
fazer o download de imagens para verificar o tamanho delas.
Confira a srcset
em ação na imagem abaixo. Se você estiver usando um laptop ou
computador, mude o tamanho da janela do navegador e abra esta página novamente.
Em seguida, use o painel "Rede" das ferramentas do navegador para verificar qual imagem foi usada.
Você precisa fazer isso em uma janela anônima ou privada. Caso contrário, o
arquivo de imagem original será armazenado em cache.
Como posso criar vários tamanhos de imagem?
Você vai precisar disponibilizar vários tamanhos para cada imagem que quer usar
com srcset
.
Para imagens únicas, como imagens principais, você pode salvar manualmente tamanhos diferentes. Se você tiver muitas imagens, como fotos de produtos, será necessário automatizar. Para isso, há duas abordagens.
Incorporar o processamento de imagens ao seu processo de build
Como parte do processo de build, é possível adicionar etapas para criar versões de tamanhos diferentes das imagens. Consulte "Usar Imagemin para compactar imagens" para saber mais.
Usar um serviço de imagem
A criação e o envio de imagens podem ser automatizados usando um serviço comercial, como o Cloudinary, ou um equivalente de código aberto, como o Thumbor, que você instala e executa.
Você faz upload das imagens em alta resolução, e o serviço de imagens cria e entrega automaticamente diferentes formatos e tamanhos de imagem, dependendo dos parâmetros do URL. Por exemplo, abra esta imagem de exemplo no Cloudinary e tente mudar o valor w
ou a extensão do arquivo na barra de URL.
Os serviços de imagem também têm recursos mais avançados, como a capacidade de automatizar o "recorte inteligente" para diferentes tamanhos de imagem e entregar automaticamente imagens WebP para navegadores compatíveis com o formato, em vez de JPEGs, sem mudar a extensão do arquivo.
E se a imagem não estiver correta em tamanhos diferentes?
Nesse caso, você precisa usar o elemento <picture>
para "direção de arte":
fornecendo uma imagem ou corte de imagem diferente em tamanhos diferentes. Para saber mais,
confira o codelab "Direção de arte".
E a densidade de pixels?
Dispositivos de alta qualidade têm pixels físicos menores (mais densos). Por exemplo, um smartphone de última geração pode ter duas ou três vezes mais pixels em cada linha de pixels do que um dispositivo mais barato.
Isso pode afetar o tamanho necessário para salvar suas imagens. Não vamos entrar em detalhes sangrentos aqui, mas você pode saber mais no codelab "Usar descritores de densidade".
E o tamanho de exibição da imagem?
Você pode usar sizes
para melhorar ainda mais o srcset
.
Sem ele, o navegador usa a largura total da viewport ao escolher uma
imagem de uma srcset
. O atributo sizes
informa ao navegador a largura que um
elemento de imagem será exibido para que ele possa escolher o arquivo de imagem
menor possível antes de fazer cálculos de layout.
No exemplo abaixo, sizes="50vw"
informa ao navegador que essa imagem será
exibida em 50% da largura da janela de visualização.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Veja como isso funciona em simpl.info/sizes e no codelab Como especificar várias larguras de slot.
E o suporte a navegadores?
srcset
e sizes
têm suporte de mais de 90% dos
navegadores do mundo.
Se um navegador não oferecer suporte a srcset
ou sizes
, ele voltará a usar apenas o atributo src
.
Isso faz com que o srcset
e o sizes
sejam ótimos aprimoramentos progressivos.
Saiba mais
Consulte a seção "Otimize suas imagens" (em inglês) do web.dev para saber mais sobre a otimização de imagens. Para uma experiência mais guiada, tente o curso gratuito "Imagens responsivas" oferecido pelo Udacity.