How Does Next.js Image Optimization Work?

Unlike a regular <img> tag, the Next/image component provides image resizing, modern format support, lazy loading, and CLS prevention features. Actual test results showed a dramatic performance difference in a 3G environment, significantly reducing data transfer and increasing loading speed compared to a regular tag.

Next/image optimizes images through a dedicated route called /_next/image. Upon request, it converts the image according to the specified width (w) and quality (q), and the optimized result is cached in the .next/cache/images folder. Whether it was a HIT or MISS can be checked via the X-Nextjs-Cache value in the response header.

However, not all images are optimized. Vector images such as SVG and animated images such as GIF are excluded from optimization. If needed, this can be controlled directly using the unoptimized props.

In production environments, using the Sharp library is strongly recommended. Next/image uses Squoosh by default, but Sharp is more efficient in terms of performance and stability.