Si Cloudflare Images est l’endroit où vivent vos images, les Cloudflare Image Transformations sont le moteur qui les rend rapides. Elles redimensionnent, compressent et convertissent vos images vers des formats modernes au moment où elles sont demandées, en utilisant uniquement l’original que vous possédez déjà. Aucune étape de build, aucune vignette pré-générée, aucune copie séparée qui encombre votre stockage. Vous demandez la taille et le format souhaités dans l’URL, et Cloudflare les produit à la périphérie et les met en cache.
Ce guide est le complément pratique de ma présentation de l’hébergement d’images sur Cloudflare. Il explique les deux façons d’exécuter des transformations, les paramètres qui comptent, ce que cela coûte en 2026, et comment automatiser le tout sur WordPress et PrestaShop.
En résumé
- Les transformations redimensionnent, compressent et convertissent les images en WebP/AVIF à la demande à partir d’un seul original
- Deux méthodes : un simple format d’URL (
/cdn-cgi/image/...) et un Cloudflare Worker pour un contrôle total format=autosert automatiquement AVIF ou WebP selon ce que le navigateur prend en charge- Les tarifs sont généreux : les 5 000 premières transformations uniques par mois sont gratuites, puis 0,50 $ par 1 000
- Les transformations ne nécessitent plus de forfait Pro, un changement notable par rapport aux années précédentes
- Vous pouvez transformer des images depuis votre origine ou depuis Cloudflare R2 , et tout automatiser avec mon plugin et mon Worker gratuits
Comment fonctionnent les Cloudflare Image Transformations
Traditionnellement, servir des images responsives signifiait générer chaque taille à l’avance. Vous téléversez une photo, et votre CMS crée une vignette, une version moyenne, une version grande, et ainsi de suite, chacune stockée comme un fichier séparé. Cela gaspille du stockage, ralentit les téléversements, et ne correspond pourtant jamais tout à fait à la taille exacte dont un appareil donné a besoin.
Les Image Transformations inversent cela. Vous stockez un original. Lorsque le navigateur d’un visiteur demande une taille précise, Cloudflare génère cette taille à la volée, l’optimise et met le résultat en cache à la périphérie. Le visiteur suivant qui a besoin de la même version obtient instantanément la copie en cache. Vous ne générez ni ne stockez jamais vous-même un dérivé, et pourtant chaque appareil reçoit une image adaptée à son écran et à sa prise en charge des formats.
Le résultat pour vos visiteurs : une photo de 1 Mo arrive sous forme d’un AVIF de 100 à 200 Ko, dimensionné exactement pour leur fenêtre d’affichage, livré depuis un emplacement de périphérie proche.
Méthode 1 : Image Transformations via le format d’URL
La façon la plus simple de transformer une image consiste à envelopper son URL dans un chemin spécial sur votre propre zone :
1https://example.com/cdn-cgi/image/<options>/<source-image-url>
Un exemple réel qui redimensionne à 800 px de large, fixe la qualité à 75 et sélectionne automatiquement le meilleur format :
1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg
Pour l’utiliser, activez Transformations pour votre zone dans le tableau de bord Cloudflare (sous Images). Une fois activée, toute image de cette zone peut être transformée simplement en construisant l’URL. C’est le démarrage le plus rapide et cela ne nécessite aucun code.
Les options les plus utiles sont :
| Option | Ce qu’elle fait |
|---|---|
width, height | Dimensions cibles en pixels |
fit | Comment s’ajuster au cadre : scale-down, contain, cover, crop, pad |
quality | Niveau de compression, 1 à 100 (75 est une valeur par défaut judicieuse) |
format=auto | Sert AVIF/WebP si pris en charge, sinon le format original |
gravity | Point focal lors du recadrage (p. ex. auto, face ou des coordonnées) |
dpr | Ratio de pixels de l’appareil pour les écrans Retina |
sharpen, blur | Effets de post-traitement optionnels |
Méthode 2 : Image Transformations via un Cloudflare Worker
Pour un vrai contrôle, vous transformez à l’intérieur d’un Cloudflare Worker
en utilisant la propriété cf.image sur une requête fetch. Cela vous permet d’appliquer une logique : choisir les dimensions selon l’appareil, restreindre quelles images peuvent être transformées, ou réécrire les liens d’images de toute une page.
1export default {
2 async fetch(request) {
3 const options = {
4 cf: {
5 image: {
6 width: 800,
7 quality: 75,
8 format: "auto",
9 fit: "scale-down",
10 },
11 },
12 };
13
14 // The image you want to transform
15 const imageURL = "https://example.com/uploads/photo.jpg";
16 return fetch(imageURL, options);
17 },
18};
L’approche par Worker est celle qui alimente mes propres outils, car elle peut réécrire la sortie HTML finale d’un site, y compris les images injectées par les thèmes, les plugins et même le CSS en ligne, qu’une approche par URL seule ne peut pas atteindre. Si vous souhaitez apprendre les Workers plus largement, la documentation officielle des Workers est un excellent point de départ.
Transformer des images depuis R2 ou une source distante
Vous n’êtes pas limité aux images de la même zone. Les transformations peuvent récupérer depuis une origine distante, ce qui en fait un partenaire parfait pour le stockage d’objets Cloudflare R2 . Conservez vos originaux dans un bucket R2, transformez-les à la livraison, et ne payez rien pour l’egress car R2 ne facture pas de frais d’egress. Je traite ce schéma précis en détail dans mon guide sur l’hébergement d’images sur Cloudflare R2 .
Lorsque vous transformez des images qui ne sont pas sur votre propre zone, pensez à autoriser le domaine source dans vos paramètres de transformation, sinon Cloudflare refusera de les récupérer.
Tarifs des Cloudflare Image Transformations
L’économie est ici favorable, surtout pour les petits et moyens sites. D’après les tarifs officiels d’Images pour 2026 :
| Palier | Coût |
|---|---|
| 5 000 premières transformations uniques / mois | Gratuit |
| Au-delà de 5 000 | 0,50 $ pour 1 000 transformations uniques |
| Bande passante d’egress | 0 $ (gratuit) |
Une « transformation unique » est une combinaison distincte d’options appliquée à une image originale en un mois. Demander mille fois la même version width=800,format=auto d’une photo compte toujours comme une seule transformation unique, car les 999 autres sont servies depuis le cache. C’est pourquoi le nombre réel de transformations reste faible même sur des sites très fréquentés : vous avez bien moins de combinaisons image-et-taille distinctes que de pages vues.
Le grand changement qui mérite d’être répété : les transformations étaient autrefois derrière un forfait Pro payant. Elles sont désormais disponibles sur le forfait gratuit, jusqu’à ce quota mensuel de 5 000. Pour un petit blog ou un portfolio, l’optimisation d’images à la volée est désormais effectivement gratuite.
Automatiser sur WordPress et PrestaShop
Construire des URL de transformation à la main convient pour quelques images, mais un vrai site en a des centaines, générées dynamiquement. C’est la partie difficile, et c’est exactement ce que résolvent mes outils gratuits.
- Plugin WordPress. Mon plugin Cloudflare Image Resizing (GitHub ) réécrit vos liens d’images pour qu’ils passent automatiquement par les transformations.
- Cloudflare Worker. Mon Cloudflare Image Resizing Worker réécrit le HTML final pour une couverture complète, y compris les images injectées par les plugins et les thèmes et les images référencées dans le CSS.
Pour des tutoriels complets à copier-coller, lisez Cloudflare Image Resizing pour WordPress et Cloudflare Image Resizing pour PrestaShop . Entre le plugin et le Worker, chaque image de votre site finit optimisée sans que vous touchiez le moindre template.
Si vous préférez stocker et gérer votre bibliothèque d’images directement via le produit Cloudflare Images, Easy Cloudflare Images est mon application de bureau gratuite pour téléverser et optimiser des images sous Windows, macOS et Linux.
Un rapide test avant/après
La façon honnête de juger une optimisation, c’est de la mesurer.
- Choisissez une page riche en images et passez-la dans PageSpeed Insights . Notez le Largest Contentful Paint et le poids total des images.
- Activez les transformations et appliquez
widthetformat=autoaux images de cette page (via la méthode URL, le Worker ou mon plugin). - Relancez le test. Vous devriez voir la charge utile des images chuter fortement et le LCP s’améliorer, faisant souvent passer un score en échec vers le vert.
Cette amélioration mesurable est ce qui tend à faire bouger les choses tant pour l’expérience utilisateur que pour le classement dans les recherches.
Points clés à retenir
- Les Cloudflare Image Transformations génèrent à la demande des images optimisées et correctement dimensionnées à partir d’un seul original
- La méthode URL (
/cdn-cgi/image/...) est le démarrage le plus rapide ; un Worker vous donne un contrôle programmatique complet format=autogère pour vous la négociation AVIF/WebP, avec un repli sûr pour les navigateurs plus anciens- Les 5 000 premières transformations uniques par mois sont gratuites, puis 0,50 $ par 1 000, sans frais d’egress
- Les transformations fonctionnent désormais sur le forfait gratuit, sans abonnement Pro requis
- Associez les transformations à R2 pour une bibliothèque média sans egress, et automatisez tout avec mon plugin et mon Worker
Foire aux questions
Quelle est la différence entre Cloudflare Images et Image Transformations ? Cloudflare Images est le produit plus large qui stocke, optimise et livre les images. Image Transformations est la fonction de redimensionnement et d’optimisation qu’il contient. Vous pouvez utiliser les transformations sur des images stockées dans Cloudflare Images, dans R2 ou sur votre propre origine, sans nécessairement les stocker dans le produit Images.
Ai-je besoin d’un forfait payant pour utiliser les transformations d’images ? Non, plus maintenant. Les transformations sont disponibles sur le forfait gratuit jusqu’à 5 000 transformations uniques par mois. Au-delà, vous payez 0,50 $ par 1 000, et il n’y a aucuns frais d’egress.
Que fait format=auto ? Il indique à Cloudflare d’inspecter l’en-tête Accept du navigateur et de servir le format le plus efficace qu’il prend en charge, généralement AVIF ou WebP, et de revenir au format original (comme JPEG ou PNG) pour les navigateurs qui ne prennent pas en charge les formats modernes.
Puis-je transformer des images qui ne sont pas hébergées sur Cloudflare ? Oui. Les transformations peuvent récupérer depuis une origine distante, y compris un bucket Cloudflare R2 ou un serveur externe, tant que vous autorisez cette source dans vos paramètres de transformation.
Qu’est-ce qui compte comme une transformation unique pour la facturation ? Une combinaison distincte d’options appliquée à une image originale au cours d’un mois de facturation. Les requêtes répétées pour la même version transformée sont servies depuis le cache et comptées une seule fois, ce qui maintient les coûts réels bas.
Comment appliquer cela à tout un site WordPress ou PrestaShop ? Utilisez mon plugin WordPress gratuit pour une configuration automatisée rapide, ou déployez mon Cloudflare Worker pour une couverture complète qui réécrit chaque lien d’image, y compris ceux dans le CSS. Les deux sont documentés dans mes guides de plateforme étape par étape.
Commentaires