Optimiser les images avec un CDN d’images

Les images représentent souvent la plus grande part du poids d’une page. Les optimiser manuellement, format par format et taille par taille, devient vite ingérable dès qu’un site grandit. Un réseau de diffusion de contenu spécialisé dans les images, ou CDN d’images, automatise ce travail : il transforme, optimise et diffuse chaque image à la volée, généralement mieux qu’un script d’optimisation exécuté à la compilation.

Pour le SEO, l’enjeu est considérable. Passer à un CDN d’images peut réduire le poids des fichiers de 40 à 80 %, ce qui accélère le chargement et améliore directement le Largest Contentful Paint, un des trois Core Web Vitals. Des pages plus légères se chargent plus vite, sur mobile comme sur les réseaux contraints.

Un CDN d’images se comporte comme une API d’accès et de manipulation de vos visuels. L’URL de l’image n’indique plus seulement le fichier à charger, mais aussi des paramètres comme la taille, le format et la qualité. À partir d’une même image source, vous générez ainsi autant de variantes que de cas d’usage, sans gérer vous-même les fichiers intermédiaires.

C’est la différence majeure avec un script de compilation : le CDN crée les versions au moment où elles sont demandées. Il est donc bien plus adapté pour servir des images fortement personnalisées selon l’appareil, la résolution ou le navigateur de chaque visiteur.

Les URL servies par un CDN d’images suivent toutes une logique proche, même si la syntaxe varie d’un fournisseur à l’autre. Comprendre leurs composantes aide à piloter les optimisations et à sécuriser vos variantes.

Pour les transformations liées à la performance, il existe presque toujours un réglage objectivement optimal. De nombreux CDN proposent donc un mode automatique : plutôt que d’imposer le format WebP, vous laissez le CDN choisir et diffuser le meilleur format pour chaque visiteur. Il peut ainsi servir de l’AVIF à Chrome, du WebP à Edge et du JPEG à un très ancien navigateur.

Pour décider, le CDN s’appuie sur plusieurs signaux : les Client Hints (largeur du viewport, densité de pixels, largeur d’image), l’en-tête Save-Data, l’en-tête User-Agent ou encore l’API Network Information. L’avantage est net : vous profitez de l’expertise du CDN sans modifier votre code à chaque nouvelle technologie d’image ; pour aller plus loin, voyez comment automatiser la compression.

Il existe deux grandes familles de solutions. Les CDN autogérés conviennent aux équipes à l’aise avec l’hébergement de leur propre infrastructure : Thumbor en est le plus répandu, open source et gratuit, mais avec moins de fonctionnalités et une documentation limitée. Les CDN tiers fournissent le service clé en main, tarifé à l’usage, souvent avec un palier gratuit ou un essai pour tester le produit.

Au-delà des fonctionnalités, comparez le coût, la qualité de l’assistance, la documentation et la facilité de configuration ou de migration. Toutes les bonnes solutions vous feront économiser des octets ; pour ajuster finement vos réglages, voyez aussi comment choisir le niveau de compression, le choix dépendant surtout de vos contraintes techniques et de votre budget.