Imágenes responsivas en la era de alto DPR y CSS image-set 2025

Belleza vs bytes: el punto óptimo lo determinan srcset/sizes y image-set() en CSS.

TL;DR

• Elementos de ancho fijo: notación x (1x/2x); layouts fluidos: notación w + sizes

• Fondos detrás de texto: cambia por DPR con image-set() de CSS

• Limita la resolución del bitmap para evitar sobre‑transferencia incluso en pantallas de alta densidad

• Ajusta por separado las candidatas a LCP con fetchpriority="high"

• Enlaces internos: Generador de Srcset, Entrega enfocada en INP, Prioridad y preload de imágenes

Tabla rápida de uso

• Tarjetas/miniaturas fijas: srcset="… 1x, … 2x"
• Hero/layout fluido: srcset="… 800w, … 1200w" + sizes
• Fondo CSS: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

Ejemplos

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

<!-- Layout fluido: 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;
}

Errores frecuentes

• Usar siempre sizes: 100vw → selecciona imágenes más grandes de lo necesario y desperdicia ancho de banda
• Mantener el bitrate 2x igual al 1x → duplica tamaño; controla calidad con PSNR/SSIM
• Sin 1x/2x en fondos CSS → texto borroso o payload pesado

Consejos operativos

• Genera @1x/@2x y escalones w en CI
• Centraliza definiciones image-set() como variables de tema
• Sintoniza por separado las candidatas a LCP (prioridad/preload)

Lista de verificación

• [ ] Regla: x para fijo, w+sizes para fluido
• [ ] Usa image-set() para alta densidad (DPR)
• [ ] Define fetchpriority para candidatas a LCP
• [ ] Supervisa transferencia desperdiciada y desenfoque a la vez

Resumen

Para satisfacer “apariencia” y “bytes” a la vez, ten srcset/sizes/image-set() en tu caja de herramientas.