Optimize and Transform Images with Cloudflare Images (2026)

Cloudflare Images doesn’t actually store your images; it relies on a separate origin server to fetch them.

Let’s see this in action. Imagine you have an image hosted on a simple web server at https://my-origin-server.com/images/photo.jpg. When you configure Cloudflare Images, you point it to this origin.

Now, when a user requests https://your-cloudflare-domain.com/cdn-cgi/imgo/photo.jpg, Cloudflare intercepts it. It checks its cache. If it’s not there, Cloudflare goes to https://my-origin-server.com/images/photo.jpg, retrieves the image, and then applies any transformations you’ve requested before serving it to the user and caching it.

The core problem Cloudflare Images solves is efficiently delivering and transforming images at the edge, closer to your users. Instead of every user fetching the original, potentially large, image from your origin and then you having to resize, crop, or reformat it on your server (or client-side), Cloudflare does it all. This drastically reduces latency and bandwidth for your origin.

Here’s how it works internally:

Upload/Ingest: You upload images to Cloudflare Images, or you configure it to pull from an existing origin. When you upload, Cloudflare stores a reference to the image and its original version.
Delivery URL: Cloudflare provides a unique URL for each image, typically in the format https://your-cloudflare-domain.com/cdn-cgi/imgo/{image-id}.
Transformation Parameters: You append transformation parameters to this URL. For example, to resize photo.jpg to 300 pixels wide and convert it to WebP format, you’d use https://your-cloudflare-domain.com/cdn-cgi/imgo/photo.jpg?width=300&format=webp.
Edge Processing: When a user requests this transformed URL, Cloudflare’s edge servers check their cache.
Origin Fetch (if uncached): If the image (and its transformation) isn’t cached, Cloudflare fetches the original image from your configured origin server.
On-the-fly Transformation: The image is transformed at the edge according to the URL parameters. This includes resizing, cropping, format conversion, quality adjustments, and even applying watermarks.
Caching: The transformed image is then served to the user and cached on the edge server for subsequent requests.

The exact levers you control are primarily through the URL parameters. You can specify:

width and height: To resize the image. width=500 will resize to 500px wide, maintaining aspect ratio. height=300 will resize to 300px tall, maintaining aspect ratio. width=500,height=300 will resize to fit within those dimensions, potentially letterboxing or cropping depending on other parameters.
fit: Controls how resizing occurs when both width and height are specified. fit=cover (default) will fill the dimensions, cropping if necessary. fit=contain will ensure the entire image is visible within the dimensions, adding letterboxing. fit=fill will stretch the image to fill the dimensions, ignoring aspect ratio. fit=scale-down will resize only if the image is larger than the specified dimensions.
gravity: Used with fit=cover or fit=contain to determine the cropping point. gravity=auto (default) uses smart cropping. Other options include top, bottom, left, right, center, and combinations like north-east.
quality: For lossy formats like JPEG and WebP, this sets the compression level (1-100). quality=80 is a common sweet spot.
format: To convert the image to a different format. format=webp, format=avif, format=jpeg, format=png, format=gif, format=original. Cloudflare will automatically pick the best format for the browser if you omit this and use accept: image/avif,image/webp headers.
blur: Applies a Gaussian blur. blur=5.
rotate: Rotates the image. rotate=90.
background: Sets a background color for transparency or letterboxing, e.g., background=000000 for black.
watermark: Applies a watermark image from your Cloudflare Images account.

The most surprising true thing about Cloudflare Images is that it doesn’t always fetch from your origin for every request, even the first one. If you use the "Direct Upload" method and upload images directly to Cloudflare Images, the original image is stored within Cloudflare’s infrastructure. When you then request a transformed version, Cloudflare processes that internally stored original. It’s only when you use the "Image Optimization" feature and point it to an external origin URL that Cloudflare acts as a proxy and transformer for images residing elsewhere.

The next concept you’ll likely explore is managing your image library, including uploading, deleting, and organizing images within Cloudflare Images itself.