docs: recommend webp over avif (#75966)

Co-authored-by: Steven <[email protected]>

Author: leerob

docs/01-app/01-getting-started/04-images-and-fonts.mdx

@@ -28,7 +28,7 @@ You can store static files, like images and fonts, under a folder called `public
 
 The Next.js [`<Image>`](/docs/app/building-your-application/optimizing/images) component extends the HTML `<img>` element to provide:
 
-- **Size optimization:** Automatically serving correctly sized images for each device, using modern image formats like WebP and AVIF.
+- **Size optimization:** Automatically serving correctly sized images for each device, using modern image formats like WebP.
 - **Visual stability:** Preventing [layout shift](https://web.dev/articles/cls) automatically when images are loading.
 - **Faster page loads:** Only loading images when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
 - **Asset flexibility:** Resizing images on-demand, even images stored on remote servers.

docs/01-app/03-building-your-application/06-optimizing/01-images.mdx

@@ -22,7 +22,7 @@ According to [Web Almanac](https://almanac.httparchive.org), images account for
 
 The Next.js Image component extends the HTML `<img>` element with features for automatic image optimization:
 
-- **Size Optimization:** Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
+- **Size Optimization:** Automatically serve correctly sized images for each device, using modern image formats like WebP.
 - **Visual Stability:** Prevent [layout shift](/learn/seo/web-performance/cls) automatically when images are loading.
 - **Faster Page Loads:** Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
 - **Asset Flexibility:** On-demand image resizing, even for images stored on remote servers

docs/01-app/03-building-your-application/10-deploying/01-production-checklist.mdx

@@ -87,7 +87,7 @@ While building your application, we recommend using the following features to en
 </AppOnly>
 
 - **[Font Module](/docs/app/building-your-application/optimizing/fonts):** Optimize fonts by using the Font Module, which automatically hosts your font files with other static assets, removes external network requests, and reduces [layout shift](https://web.dev/articles/cls).
-- **[`<Image>` Component](/docs/app/building-your-application/optimizing/images):** Optimize images by using the Image Component, which automatically optimizes images, prevents layout shift, and serves them in modern formats like WebP or AVIF.
+- **[`<Image>` Component](/docs/app/building-your-application/optimizing/images):** Optimize images by using the Image Component, which automatically optimizes images, prevents layout shift, and serves them in modern formats like WebP.
 - **[`<Script>` Component](/docs/app/building-your-application/optimizing/scripts):** Optimize third-party scripts by using the Script Component, which automatically defers scripts and prevents them from blocking the main thread.
 - **[ESLint](/docs/architecture/accessibility#linting):** Use the built-in `eslint-plugin-jsx-a11y` plugin to catch accessibility issues early.
 

docs/01-app/04-api-reference/02-components/image.mdx

@@ -715,18 +715,19 @@ module.exports = {
 }
 ```
 
-You can enable AVIF support and still fallback to WebP with the following configuration.
+You can enable AVIF support, which will fallback to the original format of the src image if the browser [does not support AVIF](https://caniuse.com/avif):
 
 ```js filename="next.config.js"
 module.exports = {
   images: {
-    formats: ['image/avif', 'image/webp'],
+    formats: ['image/avif'],
   },
 }
 ```
 
 > **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.
 > - If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the `Accept` header.
 

docs/02-pages/03-api-reference/01-components/image-legacy.mdx

@@ -512,17 +512,21 @@ module.exports = {
 }
 ```
 
-You can enable AVIF support and still fallback to WebP with the following configuration.
+You can enable AVIF support, which will fallback to the original format of the src image if the browser [does not support AVIF](https://caniuse.com/avif):
 
 ```js filename="next.config.js"
 module.exports = {
   images: {
-    formats: ['image/avif', 'image/webp'],
+    formats: ['image/avif'],
   },
 }
 ```
 
-> **Good to know**: 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.
+> **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.
+> - 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
 

examples/cms-contentful/next.config.js

@@ -2,6 +2,6 @@
 module.exports = {
   images: {
     loader: "custom",
-    formats: ["image/avif", "image/webp"],
+    search: "",
   },
 };

examples/image-component/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   images: {
-    formats: ["image/avif", "image/webp"],
+    search: "",
     remotePatterns: [
       {
         protocol: "https",

examples/image-legacy-component/next.config.ts

@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   images: {
-    formats: ["image/avif", "image/webp"],
+    search: "",
     remotePatterns: [
       {
         protocol: "https",

examples/image-secure-compute/next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   images: {
+    search: "",
     localPatterns: [
       {
         pathname: "/image-api/**",

examples/with-cloudinary/next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    formats: ["image/avif", "image/webp"],
+    search: "",
     remotePatterns: [
       {
         protocol: "https",