You can transform images on Cloudflare's edge platform. You can resize, adjust quality, and convert images to WebP format on demand. We will automatically cache every derived image at the edge, so you only need to store one original image at your origin. This way you can quickly and easily adapt images to your site's layout and your visitors' screen sizes without maintaining a server-side image processing pipeline on your servers.
Image processing integrates well with Workers, which enables advanced integrations, such as custom URL schemes, content negotiation and responsive images based on Client Hints.
Image Resizing is available today for Business and Enterprise Customers. To enable it, login to the Cloudflare Dashboard and navigate to the Speed Tab. There you’ll find the section for Image Resizing which you can enable with one click.
There are two ways to use image resizing: via pre-defined URL format (described below) or via Workers that handle advanced use-cases.
You can convert and resize images by requesting them via a specially-formatted URL. This way you don't need to write any code, only change HTML markup of your website to use the new URLs. The format is:
http://), pointing to an image to resize. The path is not URL-encoded, so the resizing URL can be safely constructed by concatenating
/cdn-cgi/image/optionsand the original image URL, e.g.
At least one option must be specified. Options are comma-separated (spaces are not allowed anywhere). Names of options can be specified in full or abbreviated.
fitmode (described below).
fitmode (described below).
1. Multiplier for
heightthat makes it easier to specify higher-DPI sizes in
height. All resizing modes preserve aspect ratio. Available modes are:
fit=scale-downThe image will be shrunk in size to fully fit within the given
height, but won't be enlarged.
fit=containThe image will be resized (shrunk or enlarged) to be as large as possible within the given
heightwhile preserving the aspect ratio.
fit=coverThe image will be resized to exactly fill the entire area specified by
height, and will cropped if necessary.
fit=cropThe image will shrunk and cropped to fit within the area specified by
height. The image won't be enlarged. For images smaller than the given dimensions it's the same as
scale-down. For images larger than the given dimensions, it's the same as
fit=padThe image will be resized (shrunk or enlarged) to be as large as possible within the given
heightwhile preserving the aspect ratio, and the extra area will be filled with a
backgroundcolor (white by default). Transparent background may be very expensive, and it's better to use
object-fit: containproperty instead.
fit=cover, specifies the most important side or point in the image that shouldn't be cropped off. It can be either a side
bottomor coordinates specified on a scale from
0.0(top or left) to
1.0(bottom or right),
0.5being the center. The X and Y coordinates are separated by lowercase
0x1means left and bottom,
0.5x0.5is the center,
0.5x0.33is a point in the top third of the image.
metadata=keepPreserve most of the image metadata (including GPS location) when possible.
metadata=copyrightDiscard all metadata except EXIF copyright tag. This is the default for JPEG images.
metadata=noneDiscard all invisible metadata.
The service generates JPEG and PNG images, and optionally WebP. It can save animations as GIF or animated WebP.
The service can read JPEG, PNG, GIF (including animations), and WebP images.
The service supports ICC color profiles in JPEG and PNG images. Metadata of PNG and WebP images is not preserved.
Ideally, images sizes should match exactly the size they are displayed on the page. If the page contains thumbnails with markup such as
<img width="200" …>, then images should be resized to
width=200. If the exact size is not known ahead of time, use responsive images technique.
If you can't use the
<img srcset> markup, and have to hardcode specific maximum sizes, we recommend:
fit=scale-down option ensures that the image won't be enlarged unnecessarily.
You can detect device type using
CF-Device-Type header enabled via Page Rule.
Polish won't be applied to URLs using image resizing. Resized images already have lossy compression applied where possible, so they don't need optimizations provided by Polish.
Resizing causes the original image to be fetched from the origin server and cached (following the usual rules of HTTP caching,
Cache-Control header, etc.). Requests for multiple different image sizes are likely to reuse the cached original image, without causing extra transfers from the origin server.
Resized images follow the same caching rules as the original image they were resized from (i.e. the
Cache-Control header is from the original to the resized image). We do not support purging of resized variants individually, but purging of the original image URL will also purge all of its resized variants.