From b56ef3331667afd17570cf88e55ec69b0f7f796f Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 7 Mar 2022 15:12:57 -0800 Subject: [PATCH 1/3] Add `next/image` docs for animated images --- docs/api-reference/next/image.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 4905a0f1125a..22021b4cf1fd 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -408,7 +408,7 @@ The expiration (or rather Max Age) is defined by either the [`minimumCacheTTL`]( - You can configure [`minimumCacheTTL`](#minimum-cache-ttl) to increase the cache duration when the upstream image does not include `Cache-Control` header or the value is very low. - You can configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#device-sizes) to reduce the total number of possible generated images. -- You can configure [formats](/docs/basic-features/image-optimization.md#acceptable-formats) to disable multiple formats in favor of a single image format. +- You can configure [formats](#acceptable-formats) to disable multiple formats in favor of a single image format. ### Minimum Cache TTL @@ -455,6 +455,12 @@ module.exports = { } ``` +### Animated Images + +The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve it as-is, since converting all the frames of an animated image on-demand is too slow. + +Auto-detection for animated files is best-effort and supports GIF, APNG, and WebP. If you want to explicitly bypass Image Optimization for a given animated image, use the [unoptimized](#unoptimized) prop. + ## Related For an overview of the Image component features and usage guidelines, see: From 438569de5397f792cc8430ed1cf534f149007e15 Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 7 Mar 2022 15:16:02 -0800 Subject: [PATCH 2/3] Mention animated fallback --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 22021b4cf1fd..e82c9b1c1cc2 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -374,7 +374,7 @@ module.exports = { The default [Image Optimization API](#loader-configuration) will automatically detect the browser's supported image formats via the request's `Accept` header. -If the `Accept` head matches more than one of the configured formats, the first match in the array is used. Therefore, the array order matters. If there is no match, the Image Optimization API will fallback to the original image's format. +If the `Accept` head matches more than one of the configured formats, the first match in the array is used. Therefore, the array order matters. If there is no match (or the source image is [animated](#animated-images)), the Image Optimization API will fallback to the original image's format. If no configuration is provided, the default below is used. From f27eacff1e28b70ec57241cde73073fc95ceea90 Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 7 Mar 2022 15:47:07 -0800 Subject: [PATCH 3/3] Apply suggestion from leerob Co-authored-by: Lee Robinson --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index e82c9b1c1cc2..4fa36b777d21 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -457,7 +457,7 @@ module.exports = { ### Animated Images -The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve it as-is, since converting all the frames of an animated image on-demand is too slow. +The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve the image as-is. Auto-detection for animated files is best-effort and supports GIF, APNG, and WebP. If you want to explicitly bypass Image Optimization for a given animated image, use the [unoptimized](#unoptimized) prop.