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 para 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
srcsetpara permitir que o navegador escolha o menor. O valorwinforma 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 com menos uso de dados usando imagens com dimensões que correspondem ao tamanho da tela. 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?
Ajude o navegador a escolher o tamanho certo da imagem
Não seria ótimo disponibilizar cada imagem em tamanhos diferentes e deixar que o navegador escolha o melhor tamanho para o dispositivo e a tela? Infelizmente, há uma catch-22 ao definir qual imagem é a melhor. O navegador precisa usar a imagem menor possível, mas não pode saber a largura de uma imagem sem fazer o download dela para verificar.
É 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 quiser 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 o 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 imagem 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 o dobro ou o triplo de pixels em cada linha de pixels de um dispositivo mais barato.
Isso pode afetar o tamanho necessário para salvar as imagens. Não vamos entrar em detalhes aqui, mas você pode saber mais no codelab "Use density descriptors".
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="…">
Confira isso em ação em simpl.info/sizes e no codelab "Especificar vários tamanhos 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 vai usar apenas o atributo src.
Isso faz com que srcset e sizes sejam grandes melhorias progressivas.
Saiba mais
Confira a seção "Otimizar suas imagens" do web.dev para saber mais sobre a otimização de imagens. Para uma experiência mais guiada, tente o curso sem custo financeiro "Imagens responsivas" oferecido pelo Udacity.