Imágenes Responsivas: srcset, sizes y Art Direction

Por qué importan las imágenes responsivas

Diferentes dispositivos (móvil, tablet, escritorio) tienen diferentes tamaños de pantalla y resoluciones. Un solo tamaño de imagen no es óptimo para todos los dispositivos.

Las imágenes grandes desperdician ancho de banda en móvil. Las imágenes pequeñas se ven pixeladas en escritorio. Las imágenes responsivas sirven el tamaño correcto para cada dispositivo.

Core Web Vitals: Las imágenes responsivas mejoran las métricas LCP (Largest Contentful Paint) y CLS (Cumulative Layout Shift).

Atributo srcset

srcset proporciona al navegador opciones de imagen en diferentes resoluciones. El navegador selecciona la imagen más apropiada según el DPR (Device Pixel Ratio) y el tamaño del viewport del dispositivo.

Descriptor de ancho: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. La unidad w especifica el ancho natural de la imagen.

Descriptor de densidad: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. La unidad x especifica la densidad de píxeles del dispositivo.

Selección del navegador: El navegador selecciona la imagen más apropiada según el tamaño del viewport, DPR y condiciones de red. Esta selección es automática y optimizada.

Atributo sizes

sizes especifica el tamaño que la imagen ocupará en el viewport. El navegador usa sizes junto con srcset para seleccionar la imagen más apropiada.

Ejemplo: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Condiciones de media: (max-width: 600px) 100vw → En pantallas menores de 600px, la imagen ocupa el 100% del ancho del viewport.

Fallback: El último valor (33vw) es el tamaño por defecto. Este valor se usa cuando ninguna condición de media coincide.

vw (viewport width): 100vw = ancho del viewport. 50vw = la mitad del ancho del viewport.

Art Direction

Art direction sirve diferentes composiciones de imagen (crop, zoom) en diferentes tamaños de pantalla. Se hace con el elemento <picture>.

Ejemplo: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Casos de uso: Diferentes crops para imágenes hero. Imagen vertical en móvil, horizontal en escritorio. Diferentes versiones para logos e iconos.

Selección de formato: Con <picture> también se pueden servir diferentes formatos: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading y Async Decoding

loading="lazy": Carga la imagen solo cuando se acerca al viewport. Aumenta la velocidad de carga de la página y ahorra ancho de banda.

decoding="async": Separa el proceso de decodificación de la imagen del hilo principal. No bloquea el renderizado de la página.

fetchpriority="high": Alta prioridad para la imagen LCP. El navegador carga esta imagen antes.

Placeholder: Muestre un placeholder de baja resolución con la técnica blur-up. Se muestra un placeholder borroso mientras la imagen carga.

Consejos de Rendimiento

Formatos de imagen: Use WebP o AVIF. 25-50% más pequeño que JPEG. Sirva JPEG/PNG como fallback.

Compresión: Comprima las imágenes. Use TinyPNG, Squoosh o ImageOptim. Quality 80-85 suele ser suficiente.

Dimensiones: Agregue atributos width y height a las imágenes. Previene CLS (Cumulative Layout Shift).

CDN: Sirva las imágenes desde CDN. Los CDN de imágenes como Cloudinary, Imgix realizan resize y conversión de formato automáticamente.

Prueba de imágenes responsivas: Verifique qué imagen se carga en la pestaña Network de Chrome DevTools. Pruebe en diferentes viewports.