프론트엔드
NEXT.JS의 이미지 최적화는 어떻게 동작하는가?
두줄요약
Next.js의 이미지 최적화가 요청 시점에 어떻게 동작하는지 정리했습니다. 캐시 재사용, 포맷 선택, sharp와 Squoosh 성능 차이까지 살펴봤습니다.
핵심 내용
- Next.js의
Next/image가 제공하는 이미지 최적화 동작 정리 - 요청 시점에
/_next/image라우트로 이미지를 변환하고,w·q값과Accept헤더를 바탕으로 적절한 포맷과 크기 선택 - 최초 요청에서 최적화 이미지를 생성한 뒤
.next/cache/images에 저장하고, 이후 동일 요청은 캐시 재사용 - SVG, GIF 같은 일부 이미지는 최적화 대상에서 제외되며
loader오버라이드나unoptimized사용을 검토할 필요 - 운영 환경에서는 기본 Squoosh보다 sharp 사용 시 응답 속도 개선 폭이 큼