Imágenes responsivas con srcset y picture para mejor rendimiento

Optimiza tus páginas con imágenes responsivas que cargan rápido, mantienen la accesibilidad y mejoran la experiencia de usuario. Aquí verás cómo usar img con srcset y sizes, cuándo elegir picture y cómo sumar atributos de rendimiento como loading lazy y decoding async para un responsive design sólido.

¿Cómo usar imágenes responsivas con img y srcset?

La etiqueta img es la base para mostrar fotografías en la web. Con srcset indicas varias versiones por ancho y con sizes describes cómo se mostrará según el viewport. El navegador decide qué archivo descargar según el ancho disponible y tus reglas.

¿Qué rol cumplen src y alt en accesibilidad?

El atributo src apunta al archivo, y alt ofrece una descripción breve si no carga o para lectores de pantalla.

• Usa descripciones claras y concisas.
• Mejora la accesibilidad y la comprensión del contenido.
• Aporta contexto si la imagen falla.

¿Cómo definir srcset por ancho?

Ejemplo con variantes de un hero pensado para mobile, tablet y desktop:

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

• 400w, 800w, 1200w: anchos reales de cada archivo.
• El navegador elige la más adecuada según el ancho disponible.
• Beneficio: mejor calidad con menor peso en cada dispositivo.

¿Cómo controlar el tamaño con sizes?

Describe el espacio que ocupará la imagen según el ancho de pantalla. Ejemplo: 100 % hasta 600 px; luego 50 %.

<img
  src="img/hero-400.jpg"
  alt="Vista panorámica"
  srcset="
    img/hero-400.jpg 400w,
    img/hero-800.jpg 800w,
    img/hero-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
>

• (max-width: 600px) 100vw: ocupa todo el ancho del viewport.
• 50vw: a partir de 600 px, usa la mitad del viewport.
• Beneficio: descargas más precisas según el diseño efectivo.

¿Cuándo aplicar picture y source con media queries?

Cuando necesitas archivos distintos por dispositivo con reglas claras, usa picture con source y media. Define una imagen para desktop/laptop, otra para tablet y una por defecto para mobile dentro de img.

¿Cómo escribir reglas media para desktop y tablet?

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

• (min-width: 768px): carga la versión de desktop/laptop.
• (min-width: 480px): prioriza la versión tablet si no se cumple la primera.
• Fallback img: versión mobile por defecto.

¿Qué imagen cargar por defecto en mobile?

Dentro de picture, la etiqueta img es el fallback. Coloca ahí la versión más ligera para mobile y agrega alt descriptivo.

• En móviles, se usa la imagen por defecto.
• Al crecer el ancho, se activan los source según media.
• Beneficio: control explícito por dispositivo.

¿Qué atributos mejoran el rendimiento de imágenes?

Ajusta la descarga y el procesamiento para mejorar la velocidad y la fluidez. loading y decoding ayudan a evitar bloqueos; width y height evitan saltos de diseño.

¿Cómo funcionan loading lazy y decoding async?

<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"
>

• loading="lazy": descarga solo cuando te acercas al elemento al hacer scroll.
• decoding="async": procesa sin bloquear el renderizado, manteniendo la página fluida.
• Clave: mejora de performance y percepción de velocidad.

¿Por qué definir width y height?

Establecer dimensiones evita cambios de layout inesperados mientras las imágenes cargan.

• width y height reservan espacio exacto.
• Menos reflujo y mejor experiencia de usuario.
• Coherencia en diseños responsive.

Habilidades y conceptos que pones en práctica:

• Configurar img con src, alt, srcset y sizes.
• Usar picture y source con media para desktop, tablet y mobile.
• Aplicar loading lazy y decoding async para mejor rendimiento.
• Diseñar reglas por ancho real del dispositivo y del viewport.

¿Te gustaría ver un ejemplo con tus propias imágenes y breakpoints? Cuéntame tu caso en los comentarios y lo afinamos juntos.