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

NEXT.JS 이미지 최적화

NEXT.JS는 이미지 최적화를 위해 Next/image 컴포넌트를 제공하며, 이를 통해 최적화된 이미지 로드를 지원합니다. 기본적으로 장치에 맞는 이미지 사이즈와 최신 포맷(WebP, AVIF) 지원, 레이지 로드 기능이 제공됩니다. Next/image를 사용하면 이미지 요청 시 서버에서 동적으로 최적화된 이미지를 생성하고, 이후 동일 요청에 대해 캐시된 이미지를 재사용하여 빠른 응답을 제공합니다.

Sharp vs Squoosh

NEXT.JS는 개발 환경에서 Squoosh를 기본적으로 사용하지만, 운영 환경에서는 성능 향상을 위해 sharp 사용을 권장합니다. sharp는 WebP와 AVIF 이미지 최적화에서 Squoosh보다 3~6배 빠른 응답 속도를 제공합니다.

브라우저 호환성

NEXT.JS의 이미지 최적화 모듈은 브라우저의 Accept 헤더를 읽어 최적화된 이미지를 제공하므로, AVIF 포맷 지원 여부에 따라 적절한 포맷으로 응답합니다.