Les réseaux de diffusion de contenu (CDN) d'images sont parfaits pour optimiser les images pour le Web. Le passage de votre site Web à un CDN d'images peut vous permettre d'économiser 40 à 80 % de la taille des fichiers image. Dans la plupart des cas, ils peuvent optimiser vos images mieux qu'un script d'optimisation d'image au moment de la compilation.
Qu'est-ce qu'un CDN d'images ?
Les CDN d'images sont spécialisés dans la transformation, l'optimisation et la diffusion d'images. Vous pouvez également les considérer comme des API permettant d'accéder aux images utilisées sur votre site et de les manipuler. Pour les images chargées à partir d'un CDN d'images, l'URL d'une image indique non seulement l'image à charger, mais aussi des paramètres tels que la taille, le format et la qualité. Cela vous permet de créer des variantes d'une image pour différents cas d'utilisation.
Les CDN d'images sont différents des scripts d'optimisation d'images au moment de la compilation, car ils créent de nouvelles versions des images selon les besoins. Par conséquent, les CDN sont généralement mieux adaptés que les scripts de compilation pour créer des images fortement personnalisées pour des clients individuels.
Comment les CDN d'images utilisent les URL pour indiquer les options d'optimisation
Les URL d'image utilisées par les CDN d'images transmettent des informations importantes sur une image, ainsi que les transformations et optimisations à lui appliquer. Les formats d'URL varient en fonction du CDN d'images que vous utilisez, mais ils présentent tous des fonctionnalités similaires. Voici quelques-unes des fonctionnalités les plus courantes.
Origine
Un CDN d'images peut se trouver sur votre propre domaine ou sur le domaine de votre CDN d'images. Les CDN d'images tiers proposent généralement d'utiliser un domaine personnalisé moyennant des frais. L'utilisation de votre propre domaine facilite le changement de CDN d'image ultérieurement, car aucune modification d'URL n'est nécessaire.
L'exemple précédent utilise le domaine du CDN d'images ("example-cdn.com") avec un sous-domaine personnalisé, au lieu d'un domaine personnalisé.
Image
Les CDN d'images peuvent généralement être configurés pour récupérer automatiquement les images à partir de leurs emplacements existants lorsqu'elles sont nécessaires. Pour ce faire, il suffit souvent d'inclure l'URL complète de l'image existante dans l'URL de l'image générée par le CDN d'images. Par exemple, vous pouvez voir une URL de ce type : https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Cette URL récupère et optimise l'image qui se trouve à l'adresse https://flowers.com/daisy.jpg.
Le format de fichier demandé (JPG, dans l'exemple) peut ne pas être le même que le format de fichier image renvoyé (WebP, dans l'exemple). L'en-tête HTTP content-type indique au navigateur le format de l'URL afin qu'il puisse la traiter de manière appropriée. Cela peut prêter à confusion si le fichier est enregistré sur le disque et utilisé par un autre programme qui s'attend à ce que le format corresponde à l'extension de fichier.
Une autre méthode largement acceptée pour importer des images dans un CDN d'images consiste à les envoyer dans une requête POST HTTP à l'API du CDN d'images.
une clé de sécurité ;
Une clé de sécurité empêche d'autres personnes de créer des versions de vos images. Lorsque cette fonctionnalité est activée, chaque nouvelle version d'une image nécessite une clé de sécurité unique.
Si quelqu'un tente de modifier les paramètres de l'URL de l'image, mais ne fournit pas de clé de sécurité valide, il ne pourra pas créer de nouvelle version. Votre CDN d'images se charge de générer et de suivre les clés de sécurité pour vous.
Transformations
Les CDN d'images proposent des dizaines, voire des centaines, de transformations d'images différentes. Ces transformations sont spécifiées dans la chaîne d'URL, et il n'y a aucune restriction quant à l'utilisation de plusieurs transformations en même temps. Pour les performances Web, les transformations d'image les plus importantes sont la taille, la densité de pixels, le format et la compression. Ces transformations expliquent pourquoi le passage à un CDN d'images réduit généralement la taille des fichiers image de votre site.
Comme il existe généralement un paramètre objectivement optimal pour les transformations de performances, certains CDN d'images sont compatibles avec un mode "automatique" pour ces transformations. Par exemple, au lieu de spécifier que les images doivent être transformées au format WebP, vous pouvez laisser le CDN sélectionner et diffuser automatiquement le format optimal. Un CDN d'images peut déterminer la meilleure façon de transformer une image à l'aide des signaux suivants, entre autres :
- Hints client (par exemple, largeur de la fenêtre d'affichage, DPR et largeur de l'image)
- L'en-tête
Save-Data - L'en-tête de requête User-Agent
- L'API Network Information
Par exemple, le CDN d'images peut diffuser des images AVIF dans un navigateur Chrome, des images WebP dans un navigateur Edge et des images JPEG dans un navigateur très ancien. Les paramètres automatiques sont populaires, car ils vous permettent de profiter de l'expertise des CDN d'images pour optimiser les images sans avoir à modifier votre code pour adopter de nouvelles technologies lorsque le CDN d'images commence à les prendre en charge.
Types de CDN d'images
Il existe deux grandes catégories de CDN d'images : les CDN autogérés et les CDN gérés par un tiers.
CDN d'images autogérés
Les CDN autogérés peuvent être un bon choix pour les sites disposant d'un personnel d'ingénierie capable de gérer leur propre infrastructure.
- Thumbor est le CDN d'images autogéré le plus populaire. Il est Open Source et sans frais, mais il offre moins de fonctionnalités que la plupart des CDN commerciaux, et sa documentation est quelque peu limitée. Wikipédia, Square et 99designs sont des exemples de sites qui utilisent thumbor. Pour savoir comment le configurer, consultez How to install the Thumbor image CDN (Comment installer le CDN d'images Thumbor).
- Imaginaire
- Imagor
CDN d'images tiers
Les CDN d'images tiers fournissent des CDN d'images en tant que service. De la même manière que les fournisseurs de services cloud fournissent des serveurs et d'autres infrastructures moyennant des frais, les CDN d'images fournissent l'optimisation et la diffusion d'images moyennant des frais. Étant donné que les CDN d'images tiers gèrent la technologie sous-jacente, vous pouvez généralement commencer à en utiliser un assez rapidement, même si une migration complète pour un site volumineux peut prendre plus de temps. Les CDN d'images tiers sont généralement facturés en fonction de niveaux d'utilisation. La plupart d'entre eux proposent un niveau sans frais ou un essai sans frais pour vous permettre de tester leur produit.
Choisir un CDN d'images
Il existe de nombreuses options de CDN d'images. Certains disposent de plus de fonctionnalités que d'autres, mais tous peuvent vous aider à réduire la taille de vos images et donc à charger vos pages plus rapidement. Outre les ensembles de fonctionnalités, d'autres facteurs doivent être pris en compte lors du choix d'un CDN d'images : le coût, l'assistance, la documentation et la facilité de configuration ou de migration.
Effets sur le Largest Contentful Paint (LCP)
Les images sont un élément essentiel de l'expérience utilisateur sur de nombreux sites Web. Elles constituent donc un facteur important du Largest Contentful Paint d'un site. Voici quelques points à prendre en compte si vous décidez d'utiliser un CDN d'images :
- Les images diffusées à partir de CDN peuvent provenir d'un serveur interorigine, ce qui peut augmenter le temps de configuration de la connexion de votre site. Dans la mesure du possible, essayez d'utiliser un CDN d'images qui passe par l'origine principale afin de ne pas ajouter d'origines supplémentaires auxquelles le navigateur doit se connecter. Cela a le même effet que l'auto-hébergement d'images sur l'origine principale.
- Envisagez d'utiliser une valeur de l'attribut
fetchpriorityde"high"sur l'élément d'image LCP afin que le navigateur puisse commencer à charger cette image dès que possible. - Si une image n'est pas immédiatement détectable dans le code HTML initial, envisagez d'utiliser un indice
rel=preloadpour votre image candidate LCP afin que le navigateur puisse la charger à l'avance. - Si vous ne pouvez pas utiliser de proxy via votre origine et que le navigateur ne sait pas quelle image charger avant un certain temps, configurez une connexion au CDN d'images interorigine dès que possible pour raccourcir la phase de chargement des ressources pour les images candidates potentielles au LCP.