Les réseaux de diffusion de contenu d'images (CDN) sont excellents pour optimiser les images pour le Web. Basculer votre site Web vers un CDN d'images peut vous permettre de économiser entre 40 et 80% sur la taille du fichier image et, dans la plupart des cas, optimiser vos images plus efficacement qu'un script d'optimisation d'image au moment de la compilation.
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 également des paramètres tels que la taille, le format et la qualité. Vous pouvez ainsi 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, dans la mesure où ils créent des versions d'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 des clients individuels.
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 que vous utilisez, mais de manière générale, ils présentent tous des fonctionnalités similaires. Voici quelques-unes des fonctionnalités les plus courantes.
Provenance
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 précédent 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. L'URL peut se présenter comme suit: 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.
Le format de fichier demandé (JPG, dans l'exemple) peut être différent du 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 manière couramment acceptée d'importer des images vers un CDN consiste à les envoyer dans 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. Lorsque cette fonctionnalité est activée, chaque nouvelle version d'une image nécessite une clé de sécurité unique.
Si une personne tente de modifier les paramètres de l'URL de l'image, mais ne fournit pas de clé de sécurité valide, elle 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 d'images proposent des dizaines, voire des centaines, de transformations d'image différentes. Ces transformations sont spécifiées dans la chaîne d'URL, et il n'existe aucune restriction concernant l'utilisation de plusieurs transformations en même temps. Pour les performances Web, les transformations les plus importantes de l'image 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.
Étant donné qu'il existe généralement un paramètre objectivement optimal pour les transformations de performances, certains CDN d'images acceptent le 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 peut déterminer la meilleure façon de transformer une image à l'aide des signaux suivants, entre autres:
- 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 - L'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 des CDN pour l'optimisation des images sans avoir à modifier votre code pour adopter de nouvelles technologies lorsque le CDN commence à les prendre en charge.
Types de CDN d'images
Il existe deux catégories principales de CDN pour les images: les CDN autogérés et les CDN gérés 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 d'images autogéré le plus populaire. Il s'agit d'un outil Open Source sans frais, mais il comporte moins de fonctionnalités que la plupart des CDN commerciaux, et sa documentation est relativement limitée. Les sites qui utilisent Thumbor incluent Wikipedia, Square et 99designs. Consultez Installer le CDN de l'image Thumbor pour obtenir des instructions de configuration.
- Imaginaire
- Imagor
CDN tiers pour les images
Les CDN tiers pour les images 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 pour les images proposent 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 la migration complète d'un site volumineux peut prendre plus de temps. Les CDN d'images tiers sont généralement facturés en fonction des niveaux d'utilisation. La plupart des CDN d'images proposent une version sans frais ou un essai sans frais pour vous permettre d'essayer leur produit.
Choisir une image CDN
Il existe de nombreuses options adaptées aux CDN d'images. Certaines offrent plus de fonctionnalités que d'autres, mais chacune d'elles peut vous aider à économiser des octets sur vos images et donc à charger vos pages plus rapidement. Outre les ensembles de fonctionnalités, d'autres facteurs à prendre en compte lors du choix d'une image CDN sont le coût, la compatibilité, la documentation, et la facilité de configuration ou de migration.
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 constituent donc un facteur important pour la fonctionnalité Largest Contentful Paint. Voici quelques points à garder à l'esprit si vous décidez d'utiliser un CDN image:
- Les images diffusées à partir de CDN peuvent provenir d'un serveur multi-origine, 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 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.
- Envisagez d'utiliser une valeur d'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 visible dans le code HTML initial, envisagez d'utiliser un indice
rel=preloadpour votre image candidate LCP afin que le navigateur puisse charger cette image à l'avance. - Si vous ne pouvez pas utiliser de proxy via votre origine et que le navigateur ne saura pas quelle image charger avant la fin du chargement de la page, configurez une connexion au CDN des images multi-origines le plus tôt possible pour raccourcir la phase de chargement des ressources pour les images candidates LCP potentielles.