Image Optimization
The built-in
<Image> component resizes, compresses and lazy-loads images, and serves the most efficient format the browser supports.Expected behaviour
Open the browser's network tab and reload: the photo comes from
/_next/image at a width to suit your screen, usually as WebP, rather than the original file.How this page works
- 1The page uses
<Image>with a width, height andsizes. - 2The browser picks the size it needs from a set of widths.
- 3Next.js fetches the source once, resizes and converts it, and caches the result.
- 4Later requests for that size come from the cache.
Live result
Photo from Unsplash, served through Next.js.