Pré-carregar imagens responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

É possível pré-carregar imagens responsivas, o que pode fazer com que elas carreguem muito 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

Browser Support

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

Source

Suponha que você esteja navegando na Web em uma tela de 300 pixels de largura, e a página solicite uma imagem de 1500 pixels de largura. Essa página desperdiçou muitos dados móveis porque sua tela não consegue fazer nada com toda essa resolução extra. O ideal é que o navegador busque uma versão da imagem que seja apenas 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 ela seja carregada mais rápido.

Com as imagens responsivas, os navegadores podem buscar recursos de imagem diferentes para dispositivos diferentes. Se você não usar uma CDN de imagens, 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 da pré-carga

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

Com o pré-carregamento, você informa ao navegador sobre os recursos essenciais que 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 seu 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 que srcset e sizes usam.

Casos de uso

Confira alguns casos de uso para pré-carregar imagens responsivas.

Pré-carregar imagens responsivas injetadas dinamicamente

Imagine que você esteja carregando dinamicamente imagens principais como parte de uma apresentação de slides e saiba qual imagem será mostrada primeiro. Nesse caso, é melhor mostrar a imagem o quanto antes, sem esperar que o script de apresentação de slides a carregue.

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 o DevTools.
  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. Atualize a página.
Painel de rede do Chrome DevTools mostrando uma cascata com um recurso JPEG que só começa a ser baixado depois de algum JavaScript.
Sem 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.

Usar preload aqui permite que a imagem comece a carregar com antecedência, para que ela possa ficar pronta para exibição quando o navegador precisar mostrá-la.

Painel de rede do Chrome DevTools mostrando uma cascata com um recurso JPEG sendo baixado em paralelo com algum JavaScript.
O pré-carregamento da primeira imagem permite que ela comece a ser carregada ao mesmo tempo que o script.

Para ver 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 densidades de tela diferentes, poderá especificá-las no CSS com a sintaxe image-set. O navegador pode escolher qual mostrar 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 somente depois de baixar e processar todo o CSS no <head> da página.

Você pode inspecionar esse problema em um site de exemplo com uma imagem de fundo responsiva.

Painel de rede do Chrome DevTools mostrando uma cascata com um recurso JPEG que só começa a ser baixado depois de algum CSS.
Neste exemplo, o download da imagem não começa até que o CSS seja totalmente baixado, causando um atraso desnecessário na exibição da imagem.

Com o pré-carregamento de imagens responsivas, é possível 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, baixem a 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 fundo responsiva pré-carregada na demonstração de pré-carregamento de fundo responsivo.

Painel de rede do Chrome DevTools mostrando uma cascata com um recurso JPEG sendo baixado em paralelo com algum CSS.
Aqui, a imagem e o CSS começam a ser baixados 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 acelerá-las na teoria, mas o que isso faz na prática?

Para responder a isso, criei duas cópias de uma loja de PWA de demonstração: uma que não pré-carrega imagens e outra que pré-carrega algumas delas. Como o site carrega imagens lentamente usando JavaScript, é provável que ele se beneficie da pré-carga daquelas que aparecem na janela de visualização inicial.

Isso produziu os seguintes resultados para sem pré-carregamento e para pré-carregamento de imagens:

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

Pré-carregar e <picture>

O Grupo de Trabalho de Performance na Web está discutindo a adição de um equivalente de pré-carregamento para srcset e sizes, mas não para o elemento <picture>, que lida com o caso de uso de "direção de arte".

Ainda há alguns problemas técnicos a serem resolvidos para o pré-carregamento de <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 da origem da imagem do elemento <picture> passa pelos 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", você precisa traduzir os breakpoints para 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, permitindo fornecer diferentes formatos de imagem para que o navegador possa escolher o primeiro formato compatível. Esse caso de uso não é compatível com a pré-carga.

Para sites que usam 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 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á pré-carregando ser responsiva ou não, os pré-carregamentos funcionam melhor quando o recurso de imagem não pode ser descoberto no payload de marcação inicial. Você também vai ter mais melhorias no LCP em sites que renderizam a marcação no lado do cliente do que em sites que enviam a marcação completa do servidor.