Vous connaissez peut-être déjà le concept de base d'un réseau de diffusion de contenu (CDN): un réseau de serveurs distribués, interconnectés qui fournissent des éléments de manière rapide et efficace aux utilisateurs. Lorsqu'un fichier est importé auprès d'un fournisseur CDN, un doublon est créé sur les autres nœuds du réseau CDN du monde entier. Lorsqu'un utilisateur demande un fichier, les données sont envoyées par le nœud géographiquement le plus proche de cet utilisateur, ce qui réduit la latence. La nature distribuée des CDN fournit également une redondance en cas de panne du réseau ou de défaillance matérielle, ainsi que l'équilibrage de charge pour atténuer les pics de trafic.
Un CDN d'images peut offrir tous ces avantages, à une différence essentielle: la possibilité de transformer et d'optimiser le contenu d'une image en fonction des chaînes utilisées par l'URL pour y accéder.
Un utilisateur importera une image canonique haute résolution vers le fournisseur, qui générera une URL permettant d'y accéder:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Bien que la syntaxe exacte utilisée varie d'un fournisseur à l'autre, tous les CDN vous permettent au minimum de modifier les dimensions, les paramètres d'encodage et de compression d'une image source. Cloudinary, par exemple, effectue le redimensionnement dynamique d'une image importée à l'aide des syntaxes suivantes: h_ suivi de la hauteur numérique en pixels, w_ suivi de la largeur, et d'une valeur c_ qui vous permet de spécifier des informations détaillées sur la mise à l'échelle ou le recadrage de l'image.
Vous pouvez appliquer n'importe quel nombre de transformations en ajoutant des valeurs séparées par une virgule à l'URL, avant le nom du fichier et l'extension. Cela signifie que l'image importée peut être manipulée selon les besoins via le src de l'élément img qui la demande.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
La première fois qu'un utilisateur accède à l'URL contenant ces transformations, une nouvelle version de l'image mise à l'échelle proportionnellement pour atteindre une largeur de 400 pixels (w_400) est générée et envoyée. Ce fichier nouvellement créé est ensuite mis en cache sur le CDN afin de pouvoir être envoyé à tout utilisateur demandant la même URL, plutôt que d'être recréé à la demande.
Bien qu'il ne soit pas rare que les fournisseurs de CDN d'images proposent des kits de développement logiciel pour faciliter l'utilisation et l'intégration avancées de diverses piles technologiques, ce format d'URL prévisible permet à lui seul de transformer un fichier importé unique en un attribut srcset viable sans avoir besoin d'autres outils de développement:
<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="…">
Nous pouvons spécifier manuellement le niveau de compression souhaité à l'aide d'une syntaxe familière: q_, l'abréviation de "quality", suivi du raccourci numérique du niveau de compression:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Il est rare d'avoir besoin d'inclure ces informations manuellement, grâce à un ensemble de fonctionnalités incroyablement performantes fournies par la plupart des CDN d'images: compression, encodage et négociation de contenu entièrement automatiques.
Compression automatisée
La puissance de calcul que les CDN disposent d'images signifient qu'ils sont en mesure d'offrir une fonctionnalité incroyablement puissante: analyser le contenu d'une image pour déterminer à l'aide d'un algorithme son niveau de compression idéal et ses paramètres d'encodage, tout comme vous et moi-même peaufiniez manuellement la compression de chacune de nos images.
Ces algorithmes automatisent les décisions que vous pouvez prendre pour équilibrer la taille du fichier et la qualité perceptuelle, en analysant le contenu de l'image pour détecter des signes mesurables de dégradation et en ajustant les paramètres de compression en conséquence. Cela se traduit souvent par une réduction considérable de la taille des fichiers par rapport à l'approche universelle pour les paramètres de compression.
Aussi complexe que puisse paraître ce processus, l'implémentation est on ne peut plus simple: pour Cloudinary, l'ajout de q_auto à une URL d'image permet d'obtenir cette fonctionnalité:
<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-->
Négociation de contenu et encodage automatisés
Lorsqu'ils reçoivent une requête pour une image, les CDN pour images déterminent l'encodage le plus récent accepté par le navigateur via les en-têtes HTTP envoyés par le navigateur avec les requêtes d'éléments, en particulier l'en-tête Accept. Cet en-tête indique les encodages que le navigateur est capable de comprendre, à l'aide des mêmes types de contenus que nous utiliserions pour renseigner l'attribut type du <source> d'un élément <picture>.
Par exemple, l'ajout du paramètre f_auto à la liste des transformations d'image dans une URL d'élément indique explicitement à Cloudinary de fournir l'encodage le plus efficace que le navigateur puisse comprendre:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Le serveur génère ensuite une version de l'image avec cet encodage et met en cache le résultat pour tous les utilisateurs suivants avec le même niveau de compatibilité du navigateur. Cette réponse inclut un en-tête Content-Type pour informer explicitement le navigateur de l'encodage du fichier, quelle que soit l'extension du fichier. Même si un utilisateur disposant d'un navigateur récent envoie une requête pour un fichier se terminant par .jpg, cette requête est accompagnée d'un en-tête informant le serveur que le format AVIF est compatible. Le serveur envoie alors un fichier encodé au format AVIF ainsi qu'une instruction explicite pour le traiter comme un fichier AVIF.
Le résultat net est un processus qui vous évite de créer des fichiers encodés de manière alternative et d'ajuster manuellement vos paramètres de compression (ou de gérer un système qui effectue ces tâches pour vous), mais vous évite d'utiliser <picture> et l'attribut type pour distribuer efficacement ces fichiers aux utilisateurs. Ainsi, le simple fait d'utiliser les syntaxes srcset et sizes peut toujours fournir à vos utilisateurs des images encodées au format AVIF, par exemple en revenant au format WebP (ou JPEG-2000, pour Safari uniquement), et en revenant à l'ancien encodage le plus approprié.
Les inconvénients liés à l'utilisation d'un CDN associé à une image sont plus logistiques que techniques, le principal étant le coût. Bien qu'il soit courant que les CDN d'images proposent des forfaits sans frais riches en fonctionnalités pour un usage personnel, la génération de composants image nécessite de la bande passante et de l'espace de stockage pour les importations, le traitement sur le serveur pour transformer les images et de l'espace supplémentaire pour les résultats de transformation mis en cache. Par conséquent, une utilisation avancée et des applications à fort trafic peuvent nécessiter un forfait payant.