Cómo funciona la transformación de imágenes por URL
La mayoría de los sistemas de dynamic media ponen las instrucciones en la URL de la imagen. Una solicitud tiene tres partes:
| Parte | Ejemplo | Función |
|---|---|---|
| El recurso | un ID o una ruta | Desde qué archivo maestro se parte |
| Las opciones | w=800,f=webp |
Ancho, alto, formato, calidad, modo de recorte |
| Una firma o token | un hash al final de la URL | Demuestra que la URL la emitió el sistema y que no se ha modificado |
El servidor comprueba la firma, elige la versión almacenada más cercana de la imagen, la redimensiona y la codifica, y la devuelve con cabeceras de caché. Un CDN situado delante del servidor guarda el resultado, de modo que el siguiente visitante recibe la copia en caché sin ningún procesamiento.
Las firmas también protegen al servidor: sin ellas, cualquiera puede pedir miles de variantes (cada ancho de 1 a 5000 píxeles, en cada formato), llenando la caché y consumiendo tiempo de procesador. Por la misma razón, muchos sistemas también redondean los anchos a un conjunto fijo de tamaños.
Negociación de formato e imágenes adaptables
Dos técnicas permiten que una misma imagen sirva para todos los dispositivos:
- Negociación de formato. Los navegadores envían una cabecera
Acceptcon los formatos de imagen que admiten. El servidor devuelve AVIF a los navegadores que lo aceptan, WebP a los que aceptan WebP y JPEG al resto, desde la misma URL. La respuesta incluyeVary: Acceptpara que las cachés guarden una copia por formato. Los archivos AVIF y WebP suelen pesar mucho menos que un JPEG con una calidad visual similar. - Imágenes adaptables. Los atributos HTML
srcsetysizesenumeran varios anchos de la misma imagen, y el navegador descarga el que se ajusta al tamaño de la pantalla y a la densidad de píxeles. Dynamic media proporciona esos anchos sin que nadie tenga que exportarlos.
<img src="…/w=1024/…" srcset="…/w=512/… 512w, …/w=1024/… 1024w, …/w=2048/… 2048w"
sizes="(max-width: 600px) 100vw, 50vw" alt="Ceramic vase, 23 cm">
Dynamic media en el trabajo de marketing
- Sitios web y tiendas en línea. El equipo web enlaza las imágenes de producto desde la biblioteca en lugar de subir copias al CMS. Un packshot retocado reemplaza al anterior en todos los lugares donde está enlazado.
- Sitios de distribuidores y socios. Los socios incrustan las imágenes aprobadas mediante un enlace, de modo que una imagen retirada por motivos legales también desaparece de sus páginas.
- Correo electrónico y páginas de destino. El equipo de campañas elige el ancho para cada plantilla; nadie conserva una carpeta de archivos «hero_600px_final».
- Velocidad de página. Un TIFF de 40 MB nunca llega a un navegador; un AVIF de 120 KB con el tamaño mostrado, sí.
Exportaciones estáticas frente a dynamic media
| Archivos exportados | Dynamic media | |
|---|---|---|
| Tamaños | Hechos a mano para cada uso | Generados bajo demanda |
| Copias | Una por CMS, sitio y canal | Un archivo maestro, muchas URL |
| Actualizaciones | Volver a exportar y a importar en todas partes | Reemplazar el archivo maestro una sola vez |
| Retirada | Encontrar y eliminar cada copia | Revocar el enlace o la publicación |
| Derechos | Desconocidos una vez descargado el archivo | Se pueden comprobar en cada solicitud |
Errores frecuentes:
- Publicar el archivo original en lugar de una versión con el tamaño adecuado.
- Dejar que los enlaces públicos de larga duración sobrevivan a la licencia de la imagen. Consulta los derechos de uso.
- Usar un ancho distinto para cada página, de modo que el CDN almacena en caché decenas de variantes casi idénticas.
- Tratar un recorte por URL como dirección de arte: un recorte por URL no sabe dónde está el motivo principal. Consulta el recorte inteligente.
Dynamic media en Freedam
- Freedam guarda cada imagen como versiones derivadas (renditions) con anchos fijos de 128 a 5120 píxeles, y sirve versiones redimensionadas a partir de ellas mediante una única ruta de URL de imagen. Las imágenes nunca se amplían más allá de su tamaño real.
- En la aplicación y a través de la API, las URL de imagen aceptan un ancho y un alto, una calidad, una relación de píxeles del dispositivo, un modo de ajuste (contain, cover o fill) y un formato: JPEG, PNG, WebP o AVIF. Sin formato, decide la cabecera
Acceptdel navegador: AVIF, después WebP y después JPEG. Las URL que devuelve la API están firmadas, caducan al cabo de una o dos horas y vuelven a comprobar en cada solicitud el acceso del usuario, sus derechos de descarga y la marca de agua. Consulta las transformaciones de imagen. - Los canales de publicación dan a los sitios web y a los CMS enlaces de imagen que no caducan. Un administrador define condiciones, como un estado Aprobado o la pertenencia a una colección, un uso y un territorio, un tamaño máximo y una marca de agua opcional. Las personas copian los enlaces desde la pestaña Publicación y usos del recurso. Consulta publicación.
- Los enlaces publicados admiten un ancho y un formato. Si el ancho está entre dos tamaños almacenados, se sirve el tamaño inmediatamente superior, de modo que un CDN guarda una copia por tamaño y formato. Las respuestas pueden almacenarse en caché durante cinco minutos y cargarse desde cualquier sitio web.
- La política de derechos de la imagen se comprueba en cada solicitud. Cuando una imagen deja de cumplir las condiciones del canal, sus derechos caducan o el canal se desactiva, el enlace deja de servirla. Sustituir enlaces invalida de una vez todos los enlaces de un canal.
- El archivo original nunca se publica. Los videos se comparten mediante códigos de inserción.
Preguntas frecuentes
¿Qué es un CDN de imágenes?
Un CDN de imágenes es una red de entrega de contenido que además transforma imágenes: las redimensiona, convierte y comprime bajo demanda según la URL y después guarda en caché cada versión en servidores cercanos al visitante.
¿Dynamic media es lo mismo que un DAM?
No. Un DAM almacena, describe y gobierna los archivos maestros. Dynamic media es una forma de entregarlos. Algunos DAM la incluyen; en otro caso, el DAM alimenta un servidor de imágenes o un CDN independiente.
¿La transformación de imágenes reduce la calidad?
Cada solicitud se codifica a partir de una versión almacenada de alta calidad, no de una transformación anterior, así que la calidad depende del ajuste de calidad y del formato elegidos. Ampliar una imagen más allá de su tamaño real sí reduce la calidad, por lo que muchos sistemas se niegan a ampliarla.
Términos relacionados
Publica una imagen en un sitio web mediante un enlace
Abre una imagen aprobada en la biblioteca de demostración de Nordi, ve a su pestaña Publicación y usos y copia un enlace con el ancho que necesites. El mismo enlace sirve AVIF, WebP o JPEG según el navegador.
Entras en el espacio de trabajo de Nordi como administrador.