Imagens para Core Web Vitals 2026

Para a maioria dos sites, as imagens são o maior fator único nas pontuações de Core Web Vitals. Costumam ser o maior elemento visível, a causa mais comum de salto de layout e um motivo frequente de bloqueio da thread principal. Este guia mostra todas as alavancas relacionadas a imagens para manter LCP, CLS e INP no verde.

As três métricas, em resumo

LCP (Largest Contentful Paint): quando o maior elemento visível termina de renderizar. Meta: ≤ 2,5 s.
CLS (Cumulative Layout Shift): o quanto o conteúdo visível pula durante o carregamento. Meta: ≤ 0,1.
INP (Interaction to Next Paint): a sensação de resposta a interações. Meta: ≤ 200 ms. Substituiu o FID em 2024.

As três passam por imagens. Vamos às táticas.

1. Faça a imagem do LCP carregar primeiro

Em landings, o LCP costuma ser uma imagem hero. Três ganhos rápidos:

Pré-carregue. Coloque <link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> no <head>.
Use fetchpriority="high" também na própria tag <img>.
Nunca use loading="lazy" na imagem do LCP. É um dos avisos mais comuns do Lighthouse.

2. Use um formato moderno

Trocar JPG/PNG por WebP ou AVIF reduz bastante o peso com a mesma qualidade visual e impacta o LCP diretamente. Use <picture> para manter um fallback JPG em clientes muito antigos:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/24picture/hero.jpg" alt="..." width="1920" height="1080">
</picture>

Converta PNGs em segundos com nossa ferramenta PNG → WebP.

3. Comprima sem exagerar

Qualidade 80 em JPG/WebP é o ponto ideal para fotos: indistinguível de qualidade 95 e metade do peso. Para gráficos, prefira WebP sem perdas ou PNG comprimido. Reduza peso em um clique no nosso compressor de imagens (tudo no navegador, arquivos não saem do seu computador).

4. Sempre defina width e height

A correção mais importante para CLS. width e height não são pixels de layout — navegadores modernos os usam para reservar espaço com a proporção certa antes de a imagem carregar:

<img src="/24picture/hero.webp" width="1920" height="1080" alt="...">

Combinado com CSS max-width: 100%; height: auto;, a imagem é responsiva sem causar saltos.

5. Use srcset para tamanhos responsivos

Servir 4K para um celular de 360 px é desperdício. Com srcset + sizes, cada dispositivo baixa apenas o necessário:

<img
  src="/24picture/hero-1280.webp"
  srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
  sizes="(max-width: 768px) 100vw, 1280px"
  alt="..." width="1920" height="1080">

Precisa redimensionar em lote? Use nossa ferramenta de redimensionamento.

6. Lazy load abaixo da dobra

Coloque loading="lazy" em todo <img> abaixo da primeira tela. O navegador só baixa quando o usuário rola perto. Libera banda e CPU para o LCP e ajuda indiretamente o INP.

Exceção: a imagem do LCP e tudo que você pré-carregou não devem usar loading="lazy".

7. Decode assíncrono

decoding="async" em imagens não críticas permite ao navegador decodificar fora da thread principal, protegendo o INP em scroll e toques.

8. Cuide das fontes web e sprites SVG

Se usa sprites de ícones ou SVGs grandes, passe-os por um otimizador. Nosso otimizador SVG costuma cortar bastante peso e reduz o tempo de parse, ajudando o INP em páginas com muitas interações.

9. Cuidado com carrosséis que pulam

Reserve um contêiner com altura fixa. Se os slides têm proporções diferentes, normalize com object-fit: cover. Carrosséis que mudam de tamanho a cada slide são uma grande fonte de CLS.

10. Cache forte

Defina Cache-Control: public, max-age=31536000, immutable em arquivos de imagem com hash. Visitantes recorrentes terão LCP praticamente perfeito.

Checklist rápido

LCP pré-carregada com fetchpriority=high ✓
WebP/AVIF com fallback ✓
Qualidade 80 ou equivalente ✓
width e height em todas as imagens ✓
srcset + sizes em hero e conteúdo ✓
loading=lazy + decoding=async abaixo da dobra ✓
SVGs otimizados ✓
Cabeçalhos de cache longos ✓

Dica: a maioria das falhas de LCP que vemos vem de uma única imagem hero gigante. Converta, defina dimensões e pré-carregue — a pontuação sobe antes de você mexer em qualquer outra coisa.

Conclusão

Core Web Vitals não é caixa preta. As imagens dominam as métricas e quase todas as correções são uma linha de HTML ou uma passagem em um conversor. Acerte a hero, defina dimensões em todas e aplique lazy load abaixo: você passa.

Precisa de um ponto de partida? Passe a hero pelo nosso compressor, depois converta com PNG → WebP e veja o LCP cair.

Otimize imagens para Core Web Vitals: LCP, CLS e INP em 2026