¿Qué son las imágenes adaptativas?

Las imágenes adaptativas son variantes de un activo seleccionadas o generadas según el tamaño de pantalla, la densidad de píxeles, la compatibilidad con formatos o las condiciones de red de quien las ve. Cada variante representa la misma fuente con un perfil de entrega adecuado.

La entrega de imágenes adaptativas conserva una única fuente y ofrece varias variantes que difieren en ancho en píxeles, densidad de píxeles, recorte o formato de encoding. El estándar HTML aborda esta técnica bajo el encabezado «Imágenes adaptativas»; MDN la denomina imágenes responsivas. La variante puede elegirse en dos lugares. En el marcado, srcset y sizes enumeran las opciones y el navegador elige una, mientras que picture con elementos source añade reglas de dirección artística (media) y de formato (type). En el servidor, una sola URL devuelve bytes diferentes según los encabezados de la solicitud, como Accept, o las indicaciones del cliente. La selección mediante marcado solo necesita una URL distinta por variante. La selección del lado del servidor mantiene el HTML breve, pero la obtención de resultados correctos depende de cómo se informe a las cachés sobre los encabezados que varían.

¿Por qué una imagen pequeña en la página sigue descargando el archivo más grande? El navegador empieza a obtener las imágenes antes de haber aplicado el CSS de la página, por lo que el ancho que ocuparán en el diseño debe declararse en HTML. Con descriptores w, el estándar HTML exige un atributo sizes; si falta o no puede interpretarse, se asume un ancho de 100vw, como si la imagen ocupara toda el área visible. Cada valor w también debe coincidir con el ancho real del archivo en píxeles. En las imágenes con loading="lazy", sizes="auto" permite al navegador usar el ancho de representación, seguido de una lista de alternativas para los navegadores que no admiten esa palabra clave. Solo los elementos source que preceden a un img de este tipo pueden omitir sizes, lo que el estándar considera equivalente a auto.
¿Puedo predecir exactamente qué opción carga un navegador? No solo a partir de srcset. El estándar permite que el navegador elija «de una manera definida por la implementación» y tenga en cuenta la densidad de píxeles, el nivel de zoom y, posiblemente, las condiciones de red, por lo que dos navegadores pueden cargar archivos diferentes a partir del mismo marcado. En cambio, la elección entre elementos source se basa en reglas: el navegador los evalúa en orden y usa el primero cuya consulta media coincida y cuyo type admita, considerando que un atributo ausente cumple la condición. Reserva media para la dirección artística, cuando deba mostrarse un recorte diferente, y deja que el navegador decida entre resoluciones.
¿Cómo ofrezco AVIF o WebP con una alternativa de respaldo? Coloca un source por formato dentro de picture, cada uno con un atributo type como type="image/webp", seguido de un img en un formato ampliamente compatible. El navegador omite cualquier source cuyo tipo no admita. No omitas type: sin él, el estándar HTML indica que el navegador no pasará a otro source después de obtener una imagen en un formato que no admite. Cuando también se selecciona un recorte con media, proporciona un source para ese recorte también en el formato de respaldo y coloca sus fuentes antes de las que se aplican de forma más general; de lo contrario, un navegador que no pueda decodificar el formato más reciente terminará usando un recorte diferente.
¿Qué cambia cuando el servidor elige la variante? Las cachés deben saber de qué encabezados de la solicitud dependió la elección. Una respuesta seleccionada mediante Accept o una indicación del cliente debería incluir ese encabezado en Vary; de lo contrario, una caché podría reutilizar una variante para una solicitud que necesitaba otra. Las indicaciones como Sec-CH-Width solo se envían después de que el servidor las solicite mediante Accept-CH, y MDN marca Sec-CH-Width como experimental, así que revisa la compatibilidad de los navegadores y conserva una opción predeterminada razonable para las solicitudes que no incluyan indicaciones.

Entrega variantes más pequeñas a las pantallas estrechas y conserva versiones con mayor densidad de píxeles para las pantallas de alta densidad. Las reglas de dimensionamiento incorrectas pueden desperdiciar ancho de banda o hacer que una imagen se vea poco nítida en sus dimensiones de representación.

Smart CDN de Transloadit puede crear las variantes bajo demanda. Una URL tlcdn.com identifica tu Workspace, un Template y el archivo de origen, y los parámetros de URL, como un ancho, completan variables del Template que configuran Robots como /image/resize. Una solicitud sin coincidencia en la caché ejecuta el Template; las solicitudes con coincidencia en la caché reutilizan el resultado almacenado. La elección de qué URL carga un visitante sigue estando en tu marcado: las páginas enlazadas aquí describen variantes identificadas mediante parámetros de URL y no describen la selección a partir de encabezados de solicitud como Accept, así que enumera las URL de las variantes en srcset o picture.

Cada solicitud sin coincidencia en la caché importa y transforma el archivo y cuenta para el consumo: la primera solicitud de cada nueva combinación de parámetros y cualquier solicitud posterior realizada cuando la copia en caché ya no está disponible, lo que depende de tu configuración de caché. Las coincidencias en la caché no vuelven a transformarse. Limita las variables que acepta un Template y firma las URL de Smart CDN para que los visitantes no puedan solicitar variantes arbitrarias. Cuando todos los tamaños se conocen antes de la publicación, ejecutar una Assembly una sola vez y entregar sus salidas almacenadas evita la transformación bajo demanda.

Explora las capacidades de Transloadit para imágenes

¿Qué son las imágenes adaptativas?

Cómo funcionan las imágenes adaptativas

Datos clave

Cuándo son importantes las imágenes adaptativas

Cómo ayuda Transloadit con las imágenes adaptativas

Fuentes

Convierte tus conocimientos sobre multimedia en un pipeline funcional