Quel CDN d'images choisir en 2024 ?

Un CDN d'image permet de simplifier la production de contenus, d'accélérer la navigation sur un site, et donc l'expérience utilisateur. Mais il existe tellement d'offres qu'il est difficile e s'y retrouver. Comment choisir son CDN d'image?

Qu’est-ce qu’un CDN ?

Un CDN (selon les définitions, "Content Delivery Network" ou "Content Distribution Network") est un réseau de serveurs interconnectés permettant d’accélérer la vitesse de chargement de pages Web. Pour n'en citer que quelques-uns, CloudFlare, CloudFront, Akamai sont des CDNs populaires. Mais quels problèmes concrets un CDN résout-il ?

Lorsqu'un utilisateur visite une page Web, il charge les données de la page depuis un serveur. Ce chargement peut être lent pour plusieurs raisons :

• le serveur peut mettre du temps pour générer la page, à cause de sa complexité ou de la charge du serveur (on considère qu'un serveur est lent s'il met plus de 250ms à générer une page).
• l'utilisateur peut être géographiquement éloigné du serveur, et les réponses HTTP mettre du temps à lui arriver.
• le contenu de la page peut être volumineux, et mettre du temps à être téléchargé.

C’est là qu’intervient le CDN. Il sert d'intermédiaire, ou de proxy, entre le serveur d'origine et l'utilisateur final. Au premier chargement, le CDN transmet la requête de l'utilisateur au serveur d'origine, puis met en cache le contenu de la page. Lors des requêtes suivantes, le CDN répond directement à l'utilisateur, sans avoir besoin de contacter le serveur d'origine.

Par ailleurs, les CDNs provisionnent de nombreux serveurs dans de nombreuses zones géographiques. Le CDN choisit le serveur le plus proche de l'utilisateur pour répondre à sa requête. Cela réduit la latence, et accélère le chargement de la page.

Résultat ? Des pages qui se chargent plus vite, des utilisateurs satisfaits, et donc un site plus efficace !

Les CDNs sont particulièrement utiles pour les sites web pour lesquels la vitesse de chargement est cruciale (sites de e-commerce, sites médias, et plus généralement tous sites B2C). Ils leur permettent de gagner plus d'argent, et monétisent donc leur service.

Qu’est-ce qu’un CDN d’images ?

Les CDN d'images sont des CDN spécialisés dans la gestion et l'optimisation de la livraison d'images. En plus des habituelles fonctions de cache, les CDNs d'image proposent de :

• redimensionner les images à la volée et servir des variantes à moyenne et basse définition
• retailler les images pour qu'elles aient le bon aspect ratio
• convertir et recompresser les images dans un meilleur format (de jpeg à webm par exemple)
• et bien d’autres fonctionnalités (en fonction des fournisseurs)

Pourquoi est-ce important ? Les éditeurs de contenu utilisent souvent des images haute définition, pour être sûrs qu'elles s'afficheront bien partout. Mais selon le terminal de l'utilisateur final, il vaut mieux lui proposer des versions retaillées, rééchantillonnées, et recompresées. Par exemple, pour un terminal mobile, on préférera des images en mode portrait dont la taille n'excède pas quelques centaines de Ko.

Un CDN d'image fonctionne sur le même principe qu'un CDN classique: Le CDN stocke les images d'origine dans la meilleure qualité et taille. Ensuite, en fonction de la taille de l’écran client, le CDN retaille et compresse l’image pour l’envoyer à l’utilisateur final. Il stocke ensuite cette version pour les prochaines requêtes.

Fonctionnalités avancées des CDN

Le marché des CDNs étant assez concurrentiel, les acteurs se démarquent non seulement par le prix mais aussi par des fonctionnalités avancées. On trouve pêle-mêle:

• des outils de diagnostic,
• un environnement « bac à sable »,
• des analyses de traffic en temps réel,
• des optimisations des pages d'origine à la volée,
• une gestion des certificats,
• du rate limiting, etc.

Il est facile de se dire qu'on aura un jour besoin de tout cela, et donc choisir les plus gros. Mais ce sont aussi souvent les plus chers ! Pour choisir un CDN, il faut donc avant tout chercher celui qui propose les fonctionnalités dont on a besoin.

