Es posible que ya conozcas el concepto central de una red de distribución de contenidos (CDN): una red de redes distribuidas pero interconectadas servidores que entreguen activos a los usuarios de forma rápida y eficiente. Cuando se sube un archivo a un proveedor de CDN, se crea un duplicado. en otros nodos de la red de CDN del mundo. Cuando un usuario solicita un archivo, el nodo envía los datos geográficamente. más cerca del usuario, lo que reduce la latencia. La naturaleza distribuida de las CDN también proporciona redundancia en caso de interrupciones de la red o las fallas de hardware y el 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 en función de las cadenas de la URL utilizada para acceder a ella.
Un usuario subirá una imagen canónica de alta resolución al proveedor, lo que generará una URL que se usará para acceder a ella:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Aunque la sintaxis exacta utilizada variará de un proveedor a otro, como mínimo, todas las CDN de imagen le permiten modificar una fuente.
configuración de dimensiones, codificación y compresión de una imagen. Cloudinary, por ejemplo,
realiza un cambio de tamaño dinámico de un
subió la imagen con las siguientes sintaxis: h_ seguido de la altura numérica en píxeles, w_ seguido del ancho y
y un valor c_ que te permite especificar información detallada sobre cómo se debe ajustar o recortar la imagen.
Se puede aplicar cualquier cantidad de transformaciones si agregas valores separados por comas a la URL, antes del nombre de archivo y la extensión.
lo que significa que la imagen subida se puede manipular según sea necesario mediante el 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 crea una versión nueva de la imagen ajustada proporcionalmente a una
se genera y envía el ancho de 400 px (w_400). Ese archivo recién creado se almacena en caché en la CDN para poder enviarlo
a cualquier usuario que solicite la misma URL, en lugar de volver a crearla a pedido.
Aunque es común que los proveedores de CDN de imágenes ofrezcan kits de desarrollo de software,
para facilitar el uso avanzado y la integración con diversos tipos de tecnología, solo este patrón de URL predecible nos permite
Convierte un solo archivo subido en un atributo srcset viable sin la necesidad de usar otras herramientas 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 nuestro nivel de compresión deseado usando lo que ahora debería ser una sintaxis conocida: q_, short
de "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 manualmente; sin embargo, gracias a un conjunto de funciones increíblemente potentes que ofrecen la mayoría de las CDN de imágenes: compresión, codificación y negociación de contenido totalmente automáticas.
Compresión automatizada
Las CDN de imagen de potencia de procesamiento tienen a su disposición una función increíblemente potente: analizar el contenido de una imagen para determinar algorítmicamente su nivel de compresión y configuración de codificación ideales, tal como lo haríamos tú o yo ajustar manualmente la compresión para cada una de nuestras imágenes.
Estos algoritmos automatizan las decisiones que tomes equilibrando el tamaño del archivo y la calidad perceptual, analizando el contenido de la imagen para indicadores medibles de degradación y ajustar la configuración de compresión en consecuencia. Esto suele implicar grandes reducciones en los archivos en comparación con el enfoque único para todos los ajustes de compresión.
Aunque este proceso pueda sonar complejo, la implementación no podría ser mucho más sencilla: para Cloudinary, se agregó q_auto en un
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 la negociación de contenido
Al recibir 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 la
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 la misma
tipos de medios que usaríamos para propagar type
Atributo de <source> de un elemento <picture>.
Por ejemplo, agregar el parámetro f_auto a la lista de transformaciones de imagen en una URL de recurso le indica explícitamente a Cloudinary que
ofrecer 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 la misma
nivel de compatibilidad del navegador. Esa respuesta incluye un encabezado Content-Type
para informar explícitamente al navegador sobre la codificación del archivo, independientemente de la extensión del archivo. Si bien un usuario con un navegador moderno puede hacer una
solicitud de un archivo que termina en .jpg, esa solicitud irá acompañada de un encabezado que informe al servidor que admite AVIF y que 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 libera de la creación de archivos codificados de forma alternativa y de ajustar manualmente la configuración de compresión.
(o bien mantener un sistema que realice estas tareas por ti), pero elimina la necesidad de usar <picture> y el atributo type para
entregar esos archivos a los usuarios. Por lo tanto, si usas solo las sintaxis srcset y sizes, puedes proporcionarles a los usuarios imágenes codificadas como, por ejemplo, AVIF,
recurriendo a WebP (o JPEG-2000, solo para Safari), y recurriendo de nuevo a la codificación heredada más razonable.
Las desventajas de usar una CDN de imagen son más logísticas que técnicas; una de ellas es el costo. Si bien es común que las CDN de imagen ofrece planes gratuitos con funciones para uso personal, la generación de recursos de imagen requiere ancho de banda y espacio de almacenamiento para las cargas, el procesamiento de el servidor para transformar las imágenes y el espacio adicional para los resultados de la transformación almacenada en caché, por lo que el uso avanzado y las aplicaciones de alto tráfico pueden requerir un plan pagado.