Imagens costumam ser o item mais pesado de uma página e a principal causa de um LCP ruim. Otimizá-las melhora a velocidade, os Core Web Vitals e a experiência — quatro técnicas resolvem a maior parte.
1. Formatos modernos
Troque JPEG/PNG por WebP ou AVIF: mesma qualidade com arquivos muito menores. Sirva com fallback:
2. Dimensões fixas (evita CLS)
Sempre defina width e height (ou aspect-ratio no CSS). Sem isso, o layout “pula” quando a imagem carrega — piorando o CLS.
3. Lazy loading e 4. srcset
Adie imagens fora da tela com loading="lazy" e ofereça tamanhos diferentes por dispositivo com srcset. Assim o celular não baixa a imagem gigante do desktop.
Não esqueça do alt descritivo: ele ajuda a acessibilidade e o SEO de imagens. Tudo isso melhora seus Core Web Vitals.
Perguntas frequentes
Devo usar lazy loading na imagem principal?
Não. A imagem do topo (que conta para o LCP) deve carregar logo. Use lazy só nas imagens abaixo da dobra.
WebP ou AVIF?
AVIF comprime ainda mais, mas WebP tem suporte mais amplo. Sirva AVIF com fallback para WebP e, por fim, JPEG.
