Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions src/content/partials/images/format.mdx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
---
{}
---
import { Tabs, TabItem } from "~/components"

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

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.

Workers integration supports:

* `avif`: Generate images in AVIF format if possible (with WebP as a fallback).
* `webp`: Generate images in Google WebP format. Set the quality to `100` to get the WebP lossless format.
* `jpeg`: Generate images in interlaced progressive JPEG format, in which data is compressed in multiple passes of progressively higher detail.
* `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.
* `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.
- `avif`: Generate images in AVIF format if possible (with WebP as a fallback).
- `webp`: Generate images in Google WebP format. Set the quality to `100` to get the WebP lossless format.
- `jpeg`: Generate images in interlaced progressive JPEG format, in which data is compressed in multiple passes of progressively higher detail.
- `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.
- `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.

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

if (/image\/avif/.test(accept)) {
image.format = "avif";
image.format = "avif";
} else if (/image\/webp/.test(accept)) {
image.format = "webp";
image.format = "webp";
}

return fetch(url, {cf:{image}});
```
return fetch(url, { cf: { image } });
```
11 changes: 4 additions & 7 deletions src/content/partials/images/onerror.mdx
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
---
{}
---
import { Tabs, TabItem } from "~/components"

import { Tabs, TabItem } from "~/components";

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

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.

<Tabs>
<TabItem label="URL format">
```js
onerror=redirect
```
</TabItem>
<TabItem label="URL format">```js onerror=redirect ```</TabItem>
</Tabs>
29 changes: 14 additions & 15 deletions src/content/partials/images/quality.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
---
{}
---
import { Tabs, TabItem } from "~/components"

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

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.

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

OR

q=medium-high
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {quality: 50}}
OR

q=medium-high

````
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {quality: 50}}

OR

OR
cf: {image: {quality: "high"}}
````

cf: {image: {quality: "high"}}
```
</TabItem>
</Tabs>
19 changes: 4 additions & 15 deletions src/content/partials/images/slow-connection-quality.mdx
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
---
{}
---
import { Tabs, TabItem } from "~/components"

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

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

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

<Tabs>
<TabItem label="URL format">
```js
slow-connection-quality=50
```
</TabItem>
<TabItem label="URL format alias">
```js
scq=50
```
</TabItem>
<TabItem label="URL format">```js slow-connection-quality=50 ```</TabItem>
<TabItem label="URL format alias">```js scq=50 ```</TabItem>
</Tabs>

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

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

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