Skip to content

Commit 9b9b4d7

Browse files
deannalamOxyjun
authored andcommitted
Fix broken links caught by CI link validator
- Fix 4 remaining /images/transform-images/ references in fundamentals and use-cases - Fix double trailing slash in serve-private-images// (2 instances) - Remove /cloudflare-one/applications/ link that fails validation
1 parent 7ec3dcb commit 9b9b4d7

10 files changed

Lines changed: 194 additions & 7 deletions

File tree

src/content/docs/fundamentals/reference/cdn-cgi-endpoint.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ A few examples include (but are not limited to):
1212

1313
* [Identify the Cloudflare data center serving your request](/support/troubleshooting/general-troubleshooting/gathering-information-for-troubleshooting-sites/#identify-the-cloudflare-data-center-serving-your-request), which is helpful for troubleshooting (`https://<YOUR_DOMAIN>/cdn-cgi/trace`).
1414
* [JavaScript detection](/bots/additional-configurations/javascript-detections/) used by Cloudflare bot products (`example.com/cdn-cgi/challenge-platform/`)
15-
* [Image transformations](/images/transform-images) in the new URLs you would use for images (`example.com/cdn-cgi/image/`)
15+
* [Image transformations](/images/optimization/transformations/overview/) in the new URLs you would use for images (`example.com/cdn-cgi/image/`)
1616
* [Email address obfuscation](/waf/tools/scrape-shield/email-address-obfuscation/) used to hide email addresses from malicious bots (`example.com/cdn-cgi/l/email-protection`)
1717
* [Web analytics](/web-analytics/get-started/#sites-proxied-through-cloudflare) for a website proxied through Cloudflare (`example.com/cdn-cgi/rum`). This endpoint returns a `204` HTTP status code.
1818
* [Speed Brain](/speed/optimization/content/speed-brain/) adds an HTTP header called `Speculation-Rules` to web page responses. This header contains a URL that hosts an opinionated Speculation-Rules configuration, which instructs the browser to initiate prefetch requests for anticipated future navigations.

src/content/docs/images/optimization/hosted-images/browser-ttl.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,6 @@ When the Browser TTL is set to one day for images requested with this variant, t
5151

5252
:::note
5353

54-
[Private images](/images/optimization/hosted-images/serve-private-images//) do not respect default or custom TTL settings. The private images cache time is set according to the expiration time and can be as short as one hour.
54+
[Private images](/images/optimization/hosted-images/serve-private-images/) do not respect default or custom TTL settings. The private images cache time is set according to the expiration time and can be as short as one hour.
5555

5656
:::

src/content/docs/images/optimization/hosted-images/serve-from-custom-domains.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,4 @@ regex_replace(
8686

8787
## Limitations
8888

89-
When using a custom domain, it is not possible to directly set up WAF rules that act on requests hitting the `/cdn-cgi/imagedelivery/` path. If you need to set up WAF rules, you can use a Cloudflare Worker to access your images and a Route using your domain to execute the worker. For an example worker, refer to [Serve private images using signed URL tokens](/images/optimization/hosted-images/serve-private-images//).
89+
When using a custom domain, it is not possible to directly set up WAF rules that act on requests hitting the `/cdn-cgi/imagedelivery/` path. If you need to set up WAF rules, you can use a Cloudflare Worker to access your images and a Route using your domain to execute the worker. For an example worker, refer to [Serve private images using signed URL tokens](/images/optimization/hosted-images/serve-private-images/).

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default {
113113

114114
## Authenticated origin
115115

116-
Cloudflare image transformations cache resized images to aid performance. Images stored with restricted access are generally not recommended for resizing because sharing images customized for individual visitors is unsafe. However, in cases where the customer agrees to store such images in public cache, Cloudflare supports resizing images through Workers. At the moment, this is supported on authenticated AWS, Azure, Google Cloud, SecureAuth origins and origins behind [Cloudflare Access](/cloudflare-one/applications/).
116+
Cloudflare image transformations cache resized images to aid performance. Images stored with restricted access are generally not recommended for resizing because sharing images customized for individual visitors is unsafe. However, in cases where the customer agrees to store such images in public cache, Cloudflare supports resizing images through Workers. At the moment, this is supported on authenticated AWS, Azure, Google Cloud, SecureAuth origins and origins behind Cloudflare Access.
117117

118118
```js null {9}
119119
// generate signed headers (application specific)
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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+
![Custom flow configuration panel](~/assets/images/images/custom-flow.png)
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.
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: tutorial
3+
title: Optimize mobile viewing
4+
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.
5+
sidebar:
6+
order: 1
7+
reviewed: 2025-07-07
8+
---
9+
10+
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.
11+
12+
Lazy loading has two main advantages:
13+
14+
- **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
15+
- **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.
16+
17+
Lazy loading is natively supported on all major browsers, including Chrome, Safari, Firefox, Opera, and Edge.
18+
19+
:::note
20+
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.
21+
:::
22+
23+
## Modify your loading attribute
24+
25+
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.
26+
27+
There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
28+
29+
### Lazy loading
30+
31+
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.
32+
33+
Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
34+
35+
```html
36+
<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />
37+
```
38+
39+
### Eager loading
40+
41+
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.
42+
43+
Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
44+
45+
```html
46+
<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />
47+
```
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: tutorial
3+
title: Optimize mobile viewing
4+
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.
5+
sidebar:
6+
order: 1
7+
reviewed: 2025-07-07
8+
---
9+
10+
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.
11+
12+
Lazy loading has two main advantages:
13+
14+
- **Faster page load times** — Images are loaded as the user scrolls down the page, instead of all at once when the page is opened.
15+
- **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.
16+
17+
Lazy loading is natively supported on all major browsers, including Chrome, Safari, Firefox, Opera, and Edge.
18+
19+
:::note
20+
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.
21+
:::
22+
23+
## Modify your loading attribute
24+
25+
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.
26+
27+
There are two possible `loading` attributes for your `<img>` tags: `lazy` and `eager`.
28+
29+
### Lazy loading
30+
31+
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.
32+
33+
Example of modifying the `loading` attribute of your `<img>` tags to be `"lazy"`:
34+
35+
```html
36+
<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />
37+
```
38+
39+
### Eager loading
40+
41+
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.
42+
43+
Example of modifying the `loading` attribute of your `<img>` tags to be `"eager"`:
44+
45+
```html
46+
<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />
47+
```
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Tutorials
3+
pcx_content_type: navigation
4+
sidebar:
5+
order: 10
6+
group:
7+
hideIndex: true
8+
---
9+
10+
import { DirectoryListing } from "~/components";
11+
12+
<DirectoryListing />

src/content/docs/use-cases/media-streaming/image-optimization.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ Automatic image compression without quality loss. [Learn more about Polish](/ima
2828

2929
1. [Images get started](/images/get-started/)
3030
2. [Enable Polish](/images/polish/)
31-
3. [Transform images via URL](/images/transform-images/)
31+
3. [Transform images via URL](/images/optimization/transformations/overview/)

src/content/docs/use-cases/media-streaming/index.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ Handle media uploads from users at scale:
4848
### Create a new application
4949

5050
- A [Cloudflare account](https://dash.cloudflare.com/sign-up). Stream and R2 are account-level offerings. You do not need a domain added to Cloudflare to upload, encode, or store media.
51-
- For Image Transformations: enable the feature per domain from the [Transformations page](https://dash.cloudflare.com/?to=/:account/images/transformations) in the dashboard. Refer to [Image Transformations](/images/transform-images/).
51+
- For Image Transformations: enable the feature per domain from the [Transformations page](https://dash.cloudflare.com/?to=/:account/images/transformations) in the dashboard. Refer to [Image Transformations](/images/optimization/transformations/overview/).
5252

5353
### Use an existing application
5454

5555
- A [Cloudflare account](https://dash.cloudflare.com/sign-up).
5656
- A domain [added to Cloudflare](/fundamentals/manage-domains/add-site/) with DNS records proxied through Cloudflare. This is required for CDN caching, image optimization (Polish), and cache rules.
57-
- For Image Transformations on an existing domain: enable the feature from the [Transformations page](https://dash.cloudflare.com/?to=/:account/images/transformations) in the dashboard. Refer to [Image Transformations](/images/transform-images/).
57+
- For Image Transformations on an existing domain: enable the feature from the [Transformations page](https://dash.cloudflare.com/?to=/:account/images/transformations) in the dashboard. Refer to [Image Transformations](/images/optimization/transformations/overview/).
5858

5959
---
6060

0 commit comments

Comments
 (0)