Imágenes responsivas con srcset y picture

Trabajar con imágenes responsivas en HTML te permite servir la versión correcta de cada imagen según el dispositivo, mejorando velocidad de carga y experiencia de usuario. Aprenderás a usar srcset, sizes, la etiqueta picture y atributos como loading y decoding para optimizar el rendimiento de tu sitio.

¿Por qué usar imágenes responsivas en tu proyecto web?

La mayoría del peso de una página web viene de las imágenes. Si cargas la misma foto gigante en un teléfono que en un monitor de escritorio, estás desperdiciando datos y tiempo. Y aquí viene lo interesante: el navegador puede decidir por ti cuál versión servir, siempre que le des las reglas correctas.

Usar imágenes optimizadas con distintos tamaños mejora dos cosas: la velocidad de carga y la accesibilidad. El atributo alt sigue siendo clave para describir la imagen cuando no carga y para que lectores de pantalla la interpreten [01:30].

¿Qué significa que una imagen sea responsiva? Significa que el navegador carga una versión distinta de la misma imagen según el ancho de pantalla del dispositivo. Así, un móvil recibe una imagen ligera y una laptop una más pesada y nítida.

¿Cómo funciona el atributo srcset para servir distintas imágenes?

El atributo srcset te permite listar varias versiones de una imagen junto con el ancho en píxeles de cada una. El navegador elige cuál descargar según el width de la pantalla.

Un ejemplo práctico con tres versiones de un hero [05:00]:

html <img src="img/hero-400.jpg" srcset="img/hero-400.jpg 400w, img/hero-800.jpg 800w, img/hero-1200.jpg 1200w" alt="vista panorámica">

La imagen por default es la de 400 píxeles, pensada para móviles. A medida que el navegador detecta más ancho disponible, sube a la versión de 800 o 1200. Lo importante es que la decisión la toma el navegador, no tú. Si abres DevTools en la pestaña Network puedes ver cómo se hacen nuevas peticiones cuando crece el viewport.

¿Para qué sirve el atributo sizes?

El atributo sizes complementa al srcset indicándole al navegador cuánto espacio ocupará la imagen en pantalla. Esto le ayuda a elegir mejor el archivo a descargar.

html sizes="(max-width: 600px) 100vw, 50vw"

Esa regla dice: si la pantalla mide 600 píxeles o menos, la imagen ocupa el 100% del viewport width; si es más grande, ocupa solo el 50% [09:30].

¿Cuándo conviene usar la etiqueta picture en lugar de srcset?

La etiqueta picture te da control total sobre qué imagen se muestra en cada breakpoint. A diferencia de srcset, donde el navegador decide, con picture tú defines reglas explícitas con media queries.

La estructura usa una o varias etiquetas <source> con los atributos media y srcset, más una etiqueta <img> final como respaldo [12:00]:

html <picture> <source media="(min-width: 768px)" srcset="img/banner-desktop.jpg"> <source media="(min-width: 480px)" srcset="img/banner-tablet.jpg"> <img src="img/banner-mobile.jpg" alt="paisajes naturales"> </picture>

• La primera <source> se activa en pantallas de 768 píxeles o más, ideal para desktop y laptop.
• La segunda cubre tablets a partir de 480 píxeles.
• La etiqueta <img> final es el respaldo para móviles.

¿Cuál es la diferencia entre srcset y picture? Con srcset el navegador elige según ancho y resolución. Con picture tú defines exactamente qué archivo cargar en cada breakpoint usando media queries, útil cuando quieres incluso recortes distintos por dispositivo.

¿Cómo mejorar el rendimiento con loading y decoding?

Más allá de servir el archivo correcto, puedes controlar cuándo y cómo se descarga. Aquí entran dos atributos clave para performance: loading y decoding [16:30].

html <img src="img/producto-600.jpg" alt="producto destacado" srcset="img/producto-300.jpg 300w, img/producto-600.jpg 600w" sizes="(max-width: 600px) 100vw, 600px" loading="lazy" decoding="async" width="600" height="400">

Cada atributo cumple una función específica:

• loading="lazy": la imagen solo se descarga cuando el usuario está cerca de verla al hacer scroll. Esto evita bloqueos al inicio y mejora el rendimiento percibido.
• decoding="async": le dice al navegador que procese la imagen sin bloquear el renderizado del resto de la página, manteniendo la fluidez.
• width y height: reservar las dimensiones evita saltos de layout mientras la imagen carga.

¿Qué hace loading="lazy" en una imagen? Pospone la descarga hasta que la imagen esté cerca del viewport del usuario. Si nunca haces scroll hasta ella, nunca se descarga, y eso ahorra ancho de banda.

¿Qué pasa si combinas todas estas técnicas?

Cuando juntas srcset, sizes, loading="lazy" y decoding="async", el resultado es una imagen que:

1. Carga la versión adecuada según dispositivo.
2. Se descarga solo cuando es necesaria.
3. No bloquea el renderizado del resto de la página.
4. Mantiene reservado su espacio para evitar saltos visuales.

Esa combinación es la base del responsive design moderno aplicado a multimedia. El navegador hace el trabajo pesado, pero tú le das las reglas para que tome buenas decisiones según el contexto del usuario.

¿Ya probaste implementar srcset o picture en alguno de tus proyectos? Cuéntame en los comentarios cuál te funcionó mejor.