Guía de implementación de imágenes responsivas - Guía completa de srcset, sizes y el elemento picture

Por qué las imágenes responsivas son indispensables

La web moderna necesita servir la misma página en dispositivos que van desde smartphones de 320px de ancho hasta monitores 4K de 3840px. Enviar una imagen de tamaño único a todos los dispositivos causa serios problemas de rendimiento o degradación de la calidad visual.

Problemas de enviar imágenes demasiado grandes a dispositivos móviles:

• Desperdicio de ancho de banda: los usuarios descargan píxeles que nunca se mostrarán a resolución completa
• Aumento del tiempo de carga: impacta directamente la métrica LCP de Core Web Vitals
• Consumo innecesario de memoria: decodificar imágenes grandes en dispositivos móviles ocupa mucha RAM
• Desperdicio de batería: decodificar y renderizar imágenes sobredimensionadas consume recursos adicionales de CPU/GPU

Problemas de enviar imágenes demasiado pequeñas a escritorio:

• Las imágenes se ven borrosas en pantallas de alta resolución
• No se aprovecha la capacidad de visualización de pantallas grandes
• Degradación de la experiencia de usuario y calidad visual

La solución de imágenes responsivas:

HTML proporciona los atributos srcset, sizes y el elemento <picture>, permitiendo que el navegador seleccione automáticamente la imagen más adecuada según las características del dispositivo. Esto logra:

• Dispositivos móviles reciben imágenes pequeñas - carga rápida
• Dispositivos de escritorio reciben imágenes grandes - visualización nítida
• Dispositivos Retina reciben imágenes de alta resolución - presentación definida

Implementar correctamente imágenes responsivas puede reducir la transferencia de imágenes en un 50-70%, manteniendo la mejor calidad visual en todos los dispositivos.

Cambio de resolución con el atributo srcset

El atributo srcset proporciona al navegador múltiples candidatos de imagen, permitiéndole seleccionar el óptimo según las condiciones del dispositivo. Esta es la técnica más básica e importante de las imágenes responsivas.

Sintaxis básica:

<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w, image-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px" alt="Imagen de ejemplo">

Descriptores de ancho (w): 400w indica que el ancho real del archivo de imagen es de 400 píxeles. El navegador combina el atributo sizes y la relación de píxeles del dispositivo (DPR) para decidir qué archivo descargar.

Lógica de selección del navegador:

1. Analiza el atributo sizes para determinar el ancho de visualización de la imagen
2. Multiplica el ancho de visualización por el DPR del dispositivo para obtener los píxeles necesarios
3. Selecciona del srcset el candidato más cercano a los píxeles necesarios

Ejemplo: En un teléfono con DPR 2x, si sizes calcula un ancho de visualización de 400px, el navegador necesita una imagen de 800px (400 × 2) y seleccionará image-800.jpg.

Descriptores de densidad de píxeles (x): Otra sintaxis es srcset="image-1x.jpg 1x, image-2x.jpg 2x", que especifica directamente la imagen correspondiente a cada DPR. Este método es más simple pero menos flexible, adecuado para imágenes de tamaño fijo (como logos).

Escribir correctamente el atributo sizes

El atributo sizes indica al navegador el ancho de visualización de la imagen en cada punto de quiebre. El navegador necesita esta información antes de descargar la imagen para tomar la decisión de selección, ya que en ese momento el diseño CSS aún no se ha completado.

Estructura de la sintaxis:

sizes="(condición de medios) ancho, (condición de medios) ancho, ancho predeterminado"

El navegador evalúa las condiciones de medios de izquierda a derecha, usando el primer valor de ancho que coincida. El último valor es el predeterminado cuando ninguna condición coincide.

Patrones comunes:

• Imagen de ancho completo: sizes="100vw" - la imagen siempre ocupa todo el ancho del viewport
• Diseño con barra lateral: sizes="(max-width: 768px) 100vw, 66vw" - ancho completo en móvil, 2/3 en escritorio
• Diseño en cuadrícula: sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" - 1 columna en móvil, 2 en tablet, 3 en escritorio
• Ancho máximo fijo: sizes="(max-width: 800px) 100vw, 800px" - ancho completo en pantallas pequeñas, fijo a 800px en grandes

Errores comunes:

• Omitir el atributo sizes: el navegador asume 100vw por defecto, pudiendo descargar imágenes demasiado grandes
• sizes no coincide con el diseño CSS real: el navegador selecciona el tamaño de imagen incorrecto
• Olvidar considerar padding y márgenes: use calc() para calcular con precisión: sizes="calc(100vw - 2rem)"

Método de verificación:

En Chrome DevTools, al pasar el cursor sobre un elemento <img> se puede ver qué candidato srcset seleccionó realmente el navegador. Si la imagen seleccionada es mucho mayor que el tamaño de visualización, la configuración de sizes es incorrecta.

