Utiliser des CDN pour les images pour optimiser les images

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

Les réseaux de diffusion de contenu d'image (CDN) sont particulièrement efficaces pour optimiser les images pour sur le Web. Le passage de votre site Web à un CDN image peut générer 40 à 80% d'économies sur les images et, dans la plupart des cas, ils peuvent optimiser vos images d'optimisation de l'image au moment de la compilation.

Qu'est-ce qu'un CDN image ?

Les CDN pour les images sont spécialisés dans la transformation, l'optimisation et la diffusion d'images. Toi et les considérer comme des API permettant d'accéder aux images utilisées et de les manipuler sur votre site. Pour les images chargées à partir d'un CDN image, une URL d'image indique que 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.

Affiche le flux requête/réponse entre le CDN image et le client. Des paramètres tels que la taille et le format sont utilisés pour demander des variantes de la même image.
Exemples de transformations que les CDN d'image peuvent effectuer en fonction des paramètres des URL d'image.

Les CDN images sont différents des scripts d'optimisation d'image lors de la compilation, car ils créer de nouvelles versions d'images si nécessaire. Par conséquent, les CDN sont généralement mieux adaptée à la création d'images hautement personnalisées que les scripts de compilation.

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 et les transformations et optimisations à lui appliquer. Formats d'URL varient en fonction du CDN pour les images que vous utilisez, mais dans les grandes lignes, des caractéristiques similaires. Voici quelques-unes des fonctionnalités les plus courantes.

Les URL d'image sont généralement constituées des composants suivants: origine, image, clé de sécurité et transformations.
Éléments de base d'une URL d'image issue d'un CDN image

Origine

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

L'exemple précédent utilise le domaine du CDN de l'image ("example-cdn.com") avec un préfixe un sous-domaine personnalisé, et non un domaine personnalisé.

Image

Les CDN images peuvent généralement être configurés pour récupérer automatiquement des images emplacements existants lorsque cela est nécessaire. Cette capacité est souvent obtenue par y compris l'URL complète de l'image existante dans l'URL correspondante généré par le CDN de l'image. Par exemple, l'URL affichée se présente comme suit : ceci: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Cette URL récupérera et optimisera l'image qui existe sur https://flowers.com/daisy.jpg.

Le format de fichier demandé (JPG dans l'exemple) peut être différent du format format de fichier image renvoyé (WebP dans l'exemple). Le protocole HTTP content-type indique au navigateur le format de l'URL afin qu'il puisse la traiter en conséquence. 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 du fichier.

Une autre méthode largement acceptée pour importer des images dans un CDN consiste à les envoyer dans une requête HTTP POST à l'API du CDN de l'image.

Clé de sécurité

Une clé de sécurité empêche d'autres personnes de créer d'autres versions de vos images. Lorsque cette fonctionnalité est activée, chaque nouvelle version d'une image nécessite clé de sécurité.

Si quelqu'un essaie de modifier les paramètres de l'URL de l'image, mais s'il ne fournit pas de clé de sécurité valide, il ne pourra pas créer version. Votre CDN image se charge de la génération et du suivi clés de sécurité pour vous.

Transformations

Les CDN d'images proposent des dizaines, voire des centaines, d'images différentes Transformer. Ces transformations sont spécifiées dans la chaîne de l'URL, et il n'existe aucune restriction concernant l'utilisation de plusieurs transformations en même temps. Pour les performances Web, les transformations d'image les plus importantes sont la taille, le nombre de pixels la densité, le format et la compression. Ces transformations sont la raison pour laquelle le passage à un CDN image réduit généralement la taille des fichiers image de votre site.

Parce qu'il existe généralement un meilleur cadre pour évaluer les performances certaines transformations, certains CDN d'images acceptent un pour ces Transformer. 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 un format optimal. Un CDN image peut déterminer la meilleure façon de transformer une image à l'aide des signaux suivants, entre autres:

Par exemple, le CDN de l'image peut diffuser des fichiers AVIF vers un navigateur Chrome, WebP vers un emplacement Edge et JPEG dans un navigateur très ancien. Les paramètres automatiques sont populaires, car ils vous permettent de profiter des CDN image en optimisation des images avoir besoin de modifier votre code pour adopter de nouvelles technologies lorsque le CDN de l'image commence en les soutenant.

Types de CDN pour les images

Il existe deux grandes catégories de CDN pour les images: les CDN autogérés et gérés par un tiers.

CDN pour les images autogérés

Les CDN autogérés peuvent être un bon choix pour les sites dont le personnel d'ingénieurs à maintenir leur propre infrastructure.

CDN tiers pour les images

Les CDN tiers d'images fournissent des CDN d'images en tant que service. De la même manière que des fournisseurs de services cloud fournissent des serveurs et d'autres infrastructures payants, des CDN image l'optimisation et la livraison d'images moyennant des frais. Étant donné que les images tierces Les CDN conservent 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 nécessiter plus longtemps. Les tarifs des CDN tiers pour les images sont généralement basés sur les niveaux d'utilisation, avec la plupart des CDN d'images qui proposent une version sans frais ou un essai sans frais pour vous permettre leur produit.

Choisir un CDN image

Il existe de nombreuses options intéressantes pour les CDN d'images. Certains ont plus de fonctionnalités que d'autres, mais chacun d'eux peut vous aider à économiser des octets sur vos images plus rapidement. Outre les ensembles de fonctionnalités, vous devez prendre en compte d'autres facteurs d'images CDN incluent 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 sont donc un est un facteur important pour Largest Contentful Paint d'un site. Voici Voici quelques points à garder à l'esprit si vous décidez d'utiliser un CDN image:

  • Les images diffusées à partir des CDN peuvent provenir d'un serveur multi-origine qui peut augmenter le temps de configuration de la connexion de votre site. Si possible, utilisez une image CDN qui sert de proxy via l'origine principale pour ne pas ajouter d'origines supplémentaires auquel le navigateur peut se connecter. Cela a le même effet que les images auto-hébergées sur l'origine principale.
  • Envisagez d'utiliser une valeur d'attribut fetchpriority de "high" sur l'élément d'image LCP afin que le navigateur puisse commencer à charger l'image que possible.
  • Si une image n'est pas immédiatement visible dans le code HTML initial, envisagez d'utiliser un rel=preload pour votre image candidate LCP afin que le navigateur puisse la charger en temps réel.
  • Si vous ne pouvez pas utiliser de proxy via votre origine et que le navigateur ne saura pas quelle image à charger plus tard dans le chargement de la page, configurer une connexion au CDN pour les images multi-origines le plus tôt possible afin de raccourcir la phase de chargement des ressources pour les images candidates LCP potentielles.