É possível pré-carregar imagens responsivas, o que pode permitir que suas imagens sejam carregadas
significativamente mais rápido ajudando o navegador a identificar a imagem correta
de um srcset antes de renderizar a tag img.
Visão geral das imagens responsivas
Compatibilidade com navegadores
- 73
- 79
- 78
- 17,2
Suponha que você esteja navegando na Web em uma tela com 300 pixels de largura e que a página solicite uma imagem de 1.500 pixels de largura. Essa página desperdiçou muitos dados móveis porque sua tela não pode fazer nada com toda essa resolução extra. O ideal é que o navegador busque uma versão da imagem que seja um pouco mais larga do que o tamanho da tela, por exemplo, 325 pixels. Isso garante uma imagem de alta resolução sem desperdiçar dados e permite que a imagem carregue mais rapidamente.
As imagens responsivas
permitem que os navegadores busquem diferentes recursos de imagem para diferentes dispositivos. Se você não
usar uma CDN de imagem, salve várias dimensões para cada
imagem e especifique-as no atributo srcset. O valor w informa ao
navegador a largura de cada versão. Assim, ele pode escolher a versão adequada para
qualquer dispositivo:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Visão geral do pré-carregamento
O pré-carregamento permite que você informe ao navegador sobre recursos críticos que quer carregar o mais rápido possível, antes que eles sejam descobertos em HTML. Isso é especialmente útil para recursos que não são prontamente detectáveis, como fontes incluídas em folhas de estilo, imagens de plano de fundo ou recursos carregados de um script.
<link rel="preload" as="image" href="important.png">
imagesrcset e imagesizes
O elemento <link> usa os atributos imagesrcset e imagesizes para
pré-carregar imagens responsivas. Use-as com <link rel="preload">, com as sintaxes srcset e sizes usadas no elemento <img>.
Por exemplo, se você quiser pré-carregar uma imagem responsiva especificada com:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Para isso, adicione o seguinte ao <head> do HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Isso inicia uma solicitação usando a mesma lógica de seleção de recursos usada por
srcset e sizes.
Casos de uso
Veja a seguir alguns casos de uso para o pré-carregamento de imagens responsivas.
Pré-carregar imagens responsivas injetadas dinamicamente
Imagine que você está carregando dinamicamente imagens principais como parte de uma apresentação de slides e sabe qual imagem será exibida primeiro. Nesse caso, é melhor mostrar essa imagem o mais rápido possível e não esperar que o script de apresentação de slides a carregue.
É possível inspecionar esse problema em um site com uma galeria de imagens carregada dinamicamente:
- Abra esta demonstração de apresentação de slides em uma nova guia.
- Pressione
Control+Shift+J(ouCommand+Option+Jno Mac) para abrir o DevTools. - Clique na guia Rede.
- Na lista suspensa Limitação, selecione 3G rápido.
- Desmarque a caixa de seleção Desativar cache.
- Recarregue a página.
O uso de preload aqui permite que a imagem comece a carregar antes do tempo para que ela esteja
pronta para exibição quando o navegador precisar mostrá-la.
Para ver a diferença do pré-carregamento, inspecione a mesma galeria de imagens carregada dinamicamente, mas com a primeira imagem pré-carregada, seguindo as etapas do primeiro exemplo.
Pré-carregar imagens de plano de fundo usando image-set
Se você tem imagens de plano de fundo diferentes para densidades de tela diferentes, é possível
especificá-las no CSS com a sintaxe image-set. Em seguida, o navegador pode
escolher qual exibir com base na
DPR da tela.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
O problema com as imagens de plano de fundo CSS é que o navegador as descobre somente depois de fazer o download e processar todo o CSS no <head> da página.
É possível inspecionar esse problema em um site de exemplo com uma imagem de plano de fundo responsiva.
O pré-carregamento de imagem responsiva permite que essas imagens sejam carregadas mais rapidamente.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Sem o atributo href, você garante que os navegadores que não
oferecem suporte a imagesrcset no elemento <link>, mas aceitam image-set no
CSS, façam o download da origem correta. No entanto, eles não se beneficiarão do pré-carregamento nesse
caso.
Você pode inspecionar como o exemplo anterior se comporta com uma imagem de plano de fundo responsiva pré-carregada na demonstração de pré-carregamento responsivo de segundo plano.
Efeitos práticos do pré-carregamento de imagens responsivas
O pré-carregamento de imagens responsivas pode acelerá-las na teoria, mas o que isso faz na prática?
Para responder que criei duas cópias de uma loja de PWA de demonstração: uma que não pré-carrega imagens e uma que pré-carrega algumas delas. Como o site faz o carregamento lento de imagens usando JavaScript, é provável que o pré-carregamento das imagens exibidas na janela de visualização inicial se beneficie.
Isso produziu os seguintes resultados para nenhum pré-carregamento e para pré-carregamento de imagem:
- O Start Render permaneceu o mesmo.
- O Índice de velocidade melhorou um pouco (273 ms, porque as imagens que chegam mais rapidamente não ocupam uma grande parte da área de pixels).
- O vídeo Last Painted Hero melhorou significativamente, em 1,2 segundo.
Pré-carregamento e <picture>
O Grupo de trabalho de desempenho da Web está discutindo a adição de um equivalente de pré-carregamento para
srcset e sizes, mas não para o elemento <picture>, que processa o caso de uso de
"direção da arte".
Ainda há vários problemas técnicos a serem resolvidos para o pré-carregamento de <picture>.
Enquanto isso, existem soluções alternativas:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
A lógica de seleção da origem da imagem do elemento <picture> passa os atributos media
dos elementos <source> em ordem, encontra o primeiro que
corresponde e usa o recurso anexado.
Como o pré-carregamento responsivo não tem noção de "ordem" ou "primeira correspondência", é necessário converter os pontos de interrupção em algo como o seguinte:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Pré-carregamento e type
O elemento <picture> também oferece suporte à correspondência no primeiro type, para que você
forneça diferentes formatos de imagem e permita que o navegador escolha o primeiro formato
compatível. Este caso de uso não é compatível com o pré-carregamento.
Para sites que usam a correspondência de tipo, recomendamos evitar o pré-carregamento e, em vez disso, fazer com que
o verificador de pré-carregamento extraia as imagens dos
elementos <picture> e <source>. Essa é uma prática recomendada,
especialmente ao usar as Dicas de prioridade para ajudar a priorizar
a imagem adequada.
Efeitos na Maior exibição de conteúdo (LCP, na sigla em inglês)
Como as imagens podem ser candidatas à Maior exibição de conteúdo (LCP, na sigla em inglês), o pré-carregamento pode melhorar a LCP do seu site.
Independentemente de a imagem que você está pré-carregando ser responsiva, os pré-carregamentos funcionam melhor quando o recurso de imagem não é detectável no payload de marcação inicial. Você também terá mais melhorias de LCP em sites que renderizam a marcação do lado do cliente do que em sites que enviam marcação completa do servidor.