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

Context

기존 HTML <img> 태그 사용 시 3G 환경에서 이미지 파일 크기 1.9MB, 로드 시간 11.5초가 소요되어 사용자 경험 저하 문제가 발생했다. 장치 크기별 최적 이미지 크기 제공, 최신 이미지 포맷 지원, CLS 방지 등을 자동으로 처리해야 할 필요성이 있었다.

Technical Solution

• 이미지 최적화 라우트 구성: NEXT.JS 서버 시작 시 /_next/image 라우트 자동 생성하여 이미지 최적화 모듈 운영
• 런타임 동적 최적화: 클라이언트 요청 시점에 w (너비 브레이크포인트), q (품질값 기본 75) 파라미터로 이미지 변환 수행
• 응답 헤더 기반 캐싱: 최적화 이미지를 .next/cache/images 폴더에 저장하고 X-Nextjs-Cache 헤더(MISS/HIT)로 캐시 상태 추적
• 브라우저 Accept 헤더 감지: 클라이언트 요청의 Accept 헤더 읽어 지원 가능한 이미지 포맷(WebP, AVIF, PNG 등)으로 자동 변환
• sharp 라이브러리 조건부 사용: 개발 환경에서는 Squoosh, 운영 환경에서는 sharp 자동 선택하여 성능 최적화

Impact

• 이미지 크기: 1.9MB → 16.9KB (99.1% 감소)
• 로드 시간: 11.5초 → 862ms (92.5% 단축)
• PNG → WebP 변환 성능: Squoosh 228ms vs sharp 64ms (3~4배 빠름)
• PNG → AVIF 변환 성능: Squoosh 1.24초 vs sharp 202ms (6배 빠름)
• 캐시된 이미지 응답: 첫 요청 64ms → 두 번째 요청 5ms (12.8배 개선)

Key Takeaway

NEXT.JS Next/image는 런타임 동적 최적화와 Accept 헤더 감지를 통해 브라우저 호환성 문제를 자동으로 해결하며, 운영 환경에서 sharp 사용 시 Squoosh 대비 3~6배 성능 향상을 달성할 수 있다.