Utiliser des CDN pour les images pour optimiser les images

Jeremy Wagner

Katie Hempenius

Barry Pollard

Pourquoi utiliser un CDN basé sur des images ?

Les réseaux de diffusion de contenu d'images (CDN) sont particulièrement efficaces pour optimiser les images. Le passage à un CDN basé sur des images peut vous permettre de réaliser des économies de 40 à 80% en termes de taille de fichier image. En théorie, il est possible d'obtenir les mêmes résultats en n'utilisant que des scripts de compilation, mais dans la pratique, cette pratique est rare.

Qu'est-ce qu'un CDN basé sur des 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 quelle image charger, mais aussi des paramètres tels que la taille, le format et la qualité. Cela permet de créer facilement 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, dans la mesure où ils créent de nouvelles versions des images selon les besoins. Par conséquent, les CDN sont généralement plus adaptés que les scripts de compilation à la création d'images hautement personnalisées pour chaque client.

Comment les CDN pour images utilisent les URL pour indiquer les options d'optimisation

Les URL d'image utilisées par les CDN contenant des images transmettent des informations importantes sur une image, ainsi que sur les transformations et les optimisations qui doivent lui être appliquées. Les formats d'URL varient en fonction du CDN de l'image, mais de manière générale, ils présentent tous des caractéristiques similaires. Passons en revue certaines des fonctionnalités les plus courantes.

Origine

Un CDN d'images peut résider sur votre propre domaine ou sur celui de votre CDN d'images. Les CDN tiers pour les images permettent généralement d'utiliser un domaine personnalisé moyennant des frais. L'utilisation de votre propre domaine facilite le changement ultérieur des CDN pour les images, car aucune modification d'URL n'est nécessaire.

L'exemple ci-dessus utilise le domaine du CDN de l'image ("example-cdn.com") avec un sous-domaine personnalisé, au lieu d'un domaine personnalisé.

Images

Les CDN d'images peuvent généralement être configurés pour récupérer automatiquement les images à partir de leurs emplacements existants lorsque cela est nécessaire. Cette fonctionnalité est souvent obtenue en incluant l'URL complète de l'image existante dans l'URL de l'image générée par le CDN de l'image. Par exemple, vous pouvez voir une URL ressemblant à ceci: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Cette URL récupérera et optimisera l'image présente à l'adresse https://flowers.com/daisy.jpg.

Une autre méthode couramment utilisée pour importer des images vers un CDN consiste à les envoyer via une requête HTTP POST à l'API du CDN.

Clé de sécurité

Une clé de sécurité empêche d'autres personnes de créer de nouvelles versions de vos images. Si cette fonctionnalité est activée, chaque nouvelle version d'une image nécessite une clé de sécurité unique. Si un utilisateur 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 version. Votre CDN d'images se charge des détails de la génération et du suivi des clés de sécurité à votre place.

Transformations

Les CDN pour les images proposent des dizaines, voire des centaines, de transformations d'images différentes. Ces transformations sont spécifiées via la chaîne d'URL, et il n'existe aucune restriction concernant l'utilisation de plusieurs transformations en même temps. Dans le contexte des performances Web, les transformations les plus importantes d'une image sont la taille, la densité de pixels, le format et la compression. Ces transformations entraînent généralement une réduction significative de la taille de l'image en passant à un CDN d'images.

Il existe généralement un paramètre objectivement plus adapté aux transformations de performances. C'est pourquoi certains CDN basés sur des images acceptent 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 autoriser le CDN à sélectionner et diffuser automatiquement le format optimal. Voici les signaux qu'un CDN peut utiliser pour déterminer la meilleure façon de transformer une image:

• Indices client (par exemple, la largeur de la fenêtre d'affichage, le DPR et la largeur de l'image)
• L'en-tête Save-Data
• En-tête de requête User-Agent
• API Network Information

Par exemple, l'image CDN peut diffuser des fichiers AVIF dans un navigateur Chrome, WebP dans un navigateur Edge et JPEG dans un navigateur très ancien. Les paramètres automatiques sont populaires, car ils vous permettent de bénéficier de l'expertise considérable des CDN pour images en matière d'optimisation des images, sans avoir à modifier le code pour adopter de nouvelles technologies une fois qu'elles sont compatibles avec le CDN d'images.

