Otimizar imagens para Core Web Vitals

Como as imagens afetam os Core Web Vitals

As imagens são responsáveis pelo Largest Contentful Paint em 85% das páginas desktop e 76% das páginas mobile, de acordo com o 2025 Web Almanac. Isso torna a otimização de imagens a ação com maior impacto que você pode realizar para os seus Core Web Vitals. Mas as imagens não afetam apenas a velocidade de carregamento. Elas podem causar mudanças de layout e, em páginas com muitas imagens, até mesmo diminuir a interatividade. Este guia cobre todos os ângulos: de atributos HTML e preloading a imagens responsivas, formatos modernos e as estratégias que você deve aplicar a cada imagem na sua página.

Última revisão por Arjen Karel em fevereiro de 2026

Quais Core Web Vitals as imagens podem afetar?

Você pode se surpreender ao saber que as imagens podem afetar todos os Core Web Vitals. As imagens, se forem enfileiradas para download tarde durante a renderização ou se forem simplesmente muito grandes, geralmente resultarão em uma pontuação LCP alta. Se as dimensões das imagens não forem definidas ou mudarem durante a fase de carregamento, as imagens também podem afetar a pontuação de CLS. E finalmente, se a decodificação de imagens consumir muito trabalho da thread principal, elas podem até afetar o INP. Vamos olhar mais de perto:

Largest Contentful Paint

Largest Contentful Paint (LCP) mede quanto tempo leva para o maior elemento da página (como uma imagem ou vídeo) se tornar visível para o usuário. De acordo com o 2025 Web Almanac, as imagens são o elemento LCP em 85% das páginas desktop e 76% das páginas mobile. Se uma imagem for enfileirada tarde demais ou demorar muito para carregar, ela pode diminuir significativamente a pontuação LCP da página.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) mede o quanto o conteúdo de uma página se desloca durante o carregamento. As imagens podem causar mudanças de layout se não forem dimensionadas corretamente ou se forem inseridas na página após o carregamento, fazendo com que outros elementos se movam. O 2025 Web Almanac relata que 65% das páginas desktop ainda têm pelo menos uma imagem sem dimensões explícitas.

Interaction to Next Paint (INP)

As imagens também podem impactar o Interaction to Next Paint (INP), que mede o tempo que uma página leva para responder visualmente após uma interação do usuário. Se houver muitas imagens grandes que precisam ser decodificadas, a página pode demorar mais para responder às interações do usuário, resultando em uma pontuação INP ruim. Isso é mais comum em páginas de listagem de produtos onde centenas de imagens competem por recursos.

Passo 1: Otimize o elemento de imagem HTML para velocidade

Atributo src

Especifica a URL da imagem. Esta propriedade é essencial, pois informa ao navegador onde encontrar a imagem.

Atributos width e height

Especificam a largura e a altura da imagem em pixels. Estas propriedades são importantes para renderizar a imagem corretamente na página, pois definem o tamanho do contêiner da imagem e como a imagem se encaixa dentro dele. Sempre defina tanto width quanto height para prevenir mudanças de layout.

Atributo alt

Especifica texto alternativo para a imagem caso ela não possa ser exibida. Isso é importante para acessibilidade, pois ajuda usuários com deficiência visual a entender o conteúdo da imagem. Também é importante para otimização de mecanismos de busca (SEO), pois os mecanismos de busca usam o texto alt para entender o conteúdo da imagem.

Atributo loading (carregamento lazy)

Especifica como o navegador deve carregar a imagem (lazy, eager ou auto). Esta propriedade é importante para melhorar o desempenho da página, pois permite que as imagens sejam carregadas de forma assíncrona e apenas quando são necessárias. Nunca defina loading="lazy" na imagem LCP. De acordo com o 2025 Web Almanac, 16% das páginas ainda carregam a imagem LCP com lazy loading, que é um dos erros de desempenho mais comuns na web.

Atributo srcset

Atributo sizes

Atributo decoding

Atributo fetchpriority

O atributo fetchpriority especifica a prioridade do fetch de um recurso em relação a outros recursos na página. O atributo pode ter um de três valores: "high", "low" ou "auto". Um recurso com prioridade alta é carregado antes de recursos com prioridades mais baixas. A partir de 2026, fetchpriority é suportado em todos os navegadores modernos (Chrome 102+, Safari 17.2+, Firefox 132+, Edge 102+) e é seguro para uso em produção. Apenas 17% das páginas o utilizam na imagem LCP, o que significa que a grande maioria dos sites está perdendo uma melhoria fácil.

