Diseño de imágenes responsivas 2025 — Guía práctica de srcset/sizes

Publicado: 18 sept 2025 · Tiempo de lectura: 4 min · Por el equipo editorial de Unified Image Tools

translated: true Introducción

Las imágenes responsivas no van de “poner varias medidas y ya”, sino de alinear sizes con el layout para dar al navegador pistas correctas en su algoritmo de selección. Esta es una guía práctica orientada a operación.

Decide primero sizes (el núcleo)

El atributo sizes declara “en esta condición, el ancho de presentación es X”. Si esto es correcto, el navegador elegirá el candidato óptimo del srcset.

// Layout de artículo de una sola columna (máximo 768px)
// ≤768px usa 100vw; por encima, 768px fijo
sizes="(max-width: 768px) 100vw, 768px"

// Tarjetas 2→3 columnas (efectivo aprox. 46vw/31vw con gaps)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

Los anchos representativos con pasos de 1,5–2× son manejables. Ej.: 480/720/960/1280/1536.

Un build que respalde srcset

Automatiza la generación de srcset y elimina errores humanos. Ejemplo con Sharp:

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Con Next.js Image, basta con escribir sizes correctamente; el resto se resuelve automáticamente. Detalles: Arquitectura de redimensionamiento en 2025 — Reducir un 30–70% el desperdicio partiendo del layout.

LCP y precarga

Para candidatos a LCP como la imagen hero, además de un sizes correcto considera:

• priority / fetchPriority="high"
• Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• Evitar sobre-resolución (respeta la regla ancho-límite × DPR)

La compresión base y sus criterios: Estrategia Definitiva de Compresión de Imágenes 2025 – Guía práctica para optimizar velocidad preservando la calidad.

Dirección de arte con picture

Si quieres variar aspecto o encuadre por tamaño, usa picture:

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
</picture>

Nota: incluso con picture, la filosofía de sizes no cambia. Declara el ancho de presentación (px o vw) por condición de media.

Iconos y SVG

• Para logotipos/íconos simples, prioriza SVG. Permite color en CSS y ajustes por media queries.
• Si necesitas PNG, define 1x/2x y separa el srcset para tamaños pequeños, mejorando la eficiencia de entrega.

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

Para iconos y manifiestos PWA, consulta Paquete de Favicon + Manifest y Generador de favicon.

Errores frecuentes

• Usar 100vw fijo en sizes → en una grilla de tarjetas real (p. ej., 33vw) sobrecargas la descarga.
• No seguir cambios de breakpoints y número de columnas → tras un rediseño, de repente pesa más.
• Exceso de anchos representativos → empeora la eficiencia de caché y diluye el beneficio.

Checklist (operación)

• [ ] ¿Definiste el ancho máximo y la DPR por plantilla?
• [ ] ¿sizes coincide con el layout (medido en Storybook/navegador)?
• [ ] ¿Aplicaste priority u otros ajustes al LCP?
• [ ] ¿3–5 anchos representativos son suficientes?
• [ ] ¿De verdad necesitas picture (antes intenta resolver con sizes)?

Para cerrar: la optimización global del diseño de resize está en Arquitectura de redimensionamiento en 2025 — Reducir un 30–70% el desperdicio partiendo del layout; la selección de formatos en Estrategias de conversión de formatos 2025 — Guía para usar WebP/AVIF/JPEG/PNG.

Diagnóstico y debugging

• En Network (DevTools), verifica dimensiones/transferencia reales (¿coincide con lo esperado?).
• En Elements, revisa computed size y currentSrc del img (¿sizes hace efecto?).
• Cambia la DPR en móvil/desktop y revalida (detecta sobre-descarga en 2x/3x).
• Identifica el LCP en Performance y perfila el efecto del preload.

Patrones aplicados (componentes)

• Recibir el número de columnas por props y generar sizes automáticamente.
• picture + media para dirección de arte, sincronizado con los breakpoints CSS en un solo lugar.
• Combina loading="lazy" con timing óptimo de intersección del viewport para mantener CLS en 0.

Manos a la obra: inventario de una página existente

1. Extrae anchos máximos (cuerpo, sidebar, grillas de tarjetas).
2. Define por imagen el límite de píxeles y 3–5 anchos representativos.
3. Prioriza implementar los candidatos a LCP (con preload/priority).
4. Mide transferencia y LCP, y ajusta las condiciones de sizes.

FAQ

• P. ¿Qué tan detallado debe ser sizes?
  • R. Limítalo a los umbrales donde cambia el ancho real (breakpoints). 2–4 condiciones suele ser mantenible.
• P. ¿Qué priorizo: picture o sizes?
  • R. Primero intenta resolver con sizes. Usa picture solo si necesitas dirección de arte.
• P. ¿Qué requiere <Image> de Next.js?
  • R. Declarar sizes correctamente y, si hace falta, priority/fetchPriority. srcset se genera automáticamente.