Otimize imagens para Core Web Vitals

Como as imagens afetam as Core Web Vitals

As imagens são responsáveis pelo Largest Contentful Paint em 85% das páginas de desktop e 76% das páginas mobile, de acordo com o Web Almanac de 2025. Isso torna a otimização de imagens a coisa mais impactante que você pode fazer pelas suas Core Web Vitals. Mas as imagens não afetam apenas a velocidade de carregamento. Elas podem causar layout shifts, e em páginas com muitas imagens, até mesmo desacelerar a interatividade. Este guia cobre todos os ângulos: desde atributos HTML e preloading até 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 todas as Core Web Vitals. Imagens, se estiverem na fila para download em um momento tardio durante a renderização ou se forem simplesmente grandes demais, geralmente resultarão em uma pontuação alta de LCP. Se as dimensões da imagem não estiverem 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 da imagem ocupar muito trabalho da main thread, elas podem até mesmo afetar o INP. Vamos dar uma olhada mais de perto:

Largest Contentful Paint

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

Cumulative Layout Shift

Cumulative Layout Shift (CLS) mede o quanto o conteúdo de uma página se move ao ser carregado. As imagens podem causar layout shifts se não forem dimensionadas corretamente ou se forem inseridas na página depois que ela já foi carregada, fazendo com que outros elementos se movam. O Web Almanac de 2025 relata que 65% das páginas de 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 leva para uma página responder visualmente após um usuário interagir com ela. Se houver muitas imagens grandes que precisam ser decodificadas, a página pode demorar mais para responder às interações do usuário, levando a uma pontuação de INP ruim. Isso é mais comum em páginas de listagem de produtos onde centenas de imagens competem por recursos.

Passo 1: Otimize o elemento HTML de imagem para velocidade

Atributo src

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

Atributos width e height

Especifica a largura e a altura da imagem em pixels. Essas 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 a largura quanto a altura para prevenir layout shifts.

Atributo alt

Especifica o texto alternativo para a imagem se ela não puder ser exibida. Isso é importante para fins de acessibilidade, pois ajuda usuários com deficiência visual a entender do que a imagem se trata. 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 (lazy loading)

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 forem necessárias. Nunca defina loading="lazy" na imagem de LCP. De acordo com o Web Almanac de 2025, 16% das páginas ainda carregam sua imagem de LCP usando lazy load, o 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 alta prioridade é 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 usam isso em sua imagem de LCP, o que significa que a grande maioria dos sites está perdendo uma vitória fácil.

Passo 2: Certifique-se de 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 um navegador tiver uma chance de baixar o elemento LCP logo no início durante o processo de renderização, a imagem estará disponível para o navegador o mais cedo possível e o navegador poderá começar a pintar esse elemento precocemente no processo de renderização.

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

Preload o elemento LCP

A forma mais eficaz de garantir um download antecipado é fazer o preload da imagem. O preloading 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 dirá ao navegador que precisaremos de "image.jpg" muito em breve e o navegador começará a baixar este arquivo imediatamente.

Em sites monitorados pelo CoreDash, 83% dos carregamentos de página com uma imagem de LCP pré-carregada pontuam como 'good' no LCP, comparado a 65% sem preloading.

Eager load o elemento LCP

Use alta fetchpriority

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

Passo 3: Certifique-se de que a imagem seja baixada o mais rápido possível

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

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="Descriptive alt text">

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

Compressão de imagem

Novos e mais rápidos formatos de imagem

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

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

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="Descriptive alt text">
</picture>

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

Passo 4: Elimine o layout shift!

Imagens que mudam de tamanho enquanto estão carregando causarão um layout shift. É simples assim. Esta seção cobre as 3 razões mais comuns. Para o guia completo sobre todas as causas de CLS em imagens e mídias (incluindo vídeos, iframes, art direction, inconsistências em imagens responsivas e lazy loading), veja Como Imagens e Mídias Causam Layout Shift.

1. Dimensões de imagem ausentes

2. Problemas de estilo

Geralmente as imagens são impedidas de crescer mais do que a viewport por um truque simples de CSS:

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

Este é um ótimo truque e você deve usá-lo. Infelizmente eu vejo regularmente variantes desse truque que realmente causam um layout shift. Por exemplo, adicionando width:auto:

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

Isso fará com que qualquer imagem seja renderizada com um width e height auto. Isso geralmente significa que o navegador renderizará a imagem em 0x0px antes de a 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 vai coincidir com o atributo height da imagem. Basicamente, a imagem primeiro será renderizada com o placeholder quadrado em 720x720 e quando a imagem final for baixada ela será renderizada em 720x180:

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

Passo 5: Proteja a main thread

A próxima coisa a garantir é que não haja imagens demais sendo decodificadas na main thread ao mesmo tempo. Normalmente 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 sendo decodificadas de uma só vez adicionando loading="lazy" a todas as imagens below-the-fold 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 priorizar este.

1. Faça o 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. Diga ao navegador que esta imagem não deve usar lazy load definindo loading="eager" ou omitindo o atributo loading
3. Sinalize ao navegador que esta imagem deve ser baixada com alta prioridade usando fetchpriority="high" (se você estiver fazendo o preload da imagem, pode pular esta parte)
4. Defina decoding="sync" já que este elemento é tão importante que queremos decodificá-lo na main thread

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

<!-- In <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">

<!-- In <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="Descriptive alt text"
  fetchpriority="high" decoding="sync">

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

Imagens visíveis devem ser carregadas bem cedo durante o carregamento da página, mas de preferência após o elemento LCP. Nós podemos alcançar isso fazendo o preload do elemento LCP. Isso dará a essas imagens visíveis sua ordem de download natural e correta.

1. Diga ao navegador que esta imagem não deve usar lazy load definindo loading="eager" ou omitindo o atributo loading
2. Defina decoding="async" já que este elemento pode ser decodificado de forma segura fora da main thread!

Estratégia de imagem para imagens below-the-fold

Todas as imagens below-the-fold devem usar lazy load. É simples assim! Não há exceções!

1. Diga ao navegador que esta imagem deve usar lazy load definindo loading="lazy"
2. Defina decoding="async" já que este elemento pode ser decodificado de forma segura fora da main thread!

Evite imagens de fundo

Se você estiver usando imagens de fundo (background images), você precisa reconsiderar. Imagens de fundo não podem usar lazy load e você não pode controlar a propriedade decoding e nem definir o fetchpriority. Imagens de fundo geralmente não são responsivas, o que provavelmente custará a você muita largura de banda. Mas, mais importante, as imagens de fundo geralmente são descobertas após o navegador ter baixado os arquivos CSS. Esta quase nunca é a hora certa de acionar o download de uma imagem! Leia por que imagens de fundo são o mal 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 com que as imagens normais se comportem como imagens de fundo!

Monitore o impacto com Real User Monitoring

Após aplicar essas otimizações, verifique se elas realmente melhoram a performance para os usuários reais. Ferramentas de laboratório como o Lighthouse podem confirmar que suas mudanças 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 imagens estão funcionando conforme o esperado.