Pré-carregar imagens responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

É possível pré-carregar imagens responsivas, que permitem o carregamento 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

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

Suponha que você esteja navegando na Web em uma tela com 300 pixels de largura, e a página solicita uma imagem com 1.500 pixels de largura. Essa página desperdiçou muito do seu tempo porque sua tela não consegue fazer nada com essa resolução extra. Idealmente, o navegador buscaria uma versão da imagem que seja apenas pequeno mais largo que o tamanho da tela, por exemplo, 325 pixels. Isso garante que imagem de alta resolução sem desperdiçar dados e permite que a imagem carregue mais rápido.

Imagens responsivas permitem que os navegadores busquem recursos de imagem diferentes para dispositivos diferentes. Se você não usar uma CDN de imagem, salve várias dimensões para cada imagem e especificá-la no atributo srcset. O valor w informa ao ao navegador a largura de cada versão, para que ele possa escolher a versão apropriada para em 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

Pré-carregamento permite informar ao navegador recursos críticos que você deseja carregar o mais rápido possível, antes que 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 a sintaxe srcset e sizes usada no <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 que Uso de srcset e sizes.

Casos de uso

Confira 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 saber qual imagem será exibida primeiro. Nesse caso, talvez seja melhor mostrar essa imagem o mais rápido possível, e não esperar que o script da apresentação de slides carregá-lo.

É possível 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. 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, para que ela possa ser pronto para ser exibido quando o navegador precisar exibi-lo.

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 saber a diferença do pré-carregamento, inspecione o mesmo galeria de imagens, 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, pode especificá-las no CSS com a sintaxe image-set. Então, o navegador pode escolher qual exibir com base no DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

O problema das imagens de plano de fundo do CSS é que o navegador as detecta somente 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 um imagem de plano de fundo responsiva.

Painel &quot;Network&quot; do Chrome DevTools mostrando uma cascata 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 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 ignorar o atributo href, você garante que os navegadores que não oferecem suporte a imagesrcset no elemento <link>, mas são compatíveis com image-set no Faça o download do CSS da origem correta. No entanto, eles não se beneficiarão do pré-carregamento neste caso.

Você pode inspecionar como o exemplo anterior se comporta com um modelo imagem de plano de fundo na demonstração de pré-carregamento responsivo em segundo plano.

Painel &quot;Network&quot; do Chrome DevTools mostrando uma hierarquia com um recurso de JPEG sendo baixado em parrallel para algum CSS.
Aqui a imagem e o CSS começam a ser baixados ao mesmo tempo, permitindo que a imagem carregue mais rápido.

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

Teoricamente, o pré-carregamento de imagens responsivas pode acelerá-las, mas o que isso faz na prática?

Para responder que eu criei duas cópias de um site de demonstração com PWA: que não pré-carregue imagens, e um que pré-carregue alguns deles. Como o site carrega imagens lentamente usando JavaScript, é provável que ele se beneficie da pré-carregando aqueles que aparecem na janela de visualização inicial.

Isso produziu os seguintes resultados para sem pré-carregamento No caso do pré-carregamento da imagem:

.
Comparação de tira de vídeo do WebPageTest mostrando que 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é-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 <picture> que processa a "direção de arte" caso de uso de negócios.

Ainda há vários problemas técnicos para resolver no pré-carregamento de <picture>. Mas, por enquanto, 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 pelo media. atributos dos elementos <source> em ordem, encontra o primeiro que corresponde e usa o recurso anexado.

Porque o pré-carregamento responsivo não tem noção de "ordem" ou "primeira correspondência", precisamos converter os pontos de interrupção em algo assim:

<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 permitir que você fornecem diferentes formatos de imagem para que o navegador possa escolher o primeiro com suporte. 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 ter o scanner de pré-carregamento seleciona as imagens do <picture> e <source>. Essa é uma prática recomendada, especialmente ao usar Buscar prioridade para ajudar a priorizar a imagem apropriada.

Efeitos na Largest Contentful Paint (LCP)

Como as imagens podem ser candidatas à Largest Contentful Paint (LCP), pré-carregá-los pode melhorar a LCP do seu site.

Não importa se a imagem que você está pré-carregando é responsiva, o pré-carregamento funciona é melhor quando o recurso de imagem não é detectável no payload de marcação inicial. Você também vai ter mais melhorias de LCP em sites que renderizam a marcação no cliente do que em sites que enviam marcações completas do servidor.