É possível pré-carregar imagens responsivas, o que pode acelerar o carregamento
das imagens, 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
Suponha que você esteja navegando na Web em uma tela de 300 pixels de largura e que a página exija uma imagem de 1.500 pixels de largura. Essa página desperdiçou muitos dados móveis porque a tela não pode fazer nada com toda essa resolução extra. O ideal é que o navegador busque uma versão da imagem um pouco mais larga 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 seja carregada mais rapidamente.
Imagens responsivas
permitem que os navegadores busquem recursos de imagem diferentes para dispositivos distintos. Se você não
usar um 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 para que ele possa 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 informar ao navegador sobre recursos essenciais que você quer carregar o mais rápido possível, antes que eles sejam descobertos no HTML. Isso é especialmente útil para recursos que não são facilmente 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
carregar imagens responsivas com antecedência. Use-os com
<link rel="preload">
, com a sintaxe srcset
e sizes
usada 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 fazer 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
Confira a seguir alguns casos de uso para pré-carregar imagens responsivas.
Pré-carregar imagens responsivas injetadas dinamicamente
Imagine que você está carregando imagens principais dinamicamente como parte de uma apresentação de slides e sabe qual imagem será mostrada primeiro. Nesse caso, provavelmente você vai querer mostrar essa imagem o mais rápido possível, sem esperar que o script do slide show seja carregado.
Você pode 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+J
no Mac) para abrir as Ferramentas para desenvolvedores. - 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
permite que a imagem comece a ser carregada com antecedência, para que ela possa ser
exibida quando o navegador precisar.
Para conferir a diferença que o pré-carregamento faz, 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ê tiver imagens de plano de fundo diferentes para diferentes densidades de tela, poderá
especificá-las no CSS com a sintaxe image-set
. O navegador pode escolher qual exibir com base no
DPR da tela.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
O problema com as imagens de plano de fundo do CSS é que o navegador as descobre
apenas depois de fazer o download e processar todo o CSS no <head>
da página.
Você pode inspecionar esse problema em um site de exemplo com uma imagem de plano de fundo responsiva.
O pré-carregamento de imagens responsivas permite carregar essas imagens mais rapidamente.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Ao omitir o atributo href
, você garante que os navegadores que não
oferecem suporte a imagesrcset
no elemento <link>
, mas oferecem suporte a image-set
no
CSS, façam o download da fonte correta. No entanto, eles não vão se beneficiar do pré-carregamento
nesse caso.
Confira como o exemplo anterior se comporta com uma imagem de plano de fundo responsiva pré-carregada na demonstração de pré-carregamento de plano de fundo responsivo.
Efeitos práticos do pré-carregamento de imagens responsivas
O pré-carregamento de imagens responsivas pode acelerar a exibição delas em teoria, mas o que isso faz na prática?
Para responder a essa pergunta, criei duas cópias de uma loja PWA de demonstração: uma que não carrega imagens e uma que carrega algumas delas. Como o site carrega imagens lentamente usando JavaScript, é provável que ele se beneficie do pré-carregamento das imagens que aparecem na viewport inicial.
Isso produziu os seguintes resultados para sem pré-carregar e para pré-carregar imagem:
- A Renderização inicial permaneceu a mesma.
- O Índice de velocidade melhorou um pouco (273 ms, porque as imagens chegam mais rápido e não ocupam uma grande parte da área de pixels).
- O Last Painted Hero melhorou significativamente, em 1,2 segundo.
Pré-carregar e <picture>
O Grupo de Trabalho de Performance da Web está discutindo a adição de um equivalente de pré-carregamento para
srcset
e sizes
, mas não o elemento <picture>
, que processa o caso de uso da "direção de arte".
Ainda há alguns problemas técnicos a serem resolvidos para pré-carregar <picture>
,
mas, enquanto isso, há 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 de origem de imagem do elemento <picture>
percorre os atributos media
dos elementos <source>
em ordem, encontra o primeiro que
corresponde e usa o recurso anexado.
Como o carregamento responsivo não tem a 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é-carregar e type
O elemento <picture>
também oferece suporte à correspondência no primeiro type
, para que você
possa fornecer diferentes formatos de imagem para que o navegador possa escolher o primeiro formato de imagem
com o qual ele é compatível. Esse caso de uso não tem suporte para pré-carregamento.
Para sites que usam a correspondência de tipo, recomendamos evitar o pré-carregamento e, em vez disso, fazer com que
o scanner de pré-carregamento colete as imagens dos
elementos <picture>
e <source>
. Essa é uma prática recomendada,
especialmente ao usar a Prioridade de busca para ajudar a priorizar
a imagem adequada.
Efeitos na maior exibição de conteúdo (LCP)
Como as imagens podem ser candidatos a maior exibição de conteúdo (LCP), o pré-carregamento delas pode melhorar a LCP do seu site.
Independente de a imagem que você está carregando ser responsiva, o pré-carregamento funciona melhor quando o recurso de imagem não pode ser descoberto no payload de marcação inicial. Você também vai notar mais melhorias no LCP em sites que renderizam a marcação do lado do cliente do que em sites que enviam a marcação completa do servidor.