Imágenes Responsivas: srcset y sizes Explicados

Una foto que se muestra a 400 px en móvil no necesita tener 1600 px de ancho. Sin embargo, sin el marcado de imágenes responsivas, todos los usuarios descargan el mismo archivo grande. Los atributos srcset y sizes resuelven esto: informan al navegador qué candidatos de imagen existen y qué tan grande se mostrará cada uno, permitiéndole elegir el archivo óptimo para descargar.

El problema: una sola imagen para todas las pantallas

Sin imágenes responsivas, debes elegir: servir un archivo grande (rápido en escritorio, lento en móvil) o un archivo pequeño (rápido en móvil, borroso en escritorio Retina). Ninguna opción es óptima. El marcado de imágenes responsivas te permite servir ambos y dejar que el navegador elija.

srcset con descriptores de ancho (w)

El patrón más común. Proporciona múltiples anchos de imagen y el navegador elige según el ancho de pantalla y la densidad de píxeles:

<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  src="photo-800.webp"
  alt="Descripción"
  width="800" height="600"
>

El descriptor w es el ancho real en píxeles de ese archivo de imagen, no un breakpoint CSS. El navegador lo usa junto con el ancho de pantalla y la proporción de píxeles del dispositivo para elegir la opción más eficiente.

El atributo sizes

Sin sizes, el navegador asume que la imagen ocupa el 100 % del ancho de la ventana gráfica. Para una imagen en barra lateral que se muestra a 300 px en escritorio, esto hace que el navegador descargue un archivo mucho más grande del necesario. sizes indica al navegador qué tan ancha se mostrará la imagen en cada breakpoint:

<img
  srcset="photo-300.webp 300w,
          photo-600.webp 600w,
          photo-900.webp 900w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         300px"
  src="photo-600.webp"
  alt="Descripción"
  width="600" height="400"
>

Lee sizes de arriba a abajo: en pantallas más estrechas de 768 px, la imagen ocupa el 100 % de la ventana gráfica. En pantallas de hasta 1200 px, ocupa el 50 %. En todas las demás pantallas (más grandes), mide exactamente 300 px de ancho.

srcset con descriptores de densidad de píxeles (x)

Para imágenes de tamaño fijo (logotipos, avatares, iconos), usa descriptores de densidad de píxeles en su lugar:

<img
  srcset="logo.webp 1x, [email protected] 2x, [email protected] 3x"
  src="logo.webp"
  alt="Logotipo de la empresa"
  width="200" height="60"
>

El navegador descarga la versión 2x en pantallas Retina, 3x en pantallas de muy alta densidad y 1x en el resto.

Combinando con <picture> para negociación de formato

Combina <picture> para cambiar de formato con srcset para el dimensionado responsivo:

<picture>
  <source
    type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1200.avif 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
  >
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
  >
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Descripción"
    width="800" height="600"
    loading="lazy"
  >
</picture>

¿Qué tamaños de imagen generar?

Un conjunto inicial práctico para la mayoría de las imágenes de contenido:

• 400 px: móvil (pantallas pequeñas, 1x)
• 800 px: móvil Retina (2x), tablet pequeña
• 1200 px: escritorio, tablet Retina
• 1600 px: escritorio grande, imágenes anchas

Para imágenes hero o de ancho completo, añade una variante de 2400 px para pantallas Retina grandes.