Es posible que ya estés familiarizado con el concepto principal de una red de distribución de contenidos (CDN): una red de servidores distribuidos, pero interconectados que entregan recursos a los usuarios con rapidez y eficiencia. Cuando se sube un archivo a un proveedor de CDN, se creará un duplicado en los otros nodos de la red de CDN en todo el mundo. Cuando un usuario solicite un archivo, el nodo que se encuentre más cerca del área geográfica enviará los datos, lo que reduce la latencia. La naturaleza distribuida de las CDN también proporciona redundancia en caso de interrupciones de red o fallas de hardware, y balanceo de cargas para mitigar los aumentos repentinos de tráfico.
Una CDN de imágenes puede proporcionar todos estos beneficios, con una diferencia clave: la capacidad de transformar y optimizar el contenido de una imagen según las cadenas que la URL usó para acceder a ella.
Un usuario subirá una imagen canónica de alta resolución al proveedor, que generará una URL que se usará para acceder a ella:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Aunque la sintaxis exacta que se utilice variará de un proveedor a otro, como mínimo todas las CDN de imágenes te permiten modificar la configuración de compresión, codificación y dimensiones de la imagen de origen. Por ejemplo, Cloudinary realiza el cambio de tamaño dinámico de una imagen subida con las siguientes sintaxis: h_ seguido de la altura numérica en píxeles, w_ seguida del ancho y un valor de c_ que te permite especificar información detallada sobre cómo se debe escalar o recortar la imagen.
Se puede aplicar cualquier cantidad de transformaciones agregando valores separados por comas a la URL, antes del nombre del archivo y la extensión, lo que significa que la imagen subida se puede manipular según sea necesario a través del src del elemento img que la solicita.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
La primera vez que un usuario visita la URL que contiene estas transformaciones, se genera y envía una versión nueva de la imagen escalada proporcionalmente a un ancho de 400 px (w_400). Ese archivo recién creado se almacena en caché en la CDN para que se pueda enviar a cualquier usuario que solicite la misma URL, en lugar de volver a crearlo a pedido.
Aunque no es raro que los proveedores de CDN de imágenes ofrezcan kits de desarrollo de software para facilitar el uso avanzado y la integración con varias pilas tecnológicas, este patrón de URL predecible por sí solo nos permite convertir con facilidad un solo archivo subido en un atributo srcset viable sin la necesidad de ninguna otra herramienta de desarrollo:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Podemos especificar manualmente el nivel de compresión deseado con lo que ahora debería ser una sintaxis conocida: q_, la abreviatura de "quality" (calidad), seguida de la abreviatura numérica para el nivel de compresión:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
No es común que necesites incluir esta información de forma manual, gracias a un conjunto de funciones increíblemente potentes que proporcionan la mayoría de las CDN de imágenes: compresión, codificación y negociación de contenido completamente automáticas.
Compresión automatizada
La capacidad de procesamiento de las CDN de imágenes que tienen a su disposición pueden ofrecer una función increíblemente potente: analizar el contenido de una imagen para determinar, de forma algorítmica, el nivel de compresión y la configuración de codificación ideales, de la misma manera que tú o yo ajustaríamos manualmente la compresión de cada una de nuestras imágenes.
Estos algoritmos automatizan las decisiones que puedes tomar balanceando el tamaño del archivo y la calidad perceptual, analizan el contenido de la imagen para detectar signos medibles de degradación y ajustan la configuración de compresión en consecuencia. Esto suele implicar reducciones enormes en el tamaño de los archivos en comparación con el enfoque manual universal para la configuración de compresión.
Por muy complejo que parezca este proceso, la implementación no podría ser mucho más simple: para Cloudinary, agregar q_auto en una URL de imagen habilita esta función:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Codificación automatizada y negociación de contenido
Cuando reciben una solicitud de una imagen, las CDN de imágenes determinan la codificación más moderna que admite el navegador a través de los encabezados HTTP que envía el navegador junto con las solicitudes de recursos (específicamente, el encabezado Accept). Este encabezado indica las codificaciones que el navegador puede comprender, con los mismos tipos de contenido multimedia que usaríamos para propagar el atributo type del <source> de un elemento <picture>.
Por ejemplo, agregar el parámetro f_auto a la lista de transformaciones de imagen en la URL de un recurso le indica de forma explícita a Cloudinary que entregue la codificación más eficiente que el navegador pueda comprender:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Luego, el servidor genera una versión de la imagen con esa codificación y almacena en caché el resultado para todos los usuarios posteriores con el mismo nivel de compatibilidad con el navegador. Esa respuesta incluye un encabezado Content-Type para informar explícitamente al navegador sobre la codificación del archivo, sin importar la extensión de archivo. Si bien un usuario con un navegador actualizado realizará una solicitud de un archivo que termine en .jpg, esa solicitud irá acompañada de un encabezado que informa al servidor que se admite AVIF, y el servidor enviará un archivo codificado con AVIF junto con una instrucción explícita para tratarlo como AVIF.
El resultado neto es un proceso que no solo te exime de crear archivos con codificación alternativa y de ajustar manualmente la configuración de compresión (o de mantener un sistema que realice estas tareas por ti), sino que también elimina la necesidad de usar <picture> y el atributo type para entregar esos archivos a los usuarios de manera efectiva. Por lo tanto, usar solo las sintaxis srcset y sizes puede proporcionar a los usuarios imágenes codificadas, por ejemplo, AVIF, recurrir a WebP (o JPEG-2000 solo para Safari) y recurrir a la codificación heredada más sensato.
Las desventajas de usar una CDN de imágenes son más logísticas que técnicas; la principal de ellas es el costo. Si bien es común que las CDN de imágenes ofrezcan planes gratuitos con todas las funciones para uso personal, generar recursos de imagen requiere ancho de banda y espacio de almacenamiento para las cargas, el procesamiento en el servidor para transformar las imágenes y espacio adicional para los resultados de las transformaciones almacenadas en caché, por lo que el uso avanzado y las aplicaciones de alto tráfico pueden requerir un plan pagado.