Imágenes responsive con srcset y sizes: guía completa

El problema que resuelven

Una misma imagen se muestra a 360 px de ancho en un móvil, a 768 px en una tableta y a 1400 px en un portátil, y además en pantallas con densidades de 1x, 2x o 3x. Si sirves un único archivo, o bien es demasiado grande para el móvil (desperdicias datos y empeoras el LCP), o bien es demasiado pequeño para el escritorio (se ve borroso).

Con srcset describes qué archivos tienes y con sizes a qué tamaño se mostrará la imagen. Con esa información, el navegador —que conoce el ancho de la ventana y la densidad de la pantalla— elige el archivo óptimo.

srcset con descriptores de ancho (w)

Es la forma más útil y la que deberías usar casi siempre:

<img
  src="foto-1280.jpg"
  srcset="foto-640.jpg 640w, foto-1280.jpg 1280w, foto-1920.jpg 1920w"
  sizes="(min-width: 1024px) 800px, 100vw"
  width="1920" height="1080"
  alt="Descripción de la foto">

Cada entrada es archivo ancho_real_en_píxeles seguido de w. El src funciona como respaldo para navegadores muy antiguos.

El atributo sizes

sizes indica el ancho en pantalla que ocupará la imagen, no el del archivo. Es una lista de condiciones de media query con un ancho, y un valor final por defecto:

sizes="(min-width: 1024px) 800px, (min-width: 640px) 50vw, 100vw"

Se lee así: en pantallas de al menos 1024 px, la imagen ocupa 800 px; entre 640 y 1023 px, la mitad de la ventana; por debajo, toda la ventana.

El navegador multiplica ese ancho por la densidad de píxeles y escoge el archivo más pequeño que lo cubra. Por ejemplo, en un móvil de 390 px de ancho a 3x necesitará unos 1170 px, así que elegirá foto-1280.jpg.

Errores típicos con sizes

Omitirlo. Si no lo pones, el navegador asume 100vw, y en escritorio descargará la imagen más grande aunque se muestre en una columna estrecha.
Poner el ancho del archivo. sizes describe el diseño, no los archivos.
No coincidir con el CSS. Si tu CSS cambia, revisa sizes. Puedes comprobarlo en DevTools: la propiedad currentSrc del elemento muestra qué archivo se eligió.

Si usas loading="lazy", los navegadores basados en Chromium ya aceptan sizes="auto" (puedes escribir sizes="auto, 100vw" como respaldo), que calcula el valor a partir del diseño real. Solo funciona en imágenes diferidas.

srcset con descriptores de densidad (x)

Para imágenes de tamaño fijo —un avatar de 64 px, un logotipo— basta con indicar densidades:

<img src="avatar-64.png" srcset="avatar-64.png 1x, avatar-128.png 2x" width="64" height="64" alt="">

No combines w y x en el mismo srcset.

Qué anchos generar

No hace falta una variante por cada dispositivo. Una regla práctica es cubrir saltos de entre un 30 % y un 50 % de peso:

Tipo de imagen	Anchos sugeridos
Hero a pantalla completa	640, 960, 1280, 1920, 2560
Imagen de artículo (columna de ~800 px)	480, 800, 1200, 1600
Tarjeta en rejilla	320, 480, 640, 960

En ImageZap, activa Variantes responsive, marca los anchos y el generador de código escribirá el srcset con los nombres reales de los archivos.

srcset dentro de picture

Si además quieres servir varios formatos, cada <source> lleva su propio srcset y sizes:

<picture>
  <source type="image/avif" srcset="foto-640.avif 640w, foto-1280.avif 1280w" sizes="(min-width: 1024px) 800px, 100vw">
  <source type="image/webp" srcset="foto-640.webp 640w, foto-1280.webp 1280w" sizes="(min-width: 1024px) 800px, 100vw">
  <img src="foto-1280.jpg" srcset="foto-640.jpg 640w, foto-1280.jpg 1280w" sizes="(min-width: 1024px) 800px, 100vw" width="1280" height="720" alt="…">
</picture>

No olvides width y height

Los atributos width y height no fijan el tamaño en pantalla (eso lo hace el CSS), pero permiten al navegador reservar el espacio con la proporción correcta antes de que llegue la imagen. Así evitas saltos de diseño (CLS). Combínalos con:

img { max-width: 100%; height: auto; }

Preguntas frecuentes

¿Por qué el navegador descarga una imagen más grande de la esperada?

Probablemente por la densidad de pantalla (un móvil a 3x necesita el triple de píxeles) o porque falta sizes. Revisa currentSrc en DevTools.

¿El navegador vuelve a descargar al redimensionar la ventana?

Puede descargar una variante mayor si la necesita, pero normalmente no baja a una menor si ya tiene una más grande en caché.

¿Necesito srcset si uso un CDN de imágenes?

Muchos CDN generan las variantes por ti, pero sigues necesitando escribir srcset y sizes (o usar un componente que lo haga) para que el navegador elija.

¿Cuántas variantes son demasiadas?

Más de 5-6 por formato rara vez aporta. Cada variante extra es más trabajo de generación y caché para un ahorro marginal.

Imágenes responsive con srcset y sizes