Imagens e Core Web Vitals: Otimização para LPs Velozes

Imagens são responsáveis por mais de 60% do peso médio de uma página web. Em landing pages, onde a primeira impressão é crítica, imagens mal otimizadas podem devastar o LCP e o CLS.

O Impacto das Imagens no LCP

O Largest Contentful Paint (LCP) é frequentemente dominado pela imagem principal da landing page. Uma imagem pesada ou com carregamento lento pode atrasar o LCP para mais de 4 segundos.

Para otimizar: comprima imagens sem perda perceptível de qualidade, use formatos modernos e sirva tamanhos apropriados para cada viewport.

Formatos Modernos: WebP e AVIF

WebP oferece compressão 25 a 35% menor que JPEG com qualidade equivalente. AVIF vai além, com redução de até 50% em relação ao JPEG, mas com suporte de navegadores ligeiramente menor.

Use o elemento <picture> para servir formatos modernos com fallback para JPEG:

<picture>
  <source srcset="imagem.avif" type="image/avif">
  <source srcset="imagem.webp" type="image/webp">
  <img src="imagem.jpg" alt="" loading="lazy" width="800" height="600">
</picture>

Dimensões Explícitas e CLS

O Cumulative Layout Shift (CLS) é drasticamente afetado por imagens sem dimensões definidas. Sempre especifique width e height na tag <img> ou via CSS aspect-ratio.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Isso reserva o espaço da imagem antes do carregamento e elimina o salto visual.

Lazy Loading Inteligente

Use loading="lazy" para imagens abaixo da dobra e loading="eager" para a imagem principal (LCP). O lazy loading nativo é suportado por todos os navegadores modernos.

Para imagens de fundo CSS, considere usar a técnica de content-visibility ou carregar condicionalmente com IntersectionObserver.

Responsive Images com srcset

Sirva imagens no tamanho correto para cada dispositivo usando srcset e sizes. Uma imagem de 1920px não deve ser servida para um celular de 375px.

<img
  srcset="imagem-320.jpg 320w, imagem-640.jpg 640w, imagem-1280.jpg 1280w"
  sizes="(max-width: 640px) 100vw, 50vw"
  src="imagem-640.jpg"
  alt=""
>

CDN de Imagens

Use um CDN com otimização automática de imagens como Cloudinary, Imgix ou o serviço de imagens da Vercel. Esses serviços comprimem, redimensionam e convertem formatos automaticamente baseados no user-agent.

Conclusão

Imagens otimizadas são o caminho mais rápido para melhorar Core Web Vitals em landing pages. Formatos modernos, dimensões explícitas e responsive images são investimentos que pagam em performance, ranqueamento e conversão.