Dirección artística con el elemento picture

El elemento <picture> permite la "dirección artística" que srcset no puede lograr por sí solo. La dirección artística significa proporcionar imágenes con diferente composición o recorte según las características del dispositivo, no solo diferentes tamaños.

Casos de uso típicos:

• Imagen de banner: escritorio muestra panorámica amplia, móvil muestra recorte vertical del área central
• Imagen de producto: pantalla grande muestra vista completa del producto, pantalla pequeña muestra primer plano
• Infografía: pantalla grande muestra gráfico completo, pantalla pequeña muestra versión simplificada

Sintaxis básica:

<picture>
<source media="(max-width: 600px)" srcset="hero-mobile.jpg">
<source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
<img src="hero-desktop.jpg" alt="Banner principal">
</picture>

Negociación de formato:

<picture> también puede usarse para proporcionar imágenes en diferentes formatos, permitiendo al navegador elegir el formato óptimo soportado:

<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="Descripción">
</picture>

El navegador evalúa los elementos <source> de arriba a abajo, usando el primer formato soportado. Los navegadores antiguos que no soportan <picture> recurren a la etiqueta <img>.

Mejores prácticas de implementación y optimización del rendimiento

A continuación se presentan las mejores prácticas concretas para implementar imágenes responsivas. Primero, 3-5 puntos de quiebre de imagen (variantes de tamaño) suelen ser suficientes para cubrir la mayoría de los escenarios, sin necesidad de generar imágenes para cada ancho posible.

Estrategia de puntos de quiebre recomendada:

• 400px - Dispositivos móviles pequeños (1x)
• 800px - Dispositivos móviles (2x) o tablets pequeñas
• 1200px - Tablets o escritorios pequeños
• 1600px - Escritorio estándar
• 2000px - Pantallas grandes o escritorio Retina

Carga diferida (Lazy Loading):

Use loading="lazy" para imágenes debajo del pliegue. Esto hace que el navegador solo comience a descargar cuando la imagen se acerca al viewport, reduciendo significativamente los datos de carga inicial. Pero las imágenes del primer pliegue (especialmente el elemento LCP) no deben usar carga diferida.

Preservación de la relación de aspecto:

Siempre establezca los atributos width y height en la etiqueta <img>. Esto permite al navegador calcular la relación de aspecto correcta antes de que la imagen se cargue, previniendo el desplazamiento de diseño (CLS). Combine con CSS aspect-ratio o height: auto.

Atributo fetchpriority:

Use fetchpriority="high" para imágenes LCP para indicar al navegador que las descargue con prioridad. Use fetchpriority="low" para imágenes no críticas para reducir su prioridad.

Precarga de imágenes críticas:

Use <link rel="preload" as="image" imagesrcset="..." imagesizes="..."> en el <head> para precargar imágenes LCP, haciendo que el navegador comience la descarga lo antes posible.

レスポンシブデザインの実践書も Amazon で入手できます

Generación automatizada en el pipeline de construcción

Generar manualmente múltiples tamaños para imágenes responsivas es impráctico. Construir un sistema automatizado en el pipeline de construcción es la solución sostenible.

Procesamiento por lotes con Sharp (Node.js):

Sharp es la biblioteca de procesamiento de imágenes más rápida del ecosistema Node.js, adecuada para generar múltiples tamaños en lote durante la construcción:

const sharp = require('sharp');
const sizes = [400, 800, 1200, 1600, 2000];
for (const width of sizes) {
await sharp('input.jpg')
.resize(width)
.jpeg({ quality: 80, progressive: true })
.toFile(`output-${width}.jpg`);
}

Salida multiformato:

Genere simultáneamente formatos AVIF, WebP y JPEG para usar con el elemento <picture>:

await sharp('input.jpg').resize(800).avif({ quality: 50 }).toFile('output-800.avif');
await sharp('input.jpg').resize(800).webp({ quality: 75 }).toFile('output-800.webp');
await sharp('input.jpg').resize(800).jpeg({ quality: 80 }).toFile('output-800.jpg');

Transformación de imágenes a nivel de CDN:

Servicios CDN como Cloudflare Images, Imgix y Cloudinary pueden ajustar dinámicamente el tamaño y formato de las imágenes en el momento de la solicitud. Especificando el ancho y formato deseados mediante parámetros de URL, no es necesario pregenerar todas las variantes. Esto simplifica el proceso de construcción pero añade costos en tiempo de ejecución.

Componente Image de Next.js:

El componente <Image> de Next.js maneja automáticamente la generación y optimización de imágenes responsivas. Genera múltiples tamaños en tiempo de construcción o solicitud, añade automáticamente srcset y sizes, y soporta carga diferida y marcadores de posición borrosos.