CodeParknext/image makes images smaller, avoids layout shift and loads them at the right time.
Right size and format. It resizes images on demand and serves a srcset, so each device downloads a file of a suitable size. It can serve modern formats such as WebP, and AVIF if you configure it, when the browser supports them.
No layout shift. It requires width and height, or fill with a sized parent. So the space is reserved before the image loads. This prevents CLS (Cumulative Layout Shift: content jumping around as the page loads).
Loading. Images are lazy loaded by default, meaning they load only when near the screen. You can mark the main above-the-fold image as high priority, so it loads early. This improves LCP (Largest Contentful Paint: when the biggest image or text block appears). It also supports blur placeholders.
Security. Remote images must be allowed in images.remotePatterns in next.config. This stops people using your optimizer as a proxy for any URL.
next/imageresizes images automatically and serves asrcset.- It serves modern formats like WebP and AVIF.
- Reserved space prevents CLS, the layout jump when images load.
- Images lazy load by default, and the LCP image can be prioritized.
- Remote image hosts must be allowed in config.