Otimize imagens para o Core Web Vitals

Como as imagens afetam o 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 mais impactante que você pode fazer pelo seu Core Web Vitals. Mas as imagens não afetam apenas a velocidade de carregamento. Elas podem causar layout shifts e, em páginas pesadas com muitas imagens, até mesmo atrasar a interatividade. Este guia cobre todos os ângulos: desde atributos HTML e pré-carregamento até imagens responsivas, formatos modernos e as estratégias que você deve aplicar a cada imagem da sua página.

Revisado pela última vez 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. Imagens, se enfileiradas para download em um momento tardio durante a renderização ou se forem simplesmente muito grandes geralmente resultarão em uma pontuação alta de LCP. Se as dimensões da imagem não forem definidas ou mudarem durante a fase de carregamento, as imagens também podem afetar a pontuação do CLS. E, finalmente, se a decodificação da imagem ocupar muito trabalho da thread principal, elas podem até mesmo afetar a INP. Vamos dar uma olhada mais de perto:

Largest Contentful Paint

O 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 2025 Web Almanac, as imagens são o elemento de 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 desacelerar significativamente a pontuação de LCP da página.

Cumulative Layout Shift

O Cumulative Layout Shift (CLS) mede o quanto o conteúdo de uma página se move à medida que carrega. As imagens podem causar layout shifts se elas não forem dimensionadas corretamente ou se forem inseridas na página depois que ela já tiver carregado, 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 a Interaction to Next Paint (INP), que mede o tempo que uma página leva para 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 de imagem HTML para velocidade

Atributo src

Especifica a URL da imagem. Essa 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 evitar layout shifts.

Atributo alt

Especifica um texto alternativo para a imagem caso ela não possa ser exibida. Isso é importante para fins de acessibilidade, pois ajuda os usuários com deficiência visual a entender do que a imagem trata. Também é importante para SEO, já que os motores de busca usam o texto alternativo para entender o conteúdo da imagem.

Atributo loading (lazy loading)

Especifica como o navegador deve carregar a imagem (lazy, eager, ou auto). Essa propriedade é importante para melhorar a performance da página, pois permite que 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 2025 Web Almanac, 16% das páginas ainda carregam sua imagem de LCP com lazy loading, o que é um dos erros de performance mais comuns na web.

Atributo srcset

Atributo sizes

Atributo decoding

Atributo fetchpriority

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

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

A segunda coisa a fazer, após ter otimizado o HTML, é observar o agendamento da imagem. Em muitos casos, o maior gargalo quando se trata de imagens afetando a métrica do LCP é o agendamento tardio. Se um navegador tiver a chance de baixar o elemento de LCP no início do processo de renderização a imagem estará disponível para o navegador o mais rápido possível e o navegador poderá começar a pintar esse elemento cedo no processo de renderização.

Parece simples não é? Bem, como nos certificamos de que a imagem seja enfileirada para download o mais rápido possível?

Pré-carregue o elemento de LCP

A maneira mais eficaz de garantir um download antecipado é pré-carregar a imagem. O pré-carregamento da imagem é feito com uma tag simples no início do elemento <head>. Por exemplo:

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

Essa tag simples dirá ao navegador que vamos precisar de "image.jpg" muito em breve e o navegador começará a baixar este arquivo imediatamente.

Em todos os sites monitorados pelo CoreDash, 83% dos carregamentos de página com uma imagem de LCP pré-carregada alcançam 'bom' no LCP, em comparação a 65% sem pré-carregamento.

Carregamento ansioso (Eager load) do elemento LCP

Use fetchpriority alto

Se, por algum motivo, você não puder pré-carregar o elemento de LCP, ao menos certifique-se de que o elemento tenha o atributo fetchpriority definido como high. Isso avisará o navegador que uma imagem é importante para a página e o navegador a baixará com uma prioridade alta. Por favor, note que o uso de fetchpriority="high" geralmente não é tão eficiente quanto o pré-carregamento de uma imagem!

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

A terceira coisa a fazer é se certificar de que você não está desperdiçando recursos preciosos da rede em imagens que são maiores do que deveriam ser. Você pode fazer isso usando imagens responsivas, usando compressão, e usando 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 alternativo descritivo">

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

Compressão de imagem

Formatos de imagem novos e mais rápidos

As imagens costumam ser um dos maiores recursos em uma página da web, e podem diminuir consideravelmente a velocidade de carregamento de uma página se não forem otimizadas. Formatos modernos de imagem como WebP e AVIF oferecem uma compressão consideravelmente melhor do que o JPEG enquanto mantém a mesma qualidade visual.

