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
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 tornar seu site mais rápido e consumir menos dados usando imagens com dimensões que correspondam ao tamanho da tela. Em outras palavras, dê às imagens a largura e a altura certas ao salvá-las.
Confira as imagens abaixo.
Eles parecem quase idênticos, mas o tamanho de um é mais de 10 vezes maior que o do outro.
A primeira imagem é muito maior em tamanho de arquivo porque é salva com dimensões muito maiores do que o tamanho da tela. As duas imagens são mostradas 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 de exibição.
Mas… e se o tamanho da tela 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 em porcentagem ou fazer parte de layouts responsivos em que os tamanhos de exibição da imagem mudam para se ajustar ao tamanho da tela.
…e quanto aos dispositivos que consomem muitos pixels, como as telas Retina?
Ajudar o navegador a escolher o tamanho de imagem certo
Não seria ótimo se você pudesse disponibilizar cada imagem em tamanhos diferentes e deixar o navegador escolher o melhor tamanho para o dispositivo e o tamanho da tela? Infelizmente, há um catch-22 quando se trata de descobrir qual imagem é a melhor. O navegador usa a menor imagem possível, mas não consegue 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 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 baixar imagens para verificar o tamanho delas.
Confira srcset em ação na imagem abaixo. Se você estiver em um notebook ou computador desktop, 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.
Faça 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ê precisa disponibilizar vários tamanhos para cada imagem que quiser usar com o srcset.
Para imagens únicas, como imagens hero, é possível 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 processo de build
Como parte do processo de build, você pode adicionar etapas para criar versões de tamanhos diferentes das imagens. Saiba mais em "Usar o Imagemin para compactar imagens".
Usar um serviço de imagens
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 por conta própria.
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 de URL. Por exemplo, abra esta imagem de amostra 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 entregar automaticamente imagens WebP a navegadores compatíveis com o formato, em vez de JPEGs, sem mudar a extensão do arquivo.
E se a imagem não ficar boa em tamanhos diferentes?
Nesse caso, você precisa usar o elemento <picture> para "direção de arte":
fornecendo uma imagem ou um corte de imagem diferente em tamanhos diferentes. Para saber mais, consulte 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 ponta pode ter duas ou três vezes mais pixels em cada linha do que 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 "Usar descritores de densidade".
E o tamanho de exibição da imagem?
Você pode usar sizes para melhorar ainda mais o funcionamento do srcset.
Sem ele, 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á exibido. 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 a imagem será
mostrada com 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árias larguras de slot".
E a compatibilidade com navegadores?
srcset e sizes são compatíveis com mais de 90% dos navegadores em todo o mundo.
Se um navegador não for compatível com srcset ou sizes, ele vai usar apenas o atributo src.
Isso faz de srcset e sizes ótimas melhorias progressivas.
Saiba mais
Confira a seção "Otimize suas imagens" do web.dev para saber mais sobre a otimização de imagens. Para uma experiência mais guiada, faça o curso sem custo financeiro Imagens responsivas da Udacity.