我的书签
添加书签
移除书签Features (3)·续2
quality=50
quality=low
q=50
cf: {image: {quality: 50}}
cf: {image: {quality: "high"}}
rotate
Rotates an image by a number of degrees. Accepts 90, 180, or 270. The default is 0 (no rotation).
Rotation is performed before resizing; width and height options will refer to the axes after the image is rotated.
 |
|
|---|---|
| Original | rotate=180 |
rotate=90
cf: {image: {rotate: 90}}
saturation
Adjusts the color saturation of an image using a multiplier.
0— Completely desaturates the image (grayscale).< 1.0— Reduces color intensity. For example,0.5is half as saturated.1(default) — No change to the original saturation.> 1.0— Increases color intensity. For example,2is twice as saturated.
|
|
|
|---|---|---|
| Original | saturation=0 |
saturation=2 |
saturation=0.5
cf: {image: {saturation: 0.5}}
segment
Automatically isolates the subject of an image by replacing the background with transparent pixels. Accepts foreground. The default is none.
This feature uses an open-source model called BiRefNet through Workers AI. Read more about Cloudflare's approach to responsible AI ↗︎.
Pricing
Parameters that use AI inference are billed as standard Images transformations. Each unique request counts toward your Images Transformed usage. There is no additional charge from Workers AI or separate Neuron billing for these parameters.
|
|
|---|---|
| Original | segment=foreground |
segment=foreground
cf: {image: {segment: "foreground"}}
sharpen
Applies a sharpening filter to enhance edge definition in an image. Accepts a decimal value from 0 (no sharpening) to 10 (maximum sharpening). The default is 0. The recommended value for downscaled images is 1.
|
|
|---|---|
| Original | sharpen=5 |
sharpen=2
cf: {image: {sharpen: 2}}
slow-connection-quality | scq
Overrides the quality value whenever a slow connection is detected. Accepts the same fixed or perceptual settings as quality. The default is none.
Note
This feature is available only when optimizing through the URL interface on Chromium-based browsers such as Chrome, Edge, and Opera.
To detect slow connections, enable any of the following client hints via HTTP in a header:
accept-ch: rtt, save-data, ect, downlink
slow-connection-quality applies when the client hint is present and any of the following conditions are met:
- rtt ↗︎: Greater than 150ms.
- save-data ↗︎: Value is "on".
- ect ↗︎: Value is one of
slow-2g|2g|3g. - downlink ↗︎: Less than 5Mbps.
slow-connection-quality=50
scq=50
trim
Removes pixels around the sides of an image.
This feature can be used to trim an image by its border colors or by a specified number of pixels from its side(s).
Trim takes into account the dpr parameter and is performed before resizing and rotation.
border
Automatically trims the sides of the image based on its border color.
The trim=border option can be further adjusted using the following parameters:
trim.border.color— Selects the border color to trim. Accepts any CSS color using CSS4 modern syntax. If omitted, the color is detected automatically.trim.border.tolerance— Sets how closely the detected pixels must match in color. Accepts an integer between0(doesn't need to match) and 255 (must match exactly).trim.border.keep— Specifies the number of pixels of the original border to leave untrimmed.
top;right;bottom;left
Specifies the number of pixels to remove from the sides of an image. Accepts four values, separated by a semicolon, to set the trim on all four sides of an image at once.
All trim values accept either an integer (pixel count) or a decimal between 0 and 1 representing a fraction of the image dimension. For example, 0.25 trims 25% from that side.
Trim can also be applied to a specific side using the following parameters:
trim.top— Removes pixels from the top of the image.trim.left— Removes pixels from the left of the image.trim.height— Sets the height of the image from the top edge, then trims everything below.trim.width— Sets the width of the image from the left edge, then trims everything to the right.
trim=border
trim.height=800
// This sets the height of the image to 800 pixels from the top of the image, then trims everything below that point
trim.left=800
// This removes 800 pixels from the left of the image
trim=0.1;0.2;0.1;0.2
// This trims 10% from the top and bottom, and 20% from the left and right
trim.top=0.25
// This trims 25% of the image height from the top
cf: {image: {trim: {top: 12, right: 78, bottom: 34, left: 56, width: 678, height: 678}}}
// Using decimals to trim 10% from each side:
cf: {image: {trim: {top: 0.1, right: 0.1, bottom: 0.1, left: 0.1}}}
upscale
Controls the algorithm used when an image needs to be enlarged. This parameter works with any fit mode that upscales, such as contain, cover, and scale-up. It has no effect when fit=scale-down or when the target dimensions are smaller than the source.
Accepts the following values:
interpolate(default) — Uses bicubic interpolation, which may reduce image quality. This is the default behavior whenupscaleis not specified.generate— Uses AI upscaling (ESRGAN ↗︎) to produce sharper, more detailed results when enlarging images.
When upscale=generate is specified, the AI model runs a single pass at the nearest supported scale (2x or 4x), then adjusts to the exact target dimensions. Scale factors beyond 4x are handled with AI upscaling to 4x, then bicubic interpolation for the remainder.
Note
upscale=generate has higher latency than upscale=interpolate due to GPU inference. Results are cached following the same caching rules as other optimizations.
upscale=generate
cf: {image: {upscale: "generate"}}
width | w
Sets the width of the output image in pixels using a positive integer value. By default, Cloudflare uses the original width of the input image.
When width is set, the exact behavior depends on the fit parameter.
Accepts the following values:
- A number in pixels (for example,
250). auto— Automatically serves the image in the most optimal width based on available information about the browser and device. Acceptswbreakpoints(client hints),wmobile(user-agent detection), andwdesktop(user-agent detection) as sub-parameters.
width=250
w=250
cf: {image: {width: 250}}
width=auto sub-parameters
When width=auto is specified, Cloudflare resizes the image using information from client hints (sent by the browser) or by user-agent detection as a fallback.
You can customize the width=auto behavior with the following sub-parameters:
| Sub-parameter | Description | Default |
|---|---|---|
wbreakpoints |
Override default breakpoint widths, in pixels (client hints) | 320;768;960;1200 |
wmobile |
Override default width, in pixels, for mobile devices (user-agent detection) | 768 |
wdesktop |
Override default width, in pixels, for desktop devices (user-agent detection) | 1200 |
When optimizing remote images with width=auto, each unique width counts as a separate billable transformation.
To learn how width=auto works, refer to our guide on serving responsive images.
wbreakpoints=320;768;960;1920 // Changes the largest breakpoint to 1920 pixels
wbreakpoints=320;768;960;1200;1920 // Adds another breakpoint at 1920 pixels
cf: {image: {wbreakpoints: "320;768;960;1920"}}
zoom | face-zoom
Specifies how closely the image is cropped toward detected faces when combined with the gravity=face option. Accepts a valid range between 0.0 (includes as much of the background as possible) and 1.0 (crops the image as closely to the face as possible). The default is 0.
zoom=0.1
cf: {image: {zoom: 0.5}}
Recommended image sizes
Ideally, image sizes should match the exact size that 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.
To serve responsive images, you can use the HTML srcset attribute to let the provider pick the most optimal size. If you can't use the <img srcset> markup and have to hardcode specific maximum sizes, Cloudflare recommends the following sizes:
- Maximum of 1920 pixels for desktop browsers.
- Maximum of 960 pixels for tablets.
- Maximum of 640 pixels for mobile phones.
For example, fit=scale-down,width=1920 sets a maximum size of 1920px and ensures that the image will not be enlarged unnecessarily.
You can detect device type by enabling the CF-Device-Type header via Cache Rule.
Caching
When you optimize with Images, the original image will 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.
If Custom Cache Keys are used for the origin image, the origin image might not be cached and might result in more calls to the origin.
Optimized images follow the same caching rules as the original image they were resized from, except the minimum cache time is one hour. If you need images to be updated more frequently, add must-revalidate to the Cache-Control header. The Images service supports cache revalidation, so we recommend serving images with the Etag header. Refer to the Cache docs for more information.
Cloudflare does not support purging optimized images individually. URLs starting with /cdn-cgi/ cannot be purged. However, purging of the original image's URL will also purge all of its optimized versions.
Was this helpful?
YesNo
On this page
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/images/optimization/features/#page","headline":"Features","description":"Available Cloudflare Images optimization parameters for resizing, cropping, format conversion, and visual effects.","url":"https://developers.cloudflare.com/images/optimization/features/","inLanguage":"en","image":"https://developers.cloudflare.com/images/optimization/features/og.png?v=7aaa5e60f3daf043","dateModified":"2026-06-16","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
description: Add a blur effect to Cloudflare Images variants using the dashboard or flexible variants API. title: Apply blur image: https://developers.cloudflare.com/images/optimization/hosted-images/blur-variants/og.png?v=bf22f95eb4454758
Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/images/llms.txt
Use this file to discover all available pages before exploring further.
