Principais dicas sobre desempenho na Web

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.

Bytes médios da página para dispositivos móveis por tipo de conteúdo

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 valor w 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.

Little Puss e Lias: dois gatinhos malhados de 10 semanas.
Largura salva: 1.000 px, tamanho do arquivo: 184 KB
Little Puss e Lias: dois gatinhos malhados de 10 semanas.
Largura salva: 300 px, tamanho do arquivo: 16 KB

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.

Lias e Little Puss: dois gatinhos tigrados cinza de 10 semanas

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.

Chrome DevTools mostrando o cabeçalho de tipo de conteúdo WebP para um arquivo disponibilizado pelo Cloudinary

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.