NEXT.JS의 이미지 최적화는 어떻게 동작하는가?

Next/image 컴포넌트는 일반 <img> 태그와 달리 이미지 리사이징, 최신 포맷 지원, 레이지 로드, CLS 방지 기능을 제공한다. 실제 테스트 결과, 3G 환경에서 일반 태그 대비 데이터 전송량을 획기적으로 줄이고 로딩 속도를 높이는 성능 차이를 보였다.

Next/image는 /_next/image라는 전용 라우트를 통해 이미지를 최적화한다. 요청 시 지정된 너비(w)와 품질(q)에 맞춰 이미지를 변환하며, 최적화된 결과물은 .next/cache/images 폴더에 저장되어 **캐시(Cache)**된다. 응답 헤더의 X-Nextjs-Cache 값을 통해 HIT 또는 MISS 여부를 확인할 수 있다.

다만, 모든 이미지를 최적화하는 것은 아니다. SVG와 같은 벡터 이미지나 GIF 같은 애니메이션 이미지는 최적화 대상에서 제외된다. 필요에 따라 unoptimized props를 사용하여 직접 제어할 수 있다.

운영 환경에서는 Sharp 라이브러리 사용이 강력히 권장된다. Next/image는 기본적으로 Squoosh를 사용하지만, 성능과 안정성 측면에서 Sharp가 더 효율적이기 때문이다.