Pré-carregar imagens responsivas

Barry Pollard

Yoav Weiss

Publicado em: 30 de setembro de 2019, última atualização: 10 de julho de 2026

Atenção: uma ou mais demonstrações nesta página não funcionam mais, porque o Glitch encerrou a hospedagem.

É 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

• 73
• 79
• 78
• 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 1.500 pixels de largura. Essa página desperdiçou muitos dados móveis, porque sua 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 ela seja carregada mais rapidamente.

As 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 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

• 50
• 79
• 85
• 11.1

Source

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

Importante: as imagens pré-carregadas provavelmente têm alta prioridade e, por isso, precisam incluir o atributo fetchpriority="high". Caso contrário, o pré-carregamento vai receber a prioridade padrão para o atributo as. Para imagens, o padrão é low para que o navegador possa priorizar o conteúdo que bloqueia a renderização em relação às imagens. Consulte Otimizar o carregamento de recursos com a API Fetch Priority para mais detalhes.

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

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

Aviso: as imagens responsivas podem não ser compatíveis com pré-carregamentos de cabeçalho HTTP, já que a janela de visualização só é definida quando o documento é criado. Isso também significa que eles não podem ser usados para pré-carregamento antecipado em 103 Early Hints.

Alguns navegadores, como o Chrome, processam os pré-carregamentos com esses atributos depois que o documento é definido e após o processamento do primeiro bloco de HTML. Isso foi proposto ao padrão HTML. No entanto, isso ainda pode ser arriscado se a janela de visualização for redefinida posteriormente no documento (por exemplo, um elemento <meta name="viewport"> tardio), já que as imagens responsivas erradas podem já ter começado a carregar.

Para evitar problemas, recomendamos usar elementos <link rel="preload" href="..."> para imagens responsivas em vez de cabeçalhos de resposta HTTP Link: <...>; rel="preload".

Casos de uso

Veja a seguir alguns casos de uso para pré-carregar 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 sabe qual imagem será mostrada primeiro. Nesse caso, é recomendável mostrar essa imagem o mais rápido possível, sem esperar que o script da 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 Throttling, selecione Fast 3G.
5. Desmarque a caixa de seleção Desativar cache.
6. Atualize a página.

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.

Usar preload aqui permite que a imagem comece a ser carregada com antecedência, para que esteja pronta para ser exibida quando o navegador precisar mostrá-la.

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.

Observação: outra maneira de evitar atrasos no carregamento de imagens é usar um carrossel baseado em marcação e fazer com que o pré-carregador do navegador selecione os recursos necessários. No entanto, essa abordagem nem sempre é prática, por exemplo, se você estiver reutilizando um componente que não é baseado em marcação.

Pré-carregar imagens de plano de fundo usando image-set

Se você tiver imagens de plano de fundo diferentes para densidades de tela distintas, 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);

Observação: essa sintaxe ignora a necessidade de prefixos de fornecedor desse recurso em navegadores baseados em Chromium e WebKit. Se você planeja usar esse recurso, considere usar o Autoprefixer (disponível como uma ferramenta on-line) para resolver isso automaticamente.

O problema com as imagens de plano de fundo CSS é que o navegador só as descobre 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 plano de fundo responsiva.

Neste exemplo, o download da imagem não começa até que o CSS seja totalmente baixado, o que causa 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">

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 em CSS, façam o download da origem 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.

Aqui, o download da imagem e do CSS começa ao mesmo tempo, permitindo que a imagem seja carregada mais rapidamente.

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

O pré-carregamento de imagens responsivas pode acelerar o carregamento delas na teoria, mas o que isso faz na prática?

Para responder a isso, criei duas cópias de uma loja de demonstração de PWA: 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 sem pré-carregamento e para pré-carregamento de imagem:

• Início da renderização permaneceu igual.
• O Speed Index melhorou um pouco (273 ms, já que 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.

As imagens chegam muito mais rápido quando são pré-carregadas, o que melhora significativamente a experiência do usuário.

Pré-carregar e <picture>

O Web Performance Working Group 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á 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 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", você precisará traduzir os pontos de interrupção em algo como:

<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é-carregar e type

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

Esse caso de uso é compatível apenas parcialmente com o pré-carregamento: os navegadores só devem baixar pré-carregamentos para tipos compatíveis. Para evitar que os navegadores pré-carreguem tipos de mimetypes incompatíveis, inclua o seguinte 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é-carregar 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 o seguinte: pré-carregue o tipo preferido:

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

O pré-carregamento do formato mais recente (AVIF, neste caso) funciona como um aprimoramento progressivo, em que os navegadores compatíveis com esse tipo se beneficiam, enquanto os outros não.

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 pegue 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, já que permite que a imagem exata seja pré-carregada com base no suporte do navegador. Isso também elimina o risco de um pré-carregamento ficar desatualizado em relação à marcação principal quando as imagens ou páginas mudam.

Efeitos na Largest Contentful Paint (LCP)

Como as imagens podem ser candidatas à 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, os pré-carregamentos funcionam melhor quando o recurso de imagem não é detectável no payload de marcação inicial. Você também vai notar uma melhora maior 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.