Como otimizar imagens para Core Web Vitals (guia 2026)

Seu site carrega devagar. Você roda um teste Lighthouse. O relatório diz que suas imagens são o problema.

Aquela pontuação vermelha no "Largest Contentful Paint"? Quase sempre é causada por imagens não otimizadas. E o Google usa essa pontuação para ranquear seu site.

Core Web Vitals são as métricas que mais importam para o Google. As imagens afetam a mais importante. Otimize suas imagens e suas pontuações sobem. Veja exatamente como fazer isso.

O que são Core Web Vitals e por que as imagens importam?

Core Web Vitals são três métricas de performance que o Google mede em cada página:

Largest Contentful Paint (LCP): A velocidade com que o maior elemento visível carrega. Deve estar abaixo de 2,5 segundos.
Interaction to Next Paint (INP): A velocidade de resposta da página quando você clica ou toca. Deve estar abaixo de 200 milissegundos.
Cumulative Layout Shift (CLS): Quanto o layout da página se move durante o carregamento. Deve estar abaixo de 0,1.

As imagens afetam diretamente duas dessas três métricas. Uma imagem hero pesada destrói sua pontuação de LCP. Uma imagem sem dimensões definidas causa mudanças de layout que prejudicam o CLS.

Por que isso importa para o seu negócio? O Google confirmou que Core Web Vitals são um fator de ranqueamento. Páginas com boas pontuações recebem mais tráfego orgânico. Páginas com pontuações ruins caem nos resultados.

Os dados confirmam. Sites que melhoraram seu LCP em mais de 2 segundos viram ganhos de ranqueamento mensuráveis. Para palavras-chave competitivas, essa diferença de velocidade pode significar a diferença entre a primeira e a terceira página.

E as imagens geralmente são os elementos mais pesados de qualquer página. A página web média carrega mais de 1 MB em imagens. Isso é mais que scripts, fontes e HTML juntos. Otimize as imagens e você resolve a maior parte do problema de performance.

Como melhorar o Largest Contentful Paint com otimização de imagens?

O LCP mede quando o maior elemento visível termina de renderizar. Na maioria das páginas, é uma imagem hero, uma foto de produto ou um banner.

Se essa imagem leva 4 segundos para carregar, seu LCP é de 4 segundos. O Google quer abaixo de 2,5. Veja como fechar essa diferença.

Comprima suas imagens. Uma imagem hero de 2 MB é pesada demais. Comprima para 150-200 KB e o tempo de carregamento cai drasticamente. Use uma configuração de qualidade entre 75-85% para fotos. A diferença visual é quase invisível, mas o tamanho do arquivo cai 80-90%.

Use formatos modernos. Arquivos WebP são 25-35% menores que JPEG na mesma qualidade. AVIF economiza ainda mais. Todos os navegadores modernos suportam WebP. Trocar o formato é um dos ganhos de LCP mais fáceis.

Redimensione para o tamanho de exibição. Não sirva uma imagem de 4000px quando a página a exibe a 800px. Redimensione primeiro, depois comprima. Só isso pode reduzir o tamanho do arquivo em 70-80%.

Pré-carregue sua imagem LCP. Adicione uma dica de preload no HTML para que o navegador busque a imagem hero imediatamente. Sem isso, o navegador só descobre a imagem depois de analisar o CSS. Esse atraso adiciona centenas de milissegundos.

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Defina fetchpriority="high" na imagem LCP. Isso diz ao navegador para priorizar esta imagem em relação a outros recursos. Uma pequena mudança que economiza tempo real no LCP.

Não use lazy load na imagem LCP. Esse é um erro comum. O lazy loading atrasa a imagem até ela entrar na área visível. Sua imagem hero já está visível no carregamento da página. Colocar lazy loading nela adiciona atraso desnecessário e prejudica sua pontuação de LCP.

O lazy loading ajuda ou prejudica os Core Web Vitals?

O lazy loading é ótimo para imagens abaixo da dobra. É péssimo para imagens acima da dobra.

Quando você adiciona loading="lazy" a uma imagem, o navegador espera até o usuário rolar perto dela para baixar. Isso economiza banda para imagens que o usuário talvez nunca veja. Reduz o peso inicial da página e acelera o primeiro carregamento.

Mas se você colocar lazy load na imagem hero ou em qualquer imagem visível na primeira tela, está dizendo ao navegador para esperar antes de carregar o elemento visual mais importante da página. Isso aumenta diretamente o LCP.

A regra é simples. Lazy load para cada imagem abaixo da dobra. Nunca lazy load para imagens acima da dobra. Sua imagem hero, o logo do cabeçalho e qualquer conteúdo visível sem rolar devem carregar imediatamente.

Para a maioria das páginas, isso significa 1-3 imagens carregando imediatamente. Todo o resto com lazy loading. Esse equilíbrio te dá a melhor pontuação de LCP enquanto ainda economiza banda.

Fique atento também às mudanças de layout causadas por imagens com lazy load. Quando uma imagem carrega e empurra o conteúdo para baixo, isso é um problema de CLS. Sempre defina atributos width e height explícitos nas suas imagens. O navegador reserva espaço antes da imagem carregar, evitando saltos de layout.

Quais formatos de imagem dão as melhores pontuações de Core Web Vitals?

O formato que você escolhe afeta diretamente o tamanho do arquivo. Arquivos menores carregam mais rápido. Carregamento mais rápido significa LCP melhor.

