Pré-carregar imagens responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Publicado em 30 de setembro de 2019, atualizado pela última vez em 10 de julho de 2026

É possível pré-carregar imagens responsivas, o que pode acelerar significativamente o carregamento delas, 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 que a página solicite 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 apenas 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 diferentes. 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 apropriada para qualquer dispositivo:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Visão geral do pré-carregamento

Browser Support

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

Source

O pré-carregamento permite que você informe ao navegador sobre os 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" fetchpriority="high">

imagesrcset e imagesizes

O elemento <link> usa os atributos imagesrcset e imagesizes para pré-carregar imagens responsivas. Use-os junto 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" fetchpriority="high">

Isso inicia uma solicitação usando a mesma lógica de seleção de recursos que srcset e sizes usam.

Casos de uso

A seguir, alguns casos de uso para pré-carregar imagens responsivas.

Pré-carregar imagens responsivas injetadas dinamicamente

Imagine que você esteja carregando imagens principais dinamicamente como parte de uma apresentação de slides e saiba qual imagem será exibida primeiro. Nesse caso, provavelmente você quer mostrar essa imagem o mais rápido possível e não esperar que o script da apresentação de slides a carregue.

É 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 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. Atualize a página.
Painel Network do Chrome DevTools mostrando uma Cascata com um recurso JPEG que só começa a ser baixado depois de algum 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 ser carregada com antecedência, para que ela possa ser exibida quando o navegador precisar.

Painel Network do Chrome DevTools mostrando uma cascata com um recurso JPEG sendo baixado em paralelo a algum 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 densidades de tela diferentes, poderá especificá-las no CSS com a sintaxe image-set. O navegador pode então 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 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.

Painel Network 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.

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" fetchpriority="high">

Deixar de fora o atributo href permite garantir 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 origem correta. No entanto, eles não se beneficiarão do pré-carregamento nesse caso.

É possível inspecionar 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.

Painel Network 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 rapidamente.

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

O pré-carregamento das imagens responsivas pode acelerá-las na teoria, mas o que ele 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 de forma lenta usando JavaScript, é provável que ele se beneficie do pré-carregamento das imagens que aparecem na janela de visualização inicial.

Isso produziu os seguintes resultados para nenhum pré-carregamento e para pré-carregamento de imagem:

Comparação de miniaturas de fotos do WebPageTest mostrando que as imagens pré-carregadas são exibidas cerca de 1,5 segundo mais rápido.
As imagens chegam significativamente 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 o <picture> elemento, que processa o "direção de arte" caso de uso.

Ainda há vários 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 de origem de imagem do elemento <picture> passa pelos media atributos dos elementos <source> em ordem, encontra o primeiro que corresponde e usa o recurso anexado.

Como o pré-carregamento responsivo não tem a noção de "ordem" ou "primeira correspondência", é necessário traduzir os breakpoints em algo como o seguinte:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Pré-carregamento e type

O <picture> elemento também oferece suporte à correspondência no primeiro type, para que você possa fornecer formatos de imagem diferentes para que o navegador possa escolher o primeiro formato de imagem compatível.

Esse caso de uso só tem suporte parcial com o pré-carregamento: os navegadores só devem fazer o download de pré-carregamentos para tipos compatíveis. Assim, você pode usar isso para impedir que os navegadores pré-carreguem tipos de mimetypes não compatíveis, incluindo isso no pré-carregamento:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

No entanto, ao contrário de <picture>, ele não vai parar no primeiro tipo compatível. Portanto, se vários pré-carregamentos forem incluídos para vários tipos, todas as imagens serão pré-carregadas:

Não faça isso: pré-carregue vários tipos:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Em vez disso, faça isso: pré-carregue o tipo mais preferido:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

O pré-carregamento do formato mais recente (AVIF, neste caso) atua como um aprimoramento progressivo, em que os navegadores que oferecem suporte a esse tipo se beneficiam e outros navegadores não se beneficiam do pré-carregamento.

Para sites em que a imagem é rapidamente detectável no HTML, 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> em vez disso. Essa é uma prática recomendada, especialmente ao usar Fetch Priority para ajudar a priorizar a imagem apropriada, já que ela permite que a imagem exata seja pré-carregada com base no suporte do navegador. Ela também remove o risco de um pré-carregamento ficar desatualizado da marcação principal quando imagens ou páginas mudam.

Efeitos no Largest Contentful Paint (LCP)

Como as imagens podem ser candidatas a Largest Contentful Paint (LCP), o pré-carregamento delas pode melhorar a LCP do seu site.

Independentemente 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 detectado no payload de marcação inicial. Você também terá mais melhorias na LCP em sites que renderizam a marcação no lado do cliente do que em sites que enviam a marcação completa do servidor.