Vous connaissez peut-être déjà le concept fondamental d'un réseau de diffusion de contenu (CDN, Content Delivery Network): un réseau de réseaux distribués, mais interconnectés serveurs qui fournissent rapidement et efficacement des éléments aux utilisateurs. Lorsqu'un fichier est importé vers un fournisseur de CDN, un doublon est créé sur les autres nœuds du réseau CDN dans le monde. Lorsqu'un utilisateur demande un fichier, le nœud envoie géographiquement les données au plus près de l'utilisateur, ce qui réduit la latence. La nature distribuée des CDN assure également la redondance en cas de panne du réseau ou la défaillance matérielle et l'équilibrage de charge pour limiter les pics de trafic.
Un CDN image peut offrir tous ces avantages, à une différence essentielle près: la possibilité de transformer et optimiser le contenu d'une image en fonction des chaînes utilisées par l'URL pour y accéder.
L'utilisateur envoie une image canonique haute résolution au fournisseur, qui génère une URL permettant d'y accéder:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Bien que la syntaxe exacte varie d'un fournisseur à l'autre, au moins, tous les CDN d'images vous permettent de modifier une source
les dimensions, l'encodage et les paramètres de compression de l'image. Cloudinary, par exemple,
effectue le redimensionnement dynamique d'une
image importée en utilisant les syntaxes suivantes: h_ suivie de la hauteur numérique en pixels, w_ et de la largeur.
et une valeur c_ qui vous permet de spécifier des informations détaillées sur la façon dont l'image doit être mise à l'échelle ou recadrée.
Vous pouvez appliquer autant de transformations que vous le souhaitez en ajoutant à l'URL des valeurs séparées par une virgule, avant le nom du fichier et l'extension.
Cela signifie que l'image importée peut être manipulée si nécessaire 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 visite l'URL contenant ces transformations, une nouvelle version de l'image redimensionnée proportionnellement à
une largeur de 400 px (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é
à tous les utilisateurs qui demandent la même URL, au lieu de la recréer à la demande.
Il n'est pas rare que les fournisseurs de CDN d'images proposent des kits de développement logiciel.
pour faciliter l'utilisation avancée et l'intégration avec diverses piles technologiques, ce format d'URL prévisible permet à lui seul de faciliter
Transformez un seul fichier importé en 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 qui devrait maintenant être familière: q_ (court)
de « qualité », suivi du raccourci numérique correspondant au niveau de compression:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Il est rare que vous ayez besoin d'inclure ces informations manuellement, mais grâce à un ensemble de fonctionnalités incroyablement performantes proposées par la plupart des CDN d'images: compression, encodage et négociation de contenu entièrement automatiques.
Compression automatique
Grâce à la puissance de calcul dont disposent les CDN, ils peuvent offrir une fonctionnalité incroyablement puissante: l'analyse le contenu d'une image afin de déterminer, grâce à un algorithme, son niveau de compression et ses paramètres d'encodage idéaux, tout comme vous ou moi-même. ajuster manuellement la compression pour 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 des images pour des signes mesurables de dégradation et ajuster les paramètres de compression en conséquence. Cela se traduit souvent par d'importantes réductions par rapport à l'approche manuelle unique pour les paramètres de compression.
Aussi complexe que cela puisse paraître, l'implémentation est incroyablement simple: pour Cloudinary, l'ajout de q_auto dans un
l'URL de l'image active 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-->
Codage et négociation de contenu automatisés
Lorsqu'ils reçoivent une requête pour une image, les CDN d'images déterminent l'encodage le plus récent compatible avec le navigateur via le
Les en-têtes HTTP envoyés par le navigateur en même temps que les requêtes d'éléments :
l'en-tête Accept. Cet en-tête indique les encodages que le navigateur est capable de comprendre, en utilisant les mêmes
types de support que nous utiliserions pour renseigner le type
de l'attribut <source> d'un élément <picture>.
Par exemple, ajouter le paramètre f_auto à la liste des transformations d'image dans une URL d'élément indique explicitement à Cloudinary
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 utilisant le même
de compatibilité des navigateurs. 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 effectue
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 pris en charge, et le serveur
envoie un fichier encodé au format AVIF avec
une instruction explicite pour le traiter comme tel.
Le résultat net est un processus qui vous dispense non seulement de créer des fichiers encodés différemment et d'ajuster manuellement vos paramètres de compression.
(ou la maintenance d'un système qui effectue ces tâches à votre place), mais qui vous évite d'avoir à utiliser <picture> et l'attribut type pour
fournir ces fichiers aux utilisateurs. Par conséquent, si vous utilisez uniquement les syntaxes srcset et sizes, vos utilisateurs peuvent toujours obtenir des images encodées au format AVIF, par exemple,
soit au format WebP (ou JPEG-2000, pour Safari uniquement), soit à l'encodage ancien le plus raisonnable.
L'utilisation d'un CDN image présente des inconvénients plus logistiques que techniques, surtout liés au coût. Même s'il est courant que les CDN image Proposez des forfaits sans frais et complets 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 serveur pour transformer les images et un espace supplémentaire pour les résultats de transformation mis en cache. Un forfait payant peut donc être nécessaire pour une utilisation avancée et pour les applications à trafic élevé.