Resumen
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.