WebP é a melhor escolha padrão para imagens web atualmente. Comprime 25-35% melhor que JPEG sem perda de qualidade visível. O suporte dos navegadores é superior a 97%. A menos que precise suportar navegadores muito antigos, WebP deve ser seu formato principal.

AVIF comprime ainda melhor que WebP. Até 50% menor que JPEG. Mas a codificação é mais lenta e o suporte dos navegadores ainda está evoluindo. Use AVIF se sua pipeline suportar e você puder servir alternativas.

JPEG ainda funciona bem para fotos. Se você comprimir bem (qualidade 75-85), é uma escolha sólida. Mas WebP quase sempre vai te dar um arquivo menor com a mesma qualidade visual.

PNG é ideal para logos, ícones e imagens com transparência. Mas arquivos PNG são grandes. Se a transparência não for necessária, converta para WebP ou JPEG.

O elemento <picture> permite servir o melhor formato para cada navegador:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Imagem hero" width="1200" height="600">
</picture>

Isso serve AVIF para navegadores que suportam, WebP para o grupo seguinte e JPEG como fallback. Cada visitante recebe o menor arquivo possível que seu navegador consegue processar.

Como evitar que imagens causem mudanças de layout?

A mudança de layout acontece quando uma imagem carrega e empurra o resto do conteúdo. O texto que você estava lendo pula para baixo. Um botão que você ia clicar se move. É frustrante para os usuários e ruim para sua pontuação de CLS.

A solução é simples. Sempre diga ao navegador o tamanho da imagem antes dela carregar.

Defina width e height em cada imagem. O navegador usa esses valores para calcular a proporção e reservar o espaço correto. Mesmo que a imagem não tenha carregado, o layout permanece estável.

<img src="/foto.webp" alt="Foto do produto" width="800" height="600">

Use aspect-ratio no CSS para imagens responsivas. Se suas imagens se adaptam ao viewport, defina a proporção no CSS. O navegador reserva o espaço proporcional correto em qualquer tamanho de tela.

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Evite inserir imagens dinamicamente acima do conteúdo existente. Se JavaScript carrega um banner de anúncio ou um carrossel no topo da página, tudo abaixo se desloca. Reserve espaço para conteúdo dinâmico ou carregue-o abaixo da dobra.

Fique atento a layouts que dependem de fontes. Às vezes a mudança de layout não vem das imagens. Fontes web que carregam tarde podem reformatar o texto e mover as imagens. Use font-display: swap e pré-carregue suas fontes principais.

Qual é uma boa checklist de otimização de imagens para Core Web Vitals?

Aqui está uma checklist passo a passo para cada página:

Antes do upload:

Redimensione imagens para suas dimensões de exibição (2x para telas retina).
Comprima as imagens na qualidade certa. Use 75-85% para fotos.
Converta para WebP ou AVIF quando possível.
Remova metadados (dados EXIF, coordenadas GPS, informações da câmera).

No seu HTML:

Defina width e height em cada tag <img>.
Adicione loading="lazy" em todas as imagens abaixo da dobra.
Adicione fetchpriority="high" na imagem LCP.
Pré-carregue a imagem LCP com <link rel="preload">.
Use o elemento <picture> para servir formatos modernos com fallbacks.

Após o deploy:

Rode o Lighthouse ou PageSpeed Insights. Verifique suas pontuações de LCP e CLS.
Olhe a seção "Oportunidades". Ela aponta imagens que poderiam ser menores.
Teste no mobile. Conexões móveis são mais lentas, então a otimização de imagens importa ainda mais lá.

Seguir essa checklist de forma consistente vai manter seus Core Web Vitals no verde. A maioria dos sites vê o LCP cair 1-3 segundos só com otimização de imagens.

Como testar e monitorar a performance das imagens?

Otimizar uma vez não é suficiente. Novas imagens são adicionadas. O conteúdo muda. Você precisa monitorar a performance ao longo do tempo.

Google PageSpeed Insights te dá uma visão rápida. Cole qualquer URL e obtenha pontuações de LCP, INP e CLS para mobile e desktop. Também mostra dados reais de usuários do Chrome quando disponível.

Lighthouse (integrado no Chrome DevTools) faz uma auditoria completa. Aponta imagens grandes demais, lazy loading ausente, imagens sem dimensões e imagens em formatos desatualizados. Rode em uma janela anônima para evitar interferência de extensões.

Google Search Console mostra dados de Core Web Vitals para todo o seu site. Agrupa URLs por status: bom, precisa melhorar ou ruim. Verifique mensalmente para detectar regressões cedo.

WebPageTest te dá uma visualização em tira de filme do carregamento da sua página quadro a quadro. Você pode ver exatamente quando cada imagem aparece e como ela afeta a timeline de renderização.

O comparativo de ferramentas de compressão populares pode ajudar a escolher a ferramenta certa para seu workflow. Seja comprimindo uma imagem por vez ou processando centenas em lote, a ferramenta certa torna a otimização fácil de manter.

Pronto para corrigir seus Core Web Vitals?

As imagens são o maior peso na maioria das páginas web. Otimizá-las é a mudança de maior impacto que você pode fazer para os Core Web Vitals.

Comprima suas imagens. Use formatos modernos. Defina as dimensões corretas. Pré-carregue o que importa. Use lazy load no que não importa.

CompressIMG cuida da etapa de compressão. Faça upload das suas imagens, escolha a qualidade e baixe arquivos otimizados em segundos. Sem necessidade de conta. Comece pelas imagens hero e vá descendo.

Sua pontuação de LCP vai agradecer.