diff --git a/src/content/partials/images/format.mdx b/src/content/partials/images/format.mdx index f82ca817e4eba46..b722a34f4e7ce4a 100644 --- a/src/content/partials/images/format.mdx +++ b/src/content/partials/images/format.mdx @@ -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. @@ -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}}); -``` \ No newline at end of file +return fetch(url, { cf: { image } }); +``` diff --git a/src/content/partials/images/onerror.mdx b/src/content/partials/images/onerror.mdx index f2739b1bfc32930..b3c6117b5a7684e 100644 --- a/src/content/partials/images/onerror.mdx +++ b/src/content/partials/images/onerror.mdx @@ -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. - - ```js - onerror=redirect - ``` - + ```js onerror=redirect ``` diff --git a/src/content/partials/images/quality.mdx b/src/content/partials/images/quality.mdx index 9f5ee479b7bf55f..59c5b261d59a868 100644 --- a/src/content/partials/images/quality.mdx +++ b/src/content/partials/images/quality.mdx @@ -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. @@ -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 - ``` - - - ```js - cf: {image: {quality: 50}} +OR + +q=medium-high + +```` + + +```js +cf: {image: {quality: 50}} + +OR - OR +cf: {image: {quality: "high"}} +```` - cf: {image: {quality: "high"}} - ``` diff --git a/src/content/partials/images/slow-connection-quality.mdx b/src/content/partials/images/slow-connection-quality.mdx index b6b75d72e776181..229fb83313b5e64 100644 --- a/src/content/partials/images/slow-connection-quality.mdx +++ b/src/content/partials/images/slow-connection-quality.mdx @@ -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). - - ```js - slow-connection-quality=50 - ``` - - - ```js - scq=50 - ``` - + ```js slow-connection-quality=50 ``` + ```js scq=50 ``` 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 - [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. \ No newline at end of file +- [downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Downlink): Less than 5Mbps.