Imagens responsivas na era do DPR & uso de image-set 2025

“Nítido sem desperdiçar” = srcset/sizes + image-set() bem aplicados.

TL;DR

• Largura fixa → notação x (1x/2x). Largura variável → notação w + sizes
• Backgrounds de texto/hero → image-set() para trocar por DPR
• Limite de bitrate; evite overfetch mesmo em alta densidade
• Candidata a LCP → fetchpriority="high"

Links internos: Entrega de imagens focada em INP 2025 — Proteger a performance percebida com coordenação de decode/priority/scripts, Prioridade de Imagem e Preload em 2025

Tabela rápida

• Cartões/componentes fixos: srcset="... 1x, ... 2x"
• Hero/largura variável: srcset="... 800w, ... 1200w" + sizes
• CSS background: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

Exemplos

<img
  src="/imgs/card@1x.avif"
  srcset="/imgs/card@1x.avif 1x, /imgs/card@2x.avif 2x"
  width="320" height="200" alt="Cartão"
  decoding="async" loading="lazy"
/>

<!-- Largura variável: w+sizes -->
<img
  src="/imgs/hero-1200.avif"
  srcset="/imgs/hero-800.avif 800w, /imgs/hero-1200.avif 1200w, /imgs/hero-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high"
  alt="Hero"
/>

.hero {
  background-image: image-set(
    url('/imgs/cover@1x.avif') 1x,
    url('/imgs/cover@2x.avif') 2x
  );
  background-size: cover;
}

Pontos de falha comuns

• sizes sempre 100vw → imagem maior que o necessário; dados desperdiçados
• Bitrate do 2x igual ao 1x → arquivo infla; gerencie qualidade com PSNR/SSIM
• CSS background sem 1x/2x → texto embaçado/pesado

Operação

• Automatize variantes @1x/@2x e w via CI
• Padronize image-set() como template reutilizável
• Ajuste LCP separadamente (prioridade/preload)

Checklist

• [ ] Fixo = x, Variável = w+sizes
• [ ] image-set() para tratar DPR em CSS
• [ ] LCP com fetchpriority
• [ ] Medir bytes e nitidez percebida

Resumo

Nitidez real sem desperdício = srcset/sizes corretos + image-set().