Como revisar imagens visíveis na primeira tela

Para otimizar imagens visíveis no início, primeiro identifique o elemento que realmente é o LCP: pode ser imagem, bloco de texto ou outro conteúdo grande na viewport. Em Chrome DevTools Performance ou PageSpeed Insights, registre elemento e subpartes do LCP antes de mudar loading, formato ou prioridade.

Ajuste a imagem certa

1. Selecione a imagem de LCP apropriada para cada viewport. Gere versões nos tamanhos necessários, converta para formato moderno compatível (por exemplo AVIF/WebP com fallback quando a estratégia exigir) e ajuste compressão visualmente; não envie uma imagem de desktop enorme ao celular.
2. Use srcset com descritores de largura e sizes que correspondam à largura renderizada. Informe width e height ou proporção CSS para reservar espaço e evitar deslocamento.
3. Não aplique loading="lazy" na imagem principal visível/LCP. Use fetchpriority="high" só na imagem mais provável de LCP; dar alta prioridade a muitas imagens concorre pela rede.
4. Para imagens abaixo da dobra, use loading="lazy" quando fizer sentido e não as marque com prioridade alta.
5. Use preload somente se o recurso crítico não for descoberto cedo pelo HTML — por exemplo, uma imagem de fundo CSS ou injetada por script. Uma <img> no HTML inicial normalmente já é descoberta pelo navegador; preload redundante pode duplicar downloads ou baixar variante errada.

Exemplo responsivo para conteúdo em HTML:

<img
  src="/media/capa-960.webp"
  srcset="/media/capa-480.webp 480w,
          /media/capa-960.webp 960w,
          /media/capa-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="960" height="640"
  fetchpriority="high"
  alt="Descrição objetiva da imagem">

Se a imagem responsiva não estiver acessível no HTML inicial e o teste confirmar atraso de descoberta, um preload pode reproduzir os mesmos imagesrcset/imagesizes:

<link rel="preload" as="image"
      imagesrcset="/media/capa-480.webp 480w, /media/capa-960.webp 960w"
      imagesizes="100vw" fetchpriority="high">

Não pre-carregue simultaneamente várias variantes/formatos. Depois da alteração, repita a mesma rota, viewport e perfil de rede; compare elemento LCP, horário de início/download e bytes transferidos. Valide também visualmente o recorte, nitidez, texto alternativo e layout em celular.

Leia Otimizar LCP — web.dev, preload de imagens responsivas e imagens responsivas. Os tempos de laboratório variam com rede/dispositivo; confirme dados de campo após publicação. Veja também desempenho.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.