Use srcset para escolher automaticamente o tamanho correto 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
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
É possível deixar seu site mais rápido e usar menos dados usando imagens com dimensões que correspondam ao tamanho de exibição. Em outras palavras, dê às imagens a largura e a altura corretas ao salvá-las.
Veja as imagens abaixo.
Eles parecem quase idênticos, mas o tamanho do arquivo de um deles é 10 vezes maior que o do outro.
A primeira imagem tem um tamanho muito maior de arquivo porque é salva com dimensões muito maiores que o tamanho da tela. As duas imagens são exibidas com uma largura fixa de 300 pixels, por isso faz sentido usar uma imagem salva com o mesmo tamanho.
Para larguras fixas, use imagens salvas com as mesmas dimensões do tamanho de exibição.
Mas... e se o tamanho de exibição variar?
Em um mundo com 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 ao tamanho da tela.
... e os dispositivos que consomem 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 deixar o navegador escolher o melhor tamanho para o dispositivo e a tela? Infelizmente, existe um catch-22 para saber qual é a melhor imagem. O navegador precisa usar a menor imagem 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, em seguida,
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 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 menor imagem 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 em um laptop ou
computador, altere 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.
É necessário fazer isso em uma janela anônima ou particular. Caso contrário, o
arquivo de imagem original será armazenado em cache.
Como posso criar vários tamanhos de imagem?
Será necessário disponibilizar vários tamanhos para cada imagem que você quiser usar
com srcset.
Para imagens únicas, como imagens de fundo, você pode salvar manualmente diferentes tamanhos. 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 compilação, é 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 a entrega de imagens podem ser automatizadas 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 de alta resolução e o serviço de imagens cria e fornece automaticamente
formatos e tamanhos de imagem diferentes, dependendo dos parâmetros
de 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 "corte inteligente" para diferentes tamanhos de imagem e enviar automaticamente imagens WebP para navegadores que oferecem suporte ao formato, em vez de JPEGs, sem alterar a extensão do arquivo.
E se a imagem não tiver a aparência correta em tamanhos diferentes?
Nesse caso, é necessário usar o elemento <picture> para "direção de arte",
fornecendo uma imagem ou um corte de imagem diferente em tamanhos distintos. Para saber mais,
consulte o codelab Direção de arte.
E a densidade de pixels?
Dispositivos sofisticados têm pixels físicos menores (mais densos). Por exemplo, um smartphone sofisticado 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 as imagens. Não vamos entrar em detalhes sangrentos aqui, mas você pode descobrir mais no codelab "Usar descritores de densidade".
E o tamanho de exibição da imagem?
Use sizes para melhorar ainda mais o srcset.
Sem ela, o navegador usa a largura total da janela de visualização ao escolher uma
imagem de um srcset. O atributo sizes informa ao navegador a largura em que um
elemento de imagem será mostrado. Assim, o navegador pode escolher o menor arquivo de imagem
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 como isso funciona em simpl.info/sizes e o codelab Como especificar várias larguras de slot.
E o suporte ao navegador?
srcset e sizes têm suporte de mais de 90% dos
navegadores em todo o mundo.
Se um navegador não for compatível com srcset ou sizes, ele voltará a usar apenas o atributo src.
Isso faz com que srcset e sizes sejam ótimas melhorias progressivas.
Saiba mais
Confira a seção Otimizar imagens do web.dev para saber mais sobre a otimização de imagens. Para uma experiência mais guiada, teste o curso sem custo financeiro "Imagens responsivas" oferecido pela Udacity.