Imágenes responsivas con srcset, sizes y picture

Qué es

La guía de imágenes responsivas de MDN separa dos problemas. Cambio de resolución: la misma imagen debe entregarse como un archivo más pequeño a una pantalla pequeña o de baja densidad, y como uno más grande a una pantalla grande o de alta densidad. Dirección de arte: se desea un recorte o una composición distintos según el diseño, por ejemplo un recorte vertical ajustado en los teléfonos.

El cambio de resolución usa srcset en img. Con descriptores de ancho, cada candidata indica su ancho intrínseco (hero-800.jpg 800w, hero-1600.jpg 1600w) y sizes le indica al navegador cuánto ancho ocupará el espacio, como una lista de condiciones de medio con una longitud cada una y un valor por defecto final ((max-width: 600px) 100vw, 50vw). La guía señala que los porcentajes no están permitidos como anchos de espacio, que vw sí lo está, y que el navegador usa la primera condición que coincide e ignora el resto, por lo que el orden importa. La referencia de img añade que sizes solo tiene sentido cuando srcset usa descriptores de ancho. Para una imagen mostrada a un tamaño CSS fijo, los descriptores de densidad (icon.png 1x, icon@2x.png 2x) son más sencillos.

La dirección de arte usa <picture> con hijos <source media="…" srcset="…"> y un img de respaldo; el mismo elemento con <source type="image/avif"> proporciona el respaldo de formato, ya que el navegador omite los tipos que no puede decodificar.

Por qué importa

Las imágenes suelen ser la mayor parte de los bytes de una página, y que un teléfono descargue la imagen principal pensada para escritorio desperdicia ancho de banda y retrasa el renderizado. MDN señala que el navegador empieza a descargar las imágenes antes de que el analizador principal haya cargado el CSS y el JavaScript de la página, así que elegir a nivel de marcado permite que la descarga correcta empiece temprano.

Cómo aplicarlo

• Generar de tres a cinco anchos por imagen en el momento de la compilación y listarlos todos; dejar que el navegador elija. Nombrar los archivos por su ancho para mantener srcset legible.
• Escribir sizes a partir del diseño CSS real; un sizes incorrecto elige archivos sobredimensionados sin avisar. Conviene revisarlo cuando cambia el diseño.
• Establecer siempre los atributos width y height (o aspect-ratio en CSS) para que se reserve el espacio antes de que llegue la imagen.
• Usar loading="lazy" para las imágenes por debajo del pliegue y decoding="async" donde la imagen no se necesita para el primer renderizado; mantener eager la imagen principal por encima del pliegue.
• Mantener alt con sentido; el marcado responsivo no cambia las reglas de accesibilidad.

Trampas

srcset es una indicación: MDN afirma que el agente de usuario elige cualquiera de las fuentes disponibles a su discreción, así que un navegador puede seguir usando una candidata más grande ya en caché en lugar de obtener una más pequeña. sizes se evalúa antes de que el CSS de la imagen se haya cargado necesariamente, así que los valores deben ser autosuficientes. Mezclar descriptores de ancho y de densidad en un mismo srcset no es válido. Las imágenes de fondo en CSS necesitan image-set() o media queries en su lugar.