Docs: Image Optimization Deep Dive #78857
Conversation
ijjk
added
created-by: Next.js DevEx team
|
Hi there 👋 It looks like this PR introduces broken links to the docs, please take a moment to fix them before merging:
Thank you 🙏 |
|
|
||
| ### Duration | ||
|
|
||
| TODO: What is the default duration with no configuration? |
There was a problem hiding this comment.
What is the default cache duration if not configured?
There was a problem hiding this comment.
60 seconds. See images.minimumCacheTTL config
| - [Caches](#caching-and-revalidating-images) the optimized image. | ||
| - Serves the optimized images at runtime. |
There was a problem hiding this comment.
Where are the images cached and served from?
On vercel vs. self-hosting
There was a problem hiding this comment.
Basically the same as ISR cache. Do we have a docs on that we can reuse?
| ### Supported image formats | ||
|
|
||
| The built-in loader supports common web-friendly formats: | ||
|
|
||
| - `jpeg` | ||
| - `png` | ||
| - `webp` | ||
| - `avif` | ||
| - `tiff` |
There was a problem hiding this comment.
Confirm supported vs. unsupported image formats
There was a problem hiding this comment.
We need to differentiate input vs output types
There was a problem hiding this comment.
The images.formats config is how you configure the output type
| - Generates multiple [image sizes](#image-sizing) for different screens using modern [image formats](#supported-image-formats). | ||
| - Builds the URLs pointing to the optimized image version, and creates a `srcset` attribute. | ||
| - [Caches](#caching-and-revalidating-images) the optimized image. | ||
| - Serves the optimized images at runtime. |
There was a problem hiding this comment.
Ideally, these steps should be sequential
Closes: - https://linear.app/vercel/issue/DOC-4626/images - https://linear.app/vercel/issue/DOC-4610/split-image-and-font-pages Redirects: #78769 **Housekeeping:** - Deletes BYA images page - Creates relevant getting started docs in `/pages` - Splits "Images and Fonts" into "Images" and "Fonts" pages to allow us to add more context to each page in the future **API reference**: - Improves image API reference to follow more of a consistent format and language - Adds examples **Follow-up:** #78857 - Create a Deep Dive Guide on how image optimization works --------- Co-authored-by: Rich Haines <hello@richardhaines.dev>
| ### Unsupported image formats | ||
|
|
||
| - **Animated images** (e.g., GIF, APNG, ets) as served as-is, bypassing optimization. | ||
| - **SVGs** are blocked by default unless [`unoptimized`](/docs/app/api-reference/components/image#unoptimized) or [`dangerouslyAllowSVG`](/docs/app/api-reference/components/image#dangerouslyallowsvg) is enabled. |
There was a problem hiding this comment.
We should also mention that they are bypassed when dangerouslyAllowSVG is true
|
|
||
| ### Image Sizing | ||
|
|
||
| One of the most common image-related performance issues is [layout shift](https://web.dev/articles/cls). This happens when an image pushes other elements around the page as it loads in. It’s a UX problem that it has its own Core Web Vital: [Cumulative Layout Shift](https://web.dev/cls/). Layout shift can be prevented by defining the image dimensions. This allows the browser to reserve enough space for the image before it loads. |
There was a problem hiding this comment.
Probably worth mentioning https://web.dev/articles/lcp too
Deep dive on how image optimization works in Next.js
Closes: https://linear.app/vercel/issue/DOC-4634/new-page-how-image-optimization-works-in-nextjs