Prioridade de Imagem e Preload em 2025

“Qual imagem o usuário vê primeiro” precisa chegar rápido e no tamanho certo — base de LCP e UX.

TL;DR

• Um único candidato LCP por página; aplique fetchpriority="high" apenas nele

• Use <link rel="preload" as="image"> quando necessário (sem exageros)

• Responsivo: alinhe imagesrcset/imagesizes ao layout e a aspect-ratio

• Não‑LCP: loading="lazy" + decoding="async" para preservar INP

• CDN: projete Vary: Accept para evitar conflitos AVIF/WebP

• Links internos: Entrega de imagens focada em INP 2025 — Proteger a performance percebida com coordenação de decode/priority/scripts, AVIF vs WebP vs JPEG XL em 2025 — Comparação prática e mensurada, Imagens responsivas na era do DPR & uso de image-set 2025

Fluxo de decisão (casos)

1. Entra no herói/primeira dobra? → Sim: candidato LCP
2. Área grande no viewport? → Sim: avalie fetchpriority="high"
3. Precisa evitar bloqueio de renderização? → Crítico: use preload
4. Tipo de imagem (arte/foto)? → Prepare imagesrcset + sizes, em sintonia com o CSS
5. Preocupação com INP? → Atrasar/baixa prioridade, adie a inicialização de JS

Trecho de implementação

<!-- Candidato LCP: combine fetchpriority e preload com parcimônia -->
<link
  rel="preload"
  as="image"
  href="/hero/landing.avif"
  imagesrcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
  type="image/avif"
>
<img
  src="/hero/landing-1200.avif"
  srcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630"
  fetchpriority="high"
  decoding="async"
  alt="Imagem principal"
  style="aspect-ratio: 1200/630; object-fit: cover"
>

Armadilhas comuns e antídotos

• Preload em tudo → efeito inverso; restrinja ao candidato LCP
• Sem sizes → imagens superdimensionadas; alinhe ao tamanho renderizado
• fetchpriority em excesso → prioridade diluída; regra de uma imagem por página
• Otimizar só no CSS → layout define tarde; reserve espaço com aspect-ratio

Entrega para INP/LCP

• LCP: fetchpriority="high" + imagesrcset/imagesizes corretos
• Não‑LCP: loading="lazy"/decoding="async"; preload perto da interação
• CDN: Vary: Accept + chave de cache adequada; confirme prioridade HTTP/2

Checklist

• [ ] Um candidato LCP; preload mínimo
• [ ] sizes fiel ao layout; srcset com degraus adequados
• [ ] aspect-ratio para CLS zero; object-fit para corte
• [ ] Medir regressão de LCP/INP após mudanças

FAQ

• Q: O que “manda” mais, fetchpriority ou preload? A: Papéis diferentes—dica de prioridade vs. obtenção antecipada. Combine só no candidato LCP.

• Q: preload quebra srcset? A: Inclua imagesrcset/imagesizes também no <link rel="preload">.

Resumo

Definir “qual imagem, quando e quão rápido” estabiliza LCP e a percepção. Comece pela identificação do candidato LCP e o trio fetchpriority/preload/sizes.