|
| 1 | +--- |
| 2 | +pcx_content_type: reference |
| 3 | +title: Create transformation flows |
| 4 | +sidebar: |
| 5 | + order: 4 |
| 6 | +--- |
| 7 | +import { Description, Render } from "~/components"; |
| 8 | + |
| 9 | +<Description> |
| 10 | + Flows are automated rules that apply image optimization without requiring URL changes or custom code. |
| 11 | +</Description> |
| 12 | + |
| 13 | +When optimizing remote images, you can create flows to define how Cloudflare should handle image requests on your zone. |
| 14 | + |
| 15 | +Each flow matches trigger conditions with a set of actions that Images automatically applies to each qualifying request. |
| 16 | + |
| 17 | +## Types of flows |
| 18 | + |
| 19 | +You can use pre-built flows to handle migrations from other image optimization services (like Fastly) create your own custom flows. |
| 20 | + |
| 21 | +A **provider flow** acts as a translation layer to map image URLs from another image optimization service to the Cloudflare equivalent. Currently, Cloudflare supports flows for Fastly Image Optimizer. |
| 22 | + |
| 23 | +When you set up a provider flow, you can continue serving images using another provider's URL structure and optimization parameters. |
| 24 | + |
| 25 | +**Custom flows** let you define conditions (such as file extension or URL path) and a set of optimization actions to automatically apply. This is well-suited for situations where you want to optimize your images broadly and consistently, such as: |
| 26 | + |
| 27 | +- Automatically converting all images to modern formats like AVIF or WebP across your entire site. |
| 28 | +- Resizing images based on device so that mobile users receive appropriately sized images quickly. |
| 29 | +- Enforcing a consistent size and fit behavior for all images in a particular directory, such as 100x100 images for images where the path contains `/thumbnail`. |
| 30 | + |
| 31 | +## How flows work |
| 32 | + |
| 33 | +Before setting up a flow, make sure that transformations are turned on for your zone. In the Cloudflare dashboard, go to **Images** > **Transformations**. |
| 34 | + |
| 35 | +When an image request is made on your zone, Cloudflare evaluates your configured flows in order. If the request matches a flow's condition, then it is routed through Cloudflare's image processing pipeline. If a request matches more than one flow, then only the first matching flow is applied. |
| 36 | + |
| 37 | +Flows are evaluated after standard HTTP redirect rules in your request lifecycle. |
| 38 | + |
| 39 | +## Setting up a provider flow |
| 40 | + |
| 41 | +Currently, Cloudflare supports flows to handle migrations from Fastly Image Optimizer. To add a provider flow: |
| 42 | + |
| 43 | +1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. |
| 44 | +2. Go to **Images** > **Transformations** and select the zone where you want to enable the provider flow. |
| 45 | +3. Select the **Automation** tab, then select **Add provider flow**. |
| 46 | +4. Choose **Fastly** as the provider. |
| 47 | +5. Select **Save**. |
| 48 | + |
| 49 | +When you enable the provider flow for Fastly, Cloudflare automatically handles differences in parameter naming and behavior. For example: |
| 50 | + |
| 51 | +- Fastly's `brightness` parameter accepts a range from `-100` to `100`, while Cloudflare's `brightness` works as a multiplier. The value will be scaled accordingly to match the intended result. |
| 52 | +- Fastly's `orient` parameter maps to Cloudflare's `flip` and `rotate` parameters, which handle the same behavior separately. |
| 53 | + |
| 54 | +Your existing URLs will continue to work as-is, and end-users will see no change in the image URLs they receive. |
| 55 | + |
| 56 | +## Setting up a custom flow |
| 57 | + |
| 58 | +### 1. Create a new flow |
| 59 | + |
| 60 | +In the Cloudflare dashboard, go to [**Images** > **Transformations**](https://dash.cloudflare.com/?to=/:account/images/transformations) and select the zone where you want to enable your flow. |
| 61 | + |
| 62 | +Then, select the **Automation** tab, and select **Add custom flow**. This will open a side panel where you can configure your flow. |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +### 2. Configure the conditions |
| 67 | + |
| 68 | +A custom flow is triggered when an incoming request matches one or more of the following conditions: |
| 69 | + |
| 70 | +- **File extension** — Match requests for all image formats or only specific file extensions, such as `.jpg`, `.png`, or `.gif`. |
| 71 | +- **URL path** — Match requests where the URL path matches a pattern you define, such as `/images/*` or `/assets/thumbnails/*`. |
| 72 | + |
| 73 | +Define the conditions that will trigger this flow to occur. You can combine conditions so that a flow triggers only when all of them are met. |
| 74 | + |
| 75 | +### 3. Configure the actions |
| 76 | + |
| 77 | +Next, define the optimization operations that should be performed when the flow is triggered. Multiple actions can be applied within a single flow. |
| 78 | + |
| 79 | +### 4. Save your flow |
| 80 | + |
| 81 | +Select **Save** on the side panel to add your custom flow, then select **Save** on your list of flows to make your flow live. |
0 commit comments