diff --git a/docs/01-app/03-api-reference/02-components/image.mdx b/docs/01-app/03-api-reference/02-components/image.mdx index e25a531a76a33..bc0e096b2cdab 100644 --- a/docs/01-app/03-api-reference/02-components/image.mdx +++ b/docs/01-app/03-api-reference/02-components/image.mdx @@ -752,10 +752,21 @@ module.exports = { } ``` +You can also enable both AVIF and WebP formats together. AVIF will be preferred for browsers that support it, with WebP as a fallback: + +```js filename="next.config.js" +module.exports = { + images: { + formats: ['image/avif', 'image/webp'], + }, +} +``` + > **Good to know**: > > - We still recommend using WebP for most use cases. > - AVIF generally takes 50% longer to encode but it compresses 20% smaller compared to WebP. This means that the first time an image is requested, it will typically be slower, but subsequent requests that are cached will be faster. +> - When using multiple formats, Next.js will cache each format separately. This means increased storage requirements compared to using a single format, as both AVIF and WebP versions of images will be stored for different browser support. > - If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the `Accept` header. #### `minimumCacheTTL` diff --git a/docs/02-pages/04-api-reference/01-components/image-legacy.mdx b/docs/02-pages/04-api-reference/01-components/image-legacy.mdx index ba921c214eaa8..c1b754af5216d 100644 --- a/docs/02-pages/04-api-reference/01-components/image-legacy.mdx +++ b/docs/02-pages/04-api-reference/01-components/image-legacy.mdx @@ -528,10 +528,21 @@ module.exports = { } ``` +You can also enable both AVIF and WebP formats together. AVIF will be preferred for browsers that support it, with WebP as a fallback: + +```js filename="next.config.js" +module.exports = { + images: { + formats: ['image/avif', 'image/webp'], + }, +} +``` + > **Good to know**: > > - We still recommend using WebP for most use cases. > - AVIF generally takes 50% longer to encode but it compresses 20% smaller compared to WebP. This means that the first time an image is requested, it will typically be slower and then subsequent requests that are cached will be faster. +> - When using multiple formats, Next.js will cache each format separately. This means increased storage requirements compared to using a single format, as both AVIF and WebP versions of images will be stored for different browser support. > - If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the `Accept` header. ## Caching Behavior