Types de CDN d'images

Les CDN pour les images peuvent être divisés en deux catégories: autogérées et gérées par un tiers.

CDN pour images autogérées

Les CDN autogérés peuvent être un bon choix pour les sites dont les ingénieurs sont à l'aise pour gérer leur propre infrastructure.

• Thumbor est le CDN autogéré pour les images autogérées le plus populaire. Bien qu'il soit Open Source et sans frais, il possède généralement moins de fonctionnalités que la plupart des CDN commerciaux et sa documentation est relativement limitée. Wikipédia, Square et 99designs sont trois sites qui utilisent Thumbor. Consultez le post Installer le CDN de l'image Thumbor pour obtenir des instructions sur sa configuration.
• Imaginaire
• Imagor

CDN tiers pour les images

Les CDN tiers pour les images fournissent des CDN d'images en tant que service. Tout comme les fournisseurs de services cloud proposent des serveurs et d'autres infrastructures payants, les CDN pour l'optimisation et la diffusion d'images sont payants. Étant donné que les CDN tiers gèrent la technologie sous-jacente, la mise en route est relativement simple, généralement en 10 à 15 minutes, même si la migration complète d'un site volumineux peut prendre beaucoup plus de temps. Les CDN tiers pour les images sont généralement facturés en fonction des niveaux d'utilisation. La plupart des CDN contenant des images proposent une version ou un essai sans frais pour vous permettre d'essayer le produit.

Choisir un CDN pour une image

Il existe de nombreuses options adaptées aux CDN d'images. Certaines auront plus de fonctionnalités que d'autres, mais toutes vous permettront probablement d'économiser des octets sur vos images et donc de charger vos pages plus rapidement. Outre les ensembles de fonctionnalités, vous devez prendre en compte d'autres facteurs au moment de choisir un CDN d'images : le coût, l'assistance, la documentation, et la facilité de configuration ou de migration.

Vous pouvez également les tester vous-même avant de prendre une décision. Vous trouverez ci-dessous des ateliers de programmation avec des instructions pour vous familiariser rapidement avec plusieurs CDN contenant des images.

Effets sur le LCP (Largest Contentful Paint)

Les images jouent un rôle essentiel dans l'expérience utilisateur sur de nombreux sites Web. Elles contribuent donc à l'efficacité des sites en termes de Largest Contentful Paint. Voici quelques points à garder à l'esprit si vous décidez d'utiliser un CDN image:

1. Les images diffusées à partir de CDN peuvent provenir d'un serveur multi-origine, ce qui augmente le temps de configuration de la connexion. Dans la mesure du possible, essayez d'utiliser un CDN d'images qui sert de proxy via l'origine principale, afin de ne pas ajouter d'origines supplémentaires auxquelles le navigateur pourra se connecter. Cela a le même effet que l'auto-hébergement d'images sur l'origine principale.
2. Nous vous conseillons d'utiliser une valeur d'attribut fetchpriority de "high" sur l'élément d'image LCP afin que le navigateur puisse commencer à charger cette image dès que possible.
3. Si une image n'est pas immédiatement visible dans le code HTML initial, utilisez une indication rel=preload pour votre image candidate LCP afin que le navigateur puisse charger cette image à l'avance.
4. S'il est impossible d'utiliser votre origine via un proxy et que l'image exacte à charger n'est connue que plus tard lors du chargement de la page, vous devez configurer une connexion au CDN des images multi-origines le plus tôt possible afin de raccourcir la phase de chargement des ressources de ce qui pourrait être l'image LCP candidate de votre page.

Les CDN pour les images sont des outils indispensables, qui éliminent les tâches répétitives d'optimisation manuelle des images. Ils doivent être pris en compte. Toutefois, comme toujours, il existe des compromis à prendre en compte. En gardant un œil sur les images candidates LCP de votre site Web et en ajoutant des indications le cas échéant, vous pouvez atténuer toute latence supplémentaire liée à ces requêtes clés.