[Images] Document transformation flows

src/content/docs/images/index.mdx

@@ -65,6 +65,10 @@ If you’re new to Images, start here to learn the essentials:
 	Browse the various features for compressing, cropping, resizing, and manipulating images.
 </Feature>
 
+<Feature header="Flows" href="/images/optimization/features" cta="Use flows">
+	Create transformation flows to configure automated rules for optimizing remote images on your zone.
+</Feature>
+
 <Feature
 	header="Storage"
 	href="/images/storage/upload-images/methods"

src/content/docs/images/optimization/features.mdx

@@ -121,7 +121,7 @@ To [serve responsive images](/images/optimization/make-responsive-images/), you
 - 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 1920 px and ensures that the image will not be enlarged unnecessarily.
+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](/cache/how-to/cache-rules/examples/cache-device-type/).
 

src/content/docs/images/optimization/transformations/bindings.mdx

@@ -2,7 +2,7 @@
 pcx_content_type: how-to
 title: Bind to Workers API
 sidebar:
-  order: 4
+  order: 5
 ---
 
 import { WranglerConfig, TypeScriptExample } from "~/components";

src/content/docs/images/optimization/transformations/control-origin-access.mdx

@@ -2,7 +2,7 @@
 pcx_content_type: reference
 title: Control origin access
 sidebar:
-  order: 5
+  order: 6
 ---
 
 You can serve resized images without giving access to the original image. Images can be hosted on another server outside of your zone, and the true source of the image can be entirely hidden. The origin server may require authentication to disclose the original image, without needing visitors to be aware of it. Access to the full-size image may be prevented by making it impossible to manipulate resizing parameters.

src/content/docs/images/optimization/transformations/draw-overlays.mdx

@@ -2,7 +2,7 @@
 pcx_content_type: reference
 title: Draw overlays and watermarks
 sidebar:
-  order: 6
+  order: 7
 ---
 
 You can draw additional images on top of a resized image, with transparency and blending effects. This enables adding of watermarks, logos, signatures, vignettes, and other effects to resized images.

src/content/docs/images/optimization/transformations/flows.mdx

