Imágenes responsivas: srcset, sizes y picture

Sirve la imagen adecuada a la pantalla adecuada con srcset y sizes, reserva picture para la dirección de arte y domina el lazy loading.

9 min · 3 preguntas

Las imágenes suelen representar la mitad del peso de una página: son tu primera palanca de rendimiento. El mecanismo central es srcset con descriptores w, que declara los anchos reales de los archivos disponibles, junto con sizes, que anuncia el ancho de visualización previsto. Punto clave: el navegador elige la imagen mediante su preload scanner, antes incluso de haber calculado el diseño CSS. Sin sizes, asume 100vw y a menudo descarga mucho más de lo necesario. La elección final también tiene en cuenta la densidad de la pantalla: una pantalla 2x sobre un área de 400 px descargará un archivo de unos 800 px.

<img src="harbor-800.jpg"
     srcset="harbor-400.jpg 400w,
             harbor-800.jpg 800w,
             harbor-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Old harbor at sunset"
     width="800" height="533">

Con srcset/sizes, el navegador mantiene el control: puede servir una variante más ligera según la densidad o las preferencias de ahorro de datos. <picture> invierte la lógica: tú impones la fuente mediante <source media> o <source type>. Resérvalo para dos casos: la dirección de arte (un recorte distinto en el móvil, no solo un tamaño) y la negociación de formato (AVIF o WebP con un respaldo en JPEG). Para un simple cambio de tamaño, picture es una complejidad innecesaria.

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-square.jpg">
  <source type="image/avif"
          srcset="hero-wide.avif">
  <img src="hero-wide.jpg" alt="Museum facade"
       width="1200" height="600">
</picture>

Para todo lo demás en la página, loading="lazy" aplaza la descarga hasta que la imagen se acerca al viewport, de forma nativa y sin JavaScript. Combínalo con decoding="async" para que la decodificación no bloquee el renderizado y, sobre todo, con width y height: el navegador deduce la proporción y reserva el espacio, lo que elimina los saltos de diseño (CLS). Para la imagen crítica, haz lo contrario del lazy: fetchpriority="high".

<img src="gallery-01.jpg"
     alt="Exhibition hall"
     loading="lazy" decoding="async"
     width="800" height="600">

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Para qué sirve exactamente el atributo sizes?
   • Para redimensionar la imagen del lado de CSS
   • Para anunciar el ancho de visualización previsto y que el navegador pueda elegir dentro de srcset
   • Para limitar el peso máximo del archivo descargado
2. ¿En qué caso es necesario <picture> en lugar de un simple srcset?
   • Para servir la misma imagen a varios anchos
   • Para un recorte distinto por pantalla o un formato moderno con respaldo
   • Para activar el lazy loading nativo
3. ¿Cuál es el efecto de loading="lazy" en tu imagen hero visible al cargar?
   • Ninguno, el atributo se ignora por encima del pliegue
   • Retrasa su carga y perjudica el LCP
   • Mejora el LCP al priorizar la imagen