Skip to content

Commit f6da9a0

Browse files
authored
images: remove notes stating that quality and format only work on transformations (#22272)
1 parent 8bd4803 commit f6da9a0

File tree

4 files changed

+32
-50
lines changed

4 files changed

+32
-50
lines changed

src/content/partials/images/format.mdx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
54

6-
:::note[Note]
7-
At the moment, this setting only works directly with [image transformations](/images/transform-images/).
8-
:::
5+
import { Tabs, TabItem } from "~/components";
96

107
The `auto` option will serve the WebP or AVIF format to browsers that support it. If this option is not specified, a standard format like JPEG or PNG will be used. Cloudflare will default to JPEG when possible due to the large size of PNG files.
118

129
Workers integration supports:
1310

14-
* `avif`: Generate images in AVIF format if possible (with WebP as a fallback).
15-
* `webp`: Generate images in Google WebP format. Set the quality to `100` to get the WebP lossless format.
16-
* `jpeg`: Generate images in interlaced progressive JPEG format, in which data is compressed in multiple passes of progressively higher detail.
17-
* `baseline-jpeg`: Generate images in baseline sequential JPEG format. It should be used in cases when target devices don't support progressive JPEG or other modern file formats.
18-
* `json`: Instead of generating an image, outputs information about the image in JSON format. The JSON object will contain data such as image size (before and after resizing), source image's MIME type, and file size.
11+
- `avif`: Generate images in AVIF format if possible (with WebP as a fallback).
12+
- `webp`: Generate images in Google WebP format. Set the quality to `100` to get the WebP lossless format.
13+
- `jpeg`: Generate images in interlaced progressive JPEG format, in which data is compressed in multiple passes of progressively higher detail.
14+
- `baseline-jpeg`: Generate images in baseline sequential JPEG format. It should be used in cases when target devices don't support progressive JPEG or other modern file formats.
15+
- `json`: Instead of generating an image, outputs information about the image in JSON format. The JSON object will contain data such as image size (before and after resizing), source image's MIME type, and file size.
1916

2017
<Tabs>
2118
<TabItem label="URL format">
@@ -42,10 +39,10 @@ const accept = request.headers.get("accept");
4239
let image = {};
4340

4441
if (/image\/avif/.test(accept)) {
45-
image.format = "avif";
42+
image.format = "avif";
4643
} else if (/image\/webp/.test(accept)) {
47-
image.format = "webp";
44+
image.format = "webp";
4845
}
4946

50-
return fetch(url, {cf:{image}});
51-
```
47+
return fetch(url, { cf: { image } });
48+
```
Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
4+
5+
import { Tabs, TabItem } from "~/components";
56

67
:::note[Note]
7-
At the moment, this setting only works directly with [image transformations](/images/transform-images/) and does not support resizing with Cloudflare Workers.
8+
This setting only works directly with [image transformations](/images/transform-images/) and does not support resizing with Cloudflare Workers.
89
:::
910

1011
In case of a [fatal error](/images/reference/troubleshooting/#error-responses-from-resizing) that prevents the image from being resized, redirects to the unresized source image URL. This may be useful in case some images require user authentication and cannot be fetched anonymously via Worker. This option should not be used if there is a chance the source image is very large. This option is ignored if the image is from another domain, but you can use it with subdomains.
1112

1213
<Tabs>
13-
<TabItem label="URL format">
14-
```js
15-
onerror=redirect
16-
```
17-
</TabItem>
14+
<TabItem label="URL format">```js onerror=redirect ```</TabItem>
1815
</Tabs>
Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
54

6-
:::note[Note]
7-
At the moment, this setting only works directly with [image transformations](/images/transform-images/).
8-
:::
5+
import { Tabs, TabItem } from "~/components";
96

107
Specifies quality for images in JPEG, WebP, and AVIF formats. The quality is in a 1-100 scale, but useful values are between `50` (low quality, small file size) and `90` (high quality, large file size). `85` is the default. When using the PNG format, an explicit quality setting allows use of PNG8 (palette) variant of the format. Use the `format=auto` option to allow use of WebP and AVIF formats.
118

@@ -25,18 +22,20 @@ We also allow setting one of the perceptual quality levels `high|medium-high|med
2522
```js
2623
q=50
2724

28-
OR
29-
30-
q=medium-high
31-
```
32-
</TabItem>
33-
<TabItem label="Workers">
34-
```js
35-
cf: {image: {quality: 50}}
25+
OR
26+
27+
q=medium-high
28+
29+
````
30+
</TabItem>
31+
<TabItem label="Workers">
32+
```js
33+
cf: {image: {quality: 50}}
34+
35+
OR
3636
37-
OR
37+
cf: {image: {quality: "high"}}
38+
````
3839
39-
cf: {image: {quality: "high"}}
40-
```
4140
</TabItem>
4241
</Tabs>
Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,16 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
54

6-
:::note[Note]
7-
At the moment, this setting only works directly with [image transformations](/images/transform-images/).
8-
:::
5+
import { Tabs, TabItem } from "~/components";
96

107
Allows overriding `quality` value whenever a slow connection is detected.
118

129
Available options are same as [quality](/images/transform-images/transform-via-url/#quality).
1310

1411
<Tabs>
15-
<TabItem label="URL format">
16-
```js
17-
slow-connection-quality=50
18-
```
19-
</TabItem>
20-
<TabItem label="URL format alias">
21-
```js
22-
scq=50
23-
```
24-
</TabItem>
12+
<TabItem label="URL format">```js slow-connection-quality=50 ```</TabItem>
13+
<TabItem label="URL format alias">```js scq=50 ```</TabItem>
2514
</Tabs>
2615

2716
Detecting slow connections is currently only supported on Chromium-based browsers such as Chrome, Edge, and Opera.
@@ -40,4 +29,4 @@ slow-connection-quality applies whenever any of the following is true and the cl
4029

4130
- [ect](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/ECT): Value is one of `slow-2g|2g|3g`.
4231

43-
- [downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Downlink): Less than 5Mbps.
32+
- [downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Downlink): Less than 5Mbps.

0 commit comments

Comments
 (0)