---
title: Create transformation flows
description: Flows let you automatically apply image optimization to requests on your zone.
image: https://developers.cloudflare.com/dev-products-preview.png
---

> 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.

[Skip to content](#%5Ftop) 

# Create transformation flows

Define automated rules to optimize remote images without writing any code or changing your existing URLs.

Flows let you automatically apply image optimization to requests on your zone.

Each flow pairs a set of conditional triggers (for example, image is a JPEG or PNG) with optimization parameters (for example, transcode to AVIF).

When an image request matches a flow, Cloudflare transparently rewrites it through the Images service and serves the optimized result.

## Types of flows

You can use pre-built flows to handle migrations from other image optimization services (like Fastly) or create your own custom flows.

A **provider flow** is a translation layer that maps image URLs from another image optimization service to Cloudflare. Your existing URLs — including provider-specific parameters — continue to work without any changes.

Currently, Cloudflare supports flows for Fastly Image Optimizer. When enabled, Cloudflare automatically translates Fastly's parameters to their Cloudflare equivalents. For example:

* Fastly's `brightness` parameter accepts a range from `-100` to `100`, while Cloudflare's `brightness` works as a multiplier. The value is scaled accordingly.
* Fastly's `orient` parameter is mapped to Cloudflare's `flip` and `rotate` parameters.

A **custom flow** lets you define your own conditions and actions for image optimization.

This is well-suited for situations where you want to optimize your images broadly and consistently, such as:

* **Automatic format conversion** — Transcode all images to modern formats like AVIF or WebP across your entire site.
* **Responsive sizing** — Automatically resize images based on each user's device.
* **Directory-based optimization** — Enforce a consistent size for all images in a particular path, such as 100x100 for images where the path contains `/thumbnail`.

## How flows work

Before setting up a flow, make sure that transformations are turned on for your zone under **Images** \> **Transformations** in the [Cloudflare dashboard ↗](https://dash.cloudflare.com/?to=/:account/images/transformations).

When an image is requested on your zone, Cloudflare checks to see whether the request matches the conditions for any of your configured flows:

* Flows are evaluated from top to bottom in the order that they appear in the dashboard.
* If a request matches more than one flow, only the first matching flow will run.
* If no flow matches, then the request passes through to your origin unmodified.
* To control priority, you can reorder flows in the dashboard.

If the request matches a flow's conditions, then Cloudflare rewrites the URL to pass through the Images service with the specified parameters:

* A custom flow triggers only on requests for [supported image extensions](https://developers.cloudflare.com/images/get-started/limits/). HTML pages, CSS files, and other non-images are never affected.
* A provider flow evaluates requests based on provider-specific optimization parameters. For example, a Fastly provider flow triggers only when the request contains parameters like `?width`, `?height`, or `?fit`. Cloudflare will ignore any unrecognized parameters.

In your request lifecycle, flows are evaluated after standard HTTP [redirect rules](https://developers.cloudflare.com/rules/url-forwarding/):

* Any existing URL rewrites or redirect rules will be applied before Images evaluates the request, which may affect matching behavior.
* Flows include built-in loop prevention. If the request is already coming from the Images service, then the flow will not re-trigger on that subrequest.

## Set up a provider flow

Currently, Cloudflare supports flows to handle migrations from Fastly Image Optimizer.

To add a provider flow:

1. Log in to the [Cloudflare dashboard ↗](https://dash.cloudflare.com/) and select your account.
2. Go to **Images** \> **Transformations** and select your zone.
3. Select the **Automation** tab, then select **Add provider flow**.
4. Choose **Fastly** as the provider.
5. **Save** your flow.

## Set up a custom flow

### 1\. Create a new flow

In the Cloudflare dashboard, go to [**Images** \> **Transformations** ↗](https://dash.cloudflare.com/?to=/:account/images/transformations) and select the zone where you want to set up the custom flow.

Go to the **Automation** tab and select **Add custom flow** to open the side panel where you can configure your flow.

![Custom flow configuration panel](https://developers.cloudflare.com/_astro/custom-flow.DeAGR8BY_iGLSK.webp) 

### 2\. Configure the conditions

A custom flow is triggered when an incoming request matches all of the configured conditions in the flow:

* **File extension** — Match requests for all image formats or only specific file extensions, such as JPEG, PNG, or WebP.
* **URL path** — Match requests where the URL path matches a specified pattern, such as `/images/*` or `/assets/thumbnails/*`.
* **Query parameter** — Match requests where the query string contains a specified parameter, such as `orient`.

### 3\. Configure the actions

Next, define the optimization parameters that should be applied when the flow is triggered.

You can apply multiple actions within a single flow. For the full list of available parameters, refer to [Features](https://developers.cloudflare.com/images/optimization/features/).

The key parameters for most use cases are:

#### `format` | `f`

Set `format=auto` to automatically serve images in the most efficient format (e.g. AVIF, WebP) for each requesting browser.

If the browser doesn't support AVIF, then Cloudflare will fall back to WebP or a standard format.

Refer to [format](https://developers.cloudflare.com/images/optimization/features/#format)

#### `quality` | `q`

Control the compression quality of the output image. Accepts either:

* A **fixed value** from `1` (low quality, small file size) to `100` (high quality, large file size).
* A **perceptual quality level**: `high`, `medium-high`, `medium-low`, or `low`.

Refer to [quality](https://developers.cloudflare.com/images/optimization/features/#quality)

#### `slow-connection-quality` | `scq`

Override `quality` when a slow connection is detected via client hints. Accepts the same fixed or perceptual values as `quality`. This serves lower-quality (and smaller) images to users on slow networks without affecting users on fast connections.

Refer to [slow-connection-quality](https://developers.cloudflare.com/images/optimization/features/#slow-connection-quality)

#### `width` | `w`

Set [width=auto](https://developers.cloudflare.com/images/optimization/features/#width) to automatically size images based on the requesting device.

Cloudflare determines the optimal width using either [client hints](https://developers.cloudflare.com/images/optimization/make-responsive-images/#client-hints-preferred) (sent by the browser) or user-agent detection as a fallback.

You can fine-tune 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             |

To learn how `width=auto` works, refer to our guide on [serving responsive images](https://developers.cloudflare.com/images/optimization/make-responsive-images/).

### 4\. Publish your flow

Select **Save** on the side panel to add your custom flow, then select **Save** on your list of flows to turn on your flow.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/images/","name":"Cloudflare Images"}},{"@type":"ListItem","position":3,"item":{"@id":"/images/optimization/","name":"Optimization"}},{"@type":"ListItem","position":4,"item":{"@id":"/images/optimization/transformations/","name":"Remote images (transformations)"}},{"@type":"ListItem","position":5,"item":{"@id":"/images/optimization/transformations/flows/","name":"Create transformation flows"}}]}
```