If Cloudflare Images is where your images live, Cloudflare Image Transformations is the engine that makes them fast. It resizes, compresses and converts your images to modern formats at the moment they are requested, using only the original you already have. No build step, no pre-generated thumbnails, no separate copies cluttering your storage. You ask for the size and format you want in the URL, and Cloudflare produces it at the edge and caches it.
This guide is the practical companion to my overview of hosting images on Cloudflare. It explains the two ways to run transformations, the parameters that matter, what it costs in 2026, and how to automate the whole thing on WordPress and PrestaShop.
TL;DR
- Transformations resize, compress and convert images to WebP/AVIF on demand from a single original
- Two methods: a simple URL format (
/cdn-cgi/image/...) and a Cloudflare Worker for full control format=autoserves AVIF or WebP automatically based on what the browser supports- Pricing is generous: the first 5,000 unique transformations per month are free, then $0.50 per 1,000
- Transformations no longer require a Pro plan, a meaningful change from previous years
- You can transform images from your origin or from Cloudflare R2 , and automate it all with my free plugin and Worker
How Cloudflare Image Transformations Work
Traditionally, serving responsive images meant generating every size in advance. Upload a photo, and your CMS would create a thumbnail, a medium version, a large version and so on, each stored as a separate file. This wastes storage, slows uploads, and still never quite matches the exact size a given device needs.
Image transformations flip this around. You store one original. When a visitor’s browser requests a specific size, Cloudflare generates that size on the fly, optimises it, and caches the result at the edge. The next visitor who needs the same version gets the cached copy instantly. You never generate or store a derivative yourself, yet every device receives an image tailored to its screen and format support.
The result for your visitors: a 1 MB photo arrives as a 100 to 200 KB AVIF, sized exactly for their viewport, delivered from a nearby edge location.
Method 1: Image Transformations via the URL Format
The simplest way to transform an image is to wrap its URL in a special path on your own zone:
1https://example.com/cdn-cgi/image/<options>/<source-image-url>
A real example that resizes to 800px wide, sets quality to 75 and auto-selects the best format:
1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg
To use this, enable Transformations for your zone in the Cloudflare dashboard (under Images). Once enabled, any image on that zone can be transformed simply by constructing the URL. It is the fastest way to get started and requires no code.
The most useful options are:
| Option | What it does |
|---|---|
width, height | Target dimensions in pixels |
fit | How to fit the box: scale-down, contain, cover, crop, pad |
quality | Compression level, 1 to 100 (75 is a sensible default) |
format=auto | Serves AVIF/WebP when supported, else the original format |
gravity | Focal point when cropping (e.g. auto, face, or coordinates) |
dpr | Device pixel ratio for retina displays |
sharpen, blur | Optional post-processing effects |
Method 2: Image Transformations via a Cloudflare Worker
For real control, you transform inside a Cloudflare Worker
using the cf.image property on a fetch request. This lets you apply logic: choose dimensions based on the device, restrict which images can be transformed, or rewrite an entire page’s image links.
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};
The Worker approach is what powers my own tooling, because it can rewrite the final HTML output of a site, including images injected by themes, plugins, and even inline CSS, which a URL-only approach cannot reach on its own. If you want to learn Workers more broadly, the official Workers docs are an excellent starting point.
Transforming Images From R2 or a Remote Source
You are not limited to images on the same zone. Transformations can pull from a remote origin, which makes them a perfect partner for Cloudflare R2 object storage. Keep your originals in an R2 bucket, transform them on delivery, and pay nothing for egress because R2 does not charge egress fees. I cover this specific pattern in detail in my guide to hosting images on Cloudflare R2 .
When transforming images that are not on your own zone, remember to allow the source domain in your transformation settings, otherwise Cloudflare will refuse to fetch them.
Cloudflare Image Transformations Pricing
The economics here are friendly, especially for small and medium sites. Based on the official Images pricing for 2026:
| Tier | Cost |
|---|---|
| First 5,000 unique transformations / month | Free |
| Beyond 5,000 | $0.50 per 1,000 unique transformations |
| Egress bandwidth | $0 (free) |
A “unique transformation” is one distinct combination of options applied to one original image in a month. Requesting the same width=800,format=auto version of a photo a thousand times still counts as a single unique transformation, because the other 999 are served from cache. This is why real-world transformation counts stay low even on busy sites: you have far fewer distinct image-and-size combinations than you have page views.
The big change worth repeating: transformations used to sit behind a paid Pro plan. They are now available on the free plan, up to that 5,000 monthly allowance. For a small blog or portfolio, on-the-fly image optimisation is now effectively free.
Automating It on WordPress and PrestaShop
Constructing transformation URLs by hand is fine for a few images, but a real site has hundreds, and they are generated dynamically. That is the hard part, and it is exactly what my free tools solve.
- WordPress plugin. My Cloudflare Image Resizing plugin (GitHub ) rewrites your image links to pass through transformations automatically.
- Cloudflare Worker. My Cloudflare Image Resizing Worker rewrites the final HTML for full coverage, including images that plugins and themes inject and images referenced inside CSS.
For complete, copy-paste walkthroughs, read Cloudflare Image Resizing for WordPress and Cloudflare Image Resizing for PrestaShop . Between the plugin and the Worker, every image on your site ends up optimised without you touching a single template.
If you prefer storing and managing your image library through the Cloudflare Images product directly, Easy Cloudflare Images is my free desktop app for uploading and optimising images across Windows, macOS and Linux.
A Quick Before-and-After Test
The honest way to judge any optimisation is to measure it.
- Pick an image-heavy page and run it through PageSpeed Insights . Note the Largest Contentful Paint and total image weight.
- Enable transformations and apply
widthandformat=autoto that page’s images (via the URL method, the Worker, or my plugin). - Re-run the test. You should see image payload drop sharply and LCP improve, often moving a failing score into the green.
That measurable improvement is what tends to move the needle on both user experience and search rankings.
Key Takeaways
- Cloudflare Image Transformations generate optimised, correctly sized images on demand from a single original
- The URL method (
/cdn-cgi/image/...) is the quickest start; a Worker gives you full programmatic control format=autohandles AVIF/WebP negotiation for you, with a safe fallback for older browsers- The first 5,000 unique transformations per month are free, then $0.50 per 1,000, with no egress fees
- Transformations now work on the free plan, no Pro subscription required
- Pair transformations with R2 for a zero-egress media library, and automate everything with my plugin and Worker
Frequently Asked Questions
What is the difference between Cloudflare Images and Image Transformations? Cloudflare Images is the broader product that stores, optimises and delivers images. Image Transformations is the resizing-and-optimising capability within it. You can use transformations on images stored in Cloudflare Images, in R2, or on your own origin, without necessarily storing them in the Images product.
Do I need a paid plan to use image transformations? No, not anymore. Transformations are available on the free plan up to 5,000 unique transformations per month. Beyond that, you pay $0.50 per 1,000, and there are no egress fees.
What does format=auto do? It tells Cloudflare to inspect the browser’s Accept header and serve the most efficient format it supports, usually AVIF or WebP, and fall back to the original format (such as JPEG or PNG) for browsers that do not support modern formats.
Can I transform images that are not hosted on Cloudflare? Yes. Transformations can fetch from a remote origin, including a Cloudflare R2 bucket or an external server, as long as you allow that source in your transformation settings.
What counts as a unique transformation for billing? One distinct combination of options applied to one original image within a billing month. Repeated requests for the same transformed version are served from cache and counted only once, which keeps real-world costs low.
How do I apply this across a whole WordPress or PrestaShop site? Use my free WordPress plugin for a quick automated setup, or deploy my Cloudflare Worker for complete coverage that rewrites every image link, including those in CSS. Both are documented in my step-by-step platform guides.
Comments