O WebP é suportado por virtualmente todos os navegadores (~99% de suporte global) e tipicamente reduz o tamanho do arquivo em 25-35% comparado ao JPEG. O AVIF vai além com mais de 50% de economia sobre o JPEG e agora tem 94.7% de suporte em 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 de LCP, enquanto o JPEG ainda domina em 57%. Esta é uma grande oportunidade.

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 alternativo descritivo">
</picture>

O navegador vai tentar o AVIF primeiro, retroceder para WebP, e usar JPEG como um último recurso. Se você estiver curioso sobre o futuro, leia sobre JPEG XL e seu status atual de suporte em navegadores.

Passo 4: Elimine o Cumulative Layout Shift!

Imagens que mudam de tamanho enquanto estão carregando causarão um layout shift. É simples assim. Esta seção cobre os 3 motivos mais comuns. Para o guia completo sobre todas as causas de CLS em imagens e mídias (incluindo vídeos, iframes, art direction, incompatibilidade de imagem responsiva, 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 prevenidas de crescer mais do que o viewport através de um truque simples de CSS:

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

Esse é um truque ótimo e você deve usar ele. Infelizmente eu vejo regularmente variantes deste truque que causam um layout shift. Por exemplo, por adicionar width:auto:

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

Isso fará com que qualquer imagem renderize com o width e height em auto. Isso geralmente significa que o navegador vai renderizar a imagem em 0x0px antes que a imagem tenha sido baixada.

3. Placeholders

Alguns scripts de lazy loading baseados em JavaScript usam placeholders. Se você usa algum tipo de truque CSS como o max-width:100% e height:auto mencionados acima, então a altura automática do placeholder quadrado não vai combinar com o atributo height da imagem. Basicamente a imagem vai primeiro renderizar com o placeholder quadrado em 720x720 e quando a imagem final tiver sido baixada vai 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 para se ter certeza é que não há imagens demais sendo decodificadas na thread principal ao mesmo tempo. Geralmente isso não vai 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" para todas as imagens para se ter certeza de que essas imagens podem ser decodificadas em uma thread separada. Também tente evitar ter essas tantas imagens decodificadas todas de uma vez adicionando loading="lazy" para todas as imagens escondidas e abaixo da dobra.

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

Estratégias de imagem para o elemento de LCP

O elemento de LCP é geralmente o elemento visual mais importante. Então nós precisamos realmente priorizar este.

1. Pré-carregue a imagem cedo no head da página com este código: <link rel="preload" as="image" href="path-to-img.png">
2. Diga ao navegador que essa imagem não deve ser carregada com lazy loading definindo loading="eager" ou por omitir o atributo loading
3. Dê uma dica para o navegador de que essa imagem deve ser baixada com uma prioridade alta ao usar fetchpriority="high" (se você está pré-carregando a imagem, você pode pular esta parte)
4. Defina decoding="sync" já que este elemento é tão importante que nós queremos decodificar ele na thread principal

Aqui está um exemplo completo de uma imagem de LCP otimizada, responsiva e com pré-carregamento:

<!-- 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 alternativo 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 muito em breve durante o carregamento de página mas preferencialmente depois do elemento de LCP. Nós podemos atingir isso ao pré-carregar o elemento de LCP. Isso dará a essas imagens visíveis sua ordem natural de download correto.

1. Diga ao navegador que esta imagem não deve ser carregada com lazy loading por definir loading="eager" ou ao omitir o atributo loading
2. Defina decoding="async" já que este elemento pode ser decodificado fora da thread principal de forma segura!

Estratégia de imagem para imagens abaixo da dobra

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

1. Diga ao navegador que essa imagem deve ser carregada com lazy loading ao definir loading="lazy"
2. Defina decoding="async" já que este elemento pode ser decodificado fora da thread principal de forma segura!

Evite imagens de fundo

Se você estiver usando imagens de fundo você precisa reconsiderar. Imagens de fundo não podem ser carregadas com lazy loading e você não pode controlar a propriedade de decodificação e você não pode definir o fetchpriority. Imagens de fundo geralmente não são responsivas, o que provavelmente vai te custar muito em largura de banda. Mas, mais importante, imagens de fundo são geralmente descobertas após o navegador ter baixado os arquivos de CSS. Essa quase nunca é a hora certa para engatilhar um download de imagem! Leia por que imagens de fundo são o mal e como adiar as imagens de fundo quando você não tiver escolha.

Você pode usar as tags normais de imagem em combinação com o CSS object-fit:cover para fazer as 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 a performance para os usuários reais. Ferramentas de laboratório como o Lighthouse podem confirmar que as suas alterações estão corretas, mas apenas o Real User Monitoring mostra a você o impacto real nos seus visitantes. Rastreie seu LCP, CLS, e INP ao longo do tempo para confirmar se as suas otimizações de imagem estão funcionando como esperado.