@@ -0,0 +1,133 @@
+---
+pcx_content_type: reference
+title: Create transformation flows
+sidebar:
+  order: 3
+---
+import { Description, Render } from "~/components";
+
+<Description>
+	Define automated rules to optimize remote images without writing any code or changing your existing URLs.
+</Description>
+
+Flows let you automatically apply image optimization to requests on your zone.
+
+Each flow pairs a set of conditions (e.g. image is a JPEG or PNG) with optimization parameters (e.g. 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 flow triggers only on requests for [supported image types](/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](/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.
+
+## Setting 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.
+
+## Setting 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](~/assets/images/images/custom-flow.png)
+
+### 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](/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.
+
+See: [`format`](/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`.
+
+See: [`quality`](/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.
+
+See: [`slow-connection-quality`](/images/optimization/features/#slow-connection-quality)
+
+#### `width` | `w`
+
+Set [`width=auto`](/images/optimization/features/#width) to automatically size images based on the requesting device.
+
+Cloudflare determines the optimal width using either [client hints](/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](/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.

src/content/docs/images/optimization/transformations/overview.mdx

@@ -38,5 +38,6 @@ Each unique combination of source image and parameters is cached and billed sepa
 After enabling transformations on your zone, you can configure how Cloudflare handles transformation requests:
 
 - **[Define source origins](/images/optimization/transformations/sources)** — Specify which origins Cloudflare can pull source images from. By default, Cloudflare only accepts source images from the same zone where transformations are served.
+- **[Create transformation flows](/images/optimization/transformations/flows)** — Set up automated rules that apply image optimization to matching requests without requiring URL changes or custom code.
 - **[Control origin access](/images/optimization/transformations/control-origin-access)** — Use Workers to add custom logic for validating and controlling access to source images.
 - **[Set up rewrite rules](/images/optimization/transformations/rewrite-rules)** — Use Transform Rules to rewrite image URLs and serve transformations from custom paths.

src/content/docs/images/optimization/transformations/preserve-content-credentials.mdx

@@ -2,7 +2,7 @@
 pcx_content_type: reference
 title: Preserve Content Credentials
 sidebar:
-  order: 7
+  order: 10
 ---
 
 [Content Credentials](https://contentcredentials.org/) (or C2PA metadata) are a type of metadata that includes the full provenance chain of a digital asset. This provides information about an image's creation, authorship, and editing flow. This data is cryptographically authenticated and can be verified using an [open-source verification service](https://contentcredentials.org/verify).

src/content/docs/images/optimization/transformations/transform-via-workers.mdx

@@ -2,7 +2,7 @@
 pcx_content_type: how-to
 title: Transform via Workers
 sidebar:
-  order: 3
+  order: 4
 ---
 
 import { Render } from "~/components";

src/content/docs/images/tutorials/migration/akamai.mdx

@@ -0,0 +1,47 @@
+---
+pcx_content_type: tutorial
+title: Optimize mobile viewing
+description: Lazy loading is an easy way to optimize the images on your webpages for mobile devices, with faster page load times and lower costs.
+sidebar:
+  order: 1
+reviewed: 2025-07-07
+---
+
+You can use lazy loading to optimize the images on your webpages for mobile viewing. This helps address common challenges of mobile viewing, like slow network connections or weak processing capabilities.
+
+Lazy loading has two main advantages:
+
+- **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
+- **Lower costs for image delivery** — When using Cloudflare Images, you only pay to load images that the user actually sees. With lazy loading, images that are not scrolled into view do not count toward your billable Images requests.
+
+Lazy loading is natively supported on all major browsers, including Chrome, Safari, Firefox, Opera, and Edge.
+
+:::note
+If you use older methods, involving custom JavaScript or a JavaScript library, lazy loading may increase the initial load time of the page since the browser needs to download, parse, and execute JavaScript.
+:::
+
+## Modify your loading attribute
+
+Without modifying your loading attribute, most browsers will fetch all images on a page, prioritizing the images that are closest to the viewport by default. You can override this by modifying your `loading` attribute.
+
+There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
+
+### Lazy loading
+
+Lazy loading is recommended for most images. With Lazy loading, resources like images are deferred until they reach a certain distance from the viewport. If an image does not reach the threshold, then it does not get loaded.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
+
+```html
+<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />
+```
+
+### Eager loading
+
+If you have images that are in the viewport, eager loading, instead of lazy loading, is recommended. Eager loading loads the asset at the initial page load, regardless of its location on the page.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
+
+```html
+<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />
+```

src/content/docs/images/tutorials/migration/fastly.mdx

@@ -0,0 +1,47 @@
+---
+pcx_content_type: tutorial
+title: Optimize mobile viewing
+description: Lazy loading is an easy way to optimize the images on your webpages for mobile devices, with faster page load times and lower costs.
+sidebar:
+  order: 1
+reviewed: 2025-07-07
+---
+
+You can use lazy loading to optimize the images on your webpages for mobile viewing. This helps address common challenges of mobile viewing, like slow network connections or weak processing capabilities.
+
+Lazy loading has two main advantages:
+
+- **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
+- **Lower costs for image delivery** — When using Cloudflare Images, you only pay to load images that the user actually sees. With lazy loading, images that are not scrolled into view do not count toward your billable Images requests.
+
+Lazy loading is natively supported on all major browsers, including Chrome, Safari, Firefox, Opera, and Edge.
+
+:::note
+If you use older methods, involving custom JavaScript or a JavaScript library, lazy loading may increase the initial load time of the page since the browser needs to download, parse, and execute JavaScript.
+:::
+
+## Modify your loading attribute
+
+Without modifying your loading attribute, most browsers will fetch all images on a page, prioritizing the images that are closest to the viewport by default. You can override this by modifying your `loading` attribute.
+
+There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
+
+### Lazy loading
+
+Lazy loading is recommended for most images. With Lazy loading, resources like images are deferred until they reach a certain distance from the viewport. If an image does not reach the threshold, then it does not get loaded.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
+
+```html
+<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />
+```
+
+### Eager loading
+
+If you have images that are in the viewport, eager loading, instead of lazy loading, is recommended. Eager loading loads the asset at the initial page load, regardless of its location on the page.
+
+Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
+
+```html
+<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />
+```

src/content/docs/images/tutorials/migration/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Tutorials
+pcx_content_type: navigation
+sidebar:
+  order: 10
+  group:
+    hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+<DirectoryListing />

src/content/partials/images/dpr.mdx

@@ -9,7 +9,7 @@ import dpr2Img from "~/assets/images/images/examples/dpr-2.jpg";
 
 Scales the output resolution by a multiplier to match a user's specific screen density (for example, Retina or 4K). The default is `1`, which delivers the image at the exact width and height requested. The maximum supported value is `2`.
 
-Modern devices have more physical pixels than CSS pixels. If you serve a 300 px image in a 300 px container on a high-DPR smartphone, then it will look blurry. Using `dpr=2` tells Cloudflare to send a 600 px image for the same 300 px container, which results in a clearer, crisper image.
+Modern devices have more physical pixels than CSS pixels. If you serve a 300px image in a 300px container on a high-DPR smartphone, then it will look blurry. Using `dpr=2` tells Cloudflare to send a 600px image for the same 300px container, which results in a clearer, crisper image.
 
 The `dpr` parameter can be used with `srcset` to [serve responsive images](/images/optimization/make-responsive-images/).