next.js

1dd580da - docs: add example for enabling both AVIF and WebP image formats for better image optimization (#86191)

docs: add example for enabling both AVIF and WebP image formats for better image optimization (#86191) ## Title docs: add example for enabling both AVIF and WebP image formats ## Description ### What? This PR enhances the image component documentation by adding examples showing how to enable both AVIF and WebP image formats together in `next.config.js`. It also updates the `image-component` example to demonstrate this configuration. ### Why? Currently, the documentation only shows examples for: - WebP only (default): `formats: ['image/webp']` - AVIF only: `formats: ['image/avif']` However, many developers want to enable both formats together to: - Prefer AVIF for browsers that support it (better compression, ~20% smaller files) - Fall back to WebP for broader browser compatibility - Maximize image optimization across different browsers This configuration is a best practice but wasn't clearly documented with an example. ### How? - Added example configuration `formats: ['image/avif', 'image/webp']` to App Router image component documentation - Added the same example to Pages Router (legacy) image component documentation for consistency - Updated `examples/image-component/next.config.js` to demonstrate the configuration - Added clarification that the order matters - Next.js uses the first format in the array that the browser supports ### Changes Made - `docs/01-app/03-api-reference/02-components/image.mdx` - Added AVIF + WebP example - `docs/02-pages/04-api-reference/01-components/image-legacy.mdx` - Added AVIF + WebP example - `examples/image-component/next.config.js` - Added formats configuration ### Testing - [x] Documentation changes only - no code changes - [x] Verified examples are syntactically correct - [x] Checked that formatting follows Next.js documentation guidelines ### Checklist - [x] Run `pnpm prettier-fix` to fix formatting issues (if applicable) - [x] Documentation follows the docs guidelines - [x] Changes are clear and helpful for developers --------- Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>