Passo 2: Garanta que a imagem seja enfileirada para download o mais cedo possível

A segunda coisa a fazer, depois de otimizar o HTML, é olhar para o agendamento de imagens. Em muitos casos, o maior gargalo quando se trata de imagens afetando a métrica LCP é o agendamento tardio. Se o navegador tiver a chance de baixar o elemento LCP cedo durante o processo de renderização, a imagem estará disponível para o navegador o mais cedo possível e o navegador pode começar a pintar esse elemento cedo no processo de renderização.

Parece simples, certo? Bem, como garantimos que a imagem seja enfileirada para download o mais cedo possível.

Faça preload do elemento LCP

A maneira mais eficaz de garantir um download antecipado é fazer o preload da imagem. O preload da imagem é feito com uma tag simples no início do elemento <head>. Por exemplo:

<link rel="preload" as="image" href="image.jpg">

Esta tag simples informará ao navegador que precisaremos de "image.jpg" em breve e o navegador começará a baixar este arquivo imediatamente.

Entre os sites monitorados pelo CoreDash, 83% dos carregamentos de página com uma imagem LCP pré-carregada obtêm classificação 'bom' no LCP, comparado a 65% sem preloading.

Carregamento eager do elemento LCP

Use fetchpriority high

Se, por algum motivo, você não puder fazer preload do elemento LCP, pelo menos certifique-se de que o elemento tenha o atributo fetchpriority definido como high. Isso indicará ao navegador que uma imagem é importante para a página e o navegador a baixará com prioridade alta. Note que usar fetchpriority="high" geralmente não é tão eficiente quanto fazer preload de uma imagem!

Passo 3: Garanta que a imagem seja baixada o mais rápido possível

A terceira coisa a fazer é garantir que você não está desperdiçando recursos de rede preciosos com imagens maiores do que deveriam ser. Você pode fazer isso usando imagens responsivas, compressão e formatos de imagem novos e mais rápidos.

Imagens responsivas

Aqui está uma imagem responsiva usando srcset e sizes:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texto alt descritivo">

O navegador escolhe a imagem mais apropriada com base na largura da viewport. Para imagens abaixo da dobra com lazy loading, você também pode usar sizes="auto" (suportado no Chrome 126+ e Edge 126+), que permite ao navegador calcular o tamanho correto automaticamente com base no layout CSS da imagem.

Compressão de imagens

Formatos de imagem novos e mais rápidos

As imagens são frequentemente um dos maiores recursos em uma página web e podem diminuir significativamente a velocidade de carregamento de uma página se não forem otimizadas. Formatos de imagem modernos como WebP e AVIF oferecem compressão significativamente melhor que JPEG mantendo a mesma qualidade visual.

WebP é suportado por praticamente todos os navegadores (~99% de suporte global) e tipicamente reduz o tamanho do arquivo em 25-35% comparado ao JPEG. AVIF vai ainda mais longe com 50%+ de economia sobre o JPEG e agora tem 94,7% de suporte nos navegadores (Chrome 85+, Firefox 93+, Safari 16.4+). Apesar disso, o 2025 Web Almanac mostra que o AVIF é usado em apenas 0,7% das imagens LCP, enquanto o JPEG ainda domina com 57%. Essa é uma oportunidade enorme.

Use o elemento <picture> para servir o melhor formato que cada navegador suporta:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="450" alt="Texto alt descritivo">
</picture>

O navegador tentará AVIF primeiro, fará fallback para WebP e usará JPEG como último recurso. Se você está curioso sobre o futuro, leia sobre JPEG XL e seu status atual de suporte nos navegadores.

Passo 4: Elimine as mudanças de layout!

Imagens que mudam de tamanho enquanto estão carregando causarão uma mudança de layout. É simples assim. Existem 3 razões principais pelas quais as imagens causam mudanças de layout (existem mais, mas estas 3 são as mais comuns):

1. Dimensões de imagem ausentes

2. Problemas de estilo

Geralmente, as imagens são impedidas de crescer além da viewport com um truque CSS simples:

img{
   max-width:100%;
   height:auto;
}

