Pré-carregar imagens responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

É 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

  • Chrome: 73.
  • Borda: 79.
  • Firefox: 78.
  • Safari: 17.2.

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 que seja 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.

As 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

Compatibilidade com navegadores

  • Chrome: 50.
  • Borda: ≤ 79.
  • Firefox: 85.
  • Safari: 11.1.

Origem

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 pré-carregar imagens responsivas. 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:

  1. Abra esta demonstração de apresentação de slides em uma nova guia.
  2. Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir as Ferramentas para desenvolvedores.
  3. Clique na guia Rede.
  4. Na lista suspensa Limitação, selecione 3G rápido.
  5. Desmarque a caixa de seleção Desativar cache.
  6. Recarregue a página.
Painel &quot;Network&quot; do Chrome DevTools mostrando uma cascata com um recurso JPEG que só começa a fazer o download depois de um pouco de JavaScript.
Sem o pré-carregamento, as imagens começam a ser carregadas depois que o navegador termina de executar o script. Para a primeira imagem, esse atraso é desnecessário.

O uso de preload aqui permite que a imagem comece a carregar antecipadamente. Dessa forma, ela pode estar pronta para exibição quando o navegador precisar mostrá-la.

Painel Network do Chrome DevTools mostrando uma hierarquia com um recurso JPEG fazendo o download em paralelo a um JavaScript.
O pré-carregamento da primeira imagem permite que ela comece a ser carregada ao mesmo tempo que o script.

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 na 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.

Inspecione esse problema em um site de exemplo com uma imagem de plano de fundo responsiva.

Painel &quot;Network&quot; do Chrome DevTools mostrando uma hierarquia com um recurso JPEG que só começa a fazer o download depois de alguns CSS.
Neste exemplo, o download da imagem não começa até que o CSS seja totalmente transferido, causando um atraso desnecessário na exibição da imagem.

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 responsivo pré-carregada na demonstração de pré-carregamento de plano de fundo responsivo.

Painel Network do Chrome DevTools mostrando uma cascata com um recurso JPEG sendo transferido em paralelo a alguns CSS.
Aqui, a imagem e o CSS começam a ser transferidos ao mesmo tempo, permitindo que a imagem seja carregada mais rápido.

Efeitos práticos do pré-carregamento de imagens responsivas

O pré-carregamento de imagens responsivas pode acelerar o carregamento 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:

Comparação de tira de filme do WebPageTest mostrando que imagens pré-carregadas são exibidas cerca de 1,5 segundo mais rápido.
As imagens chegam bem mais rápido quando pré-carregadas, melhorando muito a experiência do usuário.

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 de "direção de arte".

Ainda há alguns problemas técnicos a serem resolvidos para carregar <picture>, mas, por enquanto, 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 da origem da imagem do elemento <picture> analisa 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", será necessário converter os pontos de interrupção em algo semelhante ao 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 com o qual ele é 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 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 candidatas à Largest Contentful Paint (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.