Next/Image
Optimizing images — replace <img>
Drawbacks of <img>
- No lazy loading — all images request immediately on page load, increasing first paint time.
- No automatic compression — all devices load the same original file, slowing performance.
- No responsive resizing — mobile and desktop both fetch the same large image.
- No format optimization — cannot switch to WebP or AVIF, leading to larger file sizes.
- No caching optimization — browsers request the same file repeatedly without server-side caching.
Advantages of <Image />
<Image src="" alt="" width={} height={} />
- Lazy loading: By default, images load only when they approach the viewport,
reducing bandwidth and improving perceived performance.
- Automatic compression: Next.js converts images to WebP/AVIF automatically,
significantly reducing file size.
- Responsive optimization: Different devices automatically receive different-sized versions.
- Smart caching: Images are stored and cached in the Next.js server or CDN,
meaning repeated requests for the same image hit cache instead of refetching.
- SEO + performance benefits: Next.js generates optimized <img> markup behind the scenes.