Dans notre cas, nous avons besoin d'une fonctionnalité en particulier : la possibilité de ne pas uploader les images au préalable sur le CDN. En effet, la plupart des CDNs d'images obligent les développeurs à stocker les images en priorité sur leurs serveurs. Les CDNs qui retaillent des images fournies par le servir d'origine sont plus rares. Notre besoin est centré sur les générateurs de sites statiques, qui mettent tout leur contenu (texte des pages, images et feuilles de style) au même endroit.

Comparatif

Nous avons sélectionné les cinq CDN les plus populaires (sources : Web and SEO, The guide X, DaCast, Scaleflex) et les plus performants disponibles sur le marché en 2024.

Puis nous avons les avons comparés sur les critères suivants :

• Prix
• Présence de support
• Fonctionnalité de cache
• Fonctionnalités pour les images
• Nombre de PoPs (Points of Presence)
• Latence théorique
• Sécurité

Voici le résumé de notre analyse:

Pour le tarif, nous nous sommes basés sur le volume mensuel d'images chargées sur notre site marmelab.com. Avec ces informations, la pole position revient donc à Sucuri CDN pour 16,67 € mensuel, suivi de près par Bunny CDN pour 17,47 €. Bon dernier, NitroPack est à 146,67 €.

Au niveau sécurité, on trouve pas mal de différences. Les offres de Sucuri CDN, Bunny CDN, KeyCDN et Cloudflare proposent de nombreux boucliers de sécurité tels qu’une protection contre les attaques DDOS, contre les Bots et bien d’autres encore. En revanche, NitroPack se trouve bien en retrait sur ce point.

Quant aux quantités de points de présence (PoP), Cloudflare domine le classement avec 310 points, suivi par NitroPack avec 200. En queue de classement, on retrouve KeyCDN avec 60 PoPs et Sucuri CDN avec seulement 14 points de présence.

En priorisant le prix, les fonctionnalités pour les images et de nombre de PoPs, nous avons dont sélectionné deux CDNs qui sortent du lot : Cloudflare et Bunny CDN.

Tests

Pour les départager, nous avons effectué des tests de performance sur un site représentatif de notre cas d'utilisation. Nous avons créé un site Web simple en utilisant un template public (source). Après avoir intégré les CDN, nous avons testé la performance de la page avec Pingdom.

Les tests ont porté sur :

• le temps de chargement à la première puis à la seconde requête,
• la taille de la page chargée,
• le nombre de requêtes effectuées,
• les performances estimées par LightHouse,
• le fonctionnement du redimensionnement d'image.

Les tests ont confirmé l'efficacité de Cloudflare et Bunny CDN dans l'amélioration des performances des sites Web, avec des temps de chargement nettement réduits :

En ce qui concerne la taille de la page, du nombre de requêtes et les performances mesurées, les résultats sont presque identiques pour les deux CDNs.

Quant à la gestion optimisée des images, elle semble plus simple et rapide avec Bunny CDN grâce à son fonctionnement par paramètres d’URL. En effet, le seul travail à effectuer pour obtenir différentes variantes d’une image consiste à préciser la dimension ou la compression souhaitées en query string dans l’URL de l'image.

Pour autant, Cloudflare n’est pas en reste non plus. Il permet également d'utiliser différentes variantes d'une même image, mais il faut d'abord importer l'image sur leur plateforme avant de créer les variantes.

Conclusion

Sur la base des résultats des tests réels et du comparatif des fonctionnalités, nous recommandons Bunny CDN pour sa facilité d'utilisation, sa performance, sa sécurité avancée et son tarif avantageux.

Ses concurrents représentent également d’excellentes options, particulièrement pour des projets nécessitant une ou des fonctionnalités particulières proposées ou une sécurité de niveau supérieur.

En conclusion, le choix d'un CDN d'images doit être guidé par une évaluation approfondie des besoins spécifiques au projet. Ceci, en prenant en considération les résultats de tests effectués et les comparatifs de fonctionnalités.