Este é um ótimo truque e você deve usá-lo. Infelizmente, eu regularmente vejo variantes deste truque que causam mudanças de layout. Por exemplo, adicionando width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Isso fará com que qualquer imagem renderize com largura e altura automáticas. Isso geralmente significa que o navegador renderizará a imagem em 0x0px antes da imagem ser baixada.

3. Placeholders

Alguns scripts de lazy loading baseados em JavaScript usam placeholders. Se você usar algum tipo de truque CSS como o mencionado acima max-width:100% e height:auto, então a altura automática do placeholder quadrado não corresponderá ao atributo height da imagem. Basicamente, a imagem primeiro renderizará com o placeholder quadrado em 720x720 e quando a imagem final for baixada, renderizará em 720x180:

<img
  src="1x1placeholder.png"
  data-src="hero.png"
  width="720"
  height="180"
  style="height:auto;max-width:100%"
>

Passo 5: Proteja a thread principal

A próxima coisa a garantir é que não muitas imagens sejam decodificadas na thread principal ao mesmo tempo. Geralmente isso não será um problema, mas eu já vi isso acontecer muitas vezes em páginas de listagem de produtos (onde às vezes até 500 imagens competem por recursos!).

O truque é adicionar decoding="async" a todas as imagens para garantir que essas imagens possam ser decodificadas em uma thread separada. Também tente evitar ter tantas imagens decodificadas de uma vez adicionando loading="lazy" a todas as imagens abaixo da dobra e ocultas.

Passo 6: Escolha a estratégia certa para cada imagem!

Estratégias de imagem para o elemento LCP

O elemento LCP é geralmente o elemento visual mais importante. Então precisamos realmente priorizá-lo.

1. Faça preload da imagem no início do head da página com este código: <link rel="preload" as="image" href="path-to-img.png">
2. Informe ao navegador que esta imagem não deve ter lazy loading definindo loading="eager" ou omitindo o atributo loading
3. Indique ao navegador que esta imagem deve ser baixada com prioridade alta usando fetchpriority="high" (se você estiver fazendo preload da imagem, pode pular esta parte)
4. Defina decoding="sync" pois este elemento é tão importante que queremos decodificá-lo na thread principal

Aqui está um exemplo completo de uma imagem LCP responsiva e otimizada com preloading:

<!-- No <head> -->
<link rel="preload" as="image" href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 800px">

<!-- No <body> -->
<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texto alt descritivo"
  fetchpriority="high" decoding="sync">

Estratégia de imagem para logos e outras imagens visíveis (não-LCP)

Imagens visíveis devem ser carregadas logo durante o carregamento da página, mas preferencialmente após o elemento LCP. Podemos conseguir isso fazendo preload do elemento LCP. Isso dará a essas imagens visíveis sua ordem de download natural e correta.

1. Informe ao navegador que esta imagem não deve ter lazy loading definindo loading="eager" ou omitindo o atributo loading
2. Defina decoding="async" pois este elemento pode ser decodificado com segurança fora da thread principal!

Estratégia de imagem para imagens abaixo da dobra

Todas as imagens abaixo da dobra devem ter lazy loading. É simples assim! Não há exceções!

1. Informe ao navegador que esta imagem deve ter lazy loading definindo loading="lazy"
2. Defina decoding="async" pois este elemento pode ser decodificado com segurança fora da thread principal!

Evite imagens de fundo

Se você está usando imagens de fundo, precisa reconsiderar. Imagens de fundo não podem ter lazy loading e você não pode controlar a propriedade de decodificação nem definir o fetchpriority. Imagens de fundo geralmente não são responsivas, o que provavelmente custará muita largura de banda. Mas o mais importante, imagens de fundo geralmente são descobertas após o navegador ter baixado os arquivos CSS. Este quase nunca é o momento certo para acionar o download de uma imagem! Leia por que imagens de fundo são prejudiciais e como adiar imagens de fundo quando você não tem escolha.

Você pode usar tags de imagem normais em combinação com o CSS object-fit:cover para fazer imagens normais se comportarem como imagens de fundo!

Monitore o impacto com Real User Monitoring

Após aplicar essas otimizações, verifique se elas realmente melhoram o desempenho para usuários reais. Ferramentas de laboratório como Lighthouse podem confirmar que suas alterações estão corretas, mas apenas o Real User Monitoring mostra o impacto real nos seus visitantes. Acompanhe seu LCP, CLS e INP ao longo do tempo para confirmar que suas otimizações de imagem estão funcionando como esperado.