Use srcset para escolher automaticamente o tamanho certo da imagem.
De acordo com o HTTP Archive, um 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 a função
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 reduzir o consumo de dados usando imagens com que correspondem ao tamanho de exibição. Em outras palavras, dê às imagens largura e altura ao salvá-los.
Dê uma olhada nas imagens abaixo.
Eles parecem quase idênticos, mas o tamanho do arquivo de um é mais de 10 vezes maior que o outro.
A primeira imagem é muito maior em tamanho de arquivo porque é salva com as dimensões muito maior do que o tamanho da exibição. Ambas as imagens são exibidas com um largura de 300 pixels, por isso faz sentido usar uma imagem salva no mesmo tamanho.
Para larguras fixas, use imagens salvas com as mesmas dimensões tamanho de exibição.
E se o tamanho da exibição variar?
Em um mundo com vários dispositivos, as imagens nem sempre são exibidas em um único tamanho fixo.
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 com muitos pixels, como as telas Retina?
Ajudar o navegador a escolher o tamanho certo da imagem
Não seria ótimo disponibilizar cada imagem em tamanhos diferentes, deixar o navegador escolher o melhor tamanho para o dispositivo e de exibição? Infelizmente, há um catch-22 quando se trata de descobrir qual é a melhor imagem. O navegador deve usar o menor tamanho possível imagem, mas não poderá saber a largura de uma imagem sem fazer download dela para verificar.
É aí que a propriedade srcset vai ser útil. Você salva imagens em tamanhos diferentes
informar 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 é 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 ter que
fazer o download de imagens para verificar o tamanho delas.
Veja o srcset em ação na imagem abaixo. Se estiver em um laptop ou
computador, altere o tamanho da janela do navegador e reabra esta página.
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 da 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 quiser usar.
com srcset.
Para imagens únicas, como imagens principais, você pode salvar manualmente tamanhos diferentes. Se você tem muitas imagens, como fotos de produtos, precisará automatizar. Para isso, há duas abordagens.
Incorporar o processamento de imagens no processo de build
Como parte do processo de build, é possível adicionar etapas para criar diferentes tamanhos mais recentes das imagens. Consulte "Usar o 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 Cloudinary ou um equivalente de código aberto, como Thumbor, instalado e executado por você.
Você faz upload das imagens de alta resolução e do serviço de imagem automaticamente
Cria e exibe formatos e tamanhos de imagem diferentes dependendo do URL
parâmetros. 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 possibilidade de automatizar "corte inteligente" para diferentes tamanhos de imagem e entregar automaticamente imagens WebP em navegadores que oferecem suporte para o formato, em vez de JPEGs, sem alterar o arquivo .
E se a imagem não for exibida corretamente em tamanhos diferentes?
Nesse caso, é necessário usar o elemento <picture> na "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 sofisticados têm pixels físicos menores (mais densos). Por exemplo, de última geração pode ter duas ou três vezes mais pixels em cada linha de pixels como um dispositivo mais barato.
Isso pode afetar o tamanho necessário para salvar suas 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 que o srcset funcione ainda melhor.
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 que um
elemento de imagem será exibido, para que o navegador possa escolher o menor elemento
antes de fazer cálculos de layout.
No exemplo abaixo, sizes="50vw" informa ao navegador que esta imagem será
exibidos 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="…">
Você pode ver isso em ação em simpl.info/sizes e o codelab Como especificar várias larguras de slot.
E quanto ao suporte a navegadores?
srcset e sizes têm suporte de mais de 90% dos
navegadores em todo o 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
Confira a seção Otimizar suas imagens. do web.dev para saber mais sobre a otimização de imagens. Para uma apresentação teste o serviço sem custo financeiro "Responsivo" Images" oferecido pela Udacity.