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

간단 소개

NEXT.JS는 Next/image 컴포넌트, 이미지 최적화 라우트, sharp 라이브러리 등을 통해 효율적인 이미지 최적화를 제공합니다.

AI Summary

NEXT.JS 이미지 최적화 개요
- NEXT.JS는 Next/image 컴포넌트를 통해 이미지 최적화를 제공하며, 장치 크기에 맞는 이미지, 최신 포맷 지원, CLS 방지, 레이지 로드, 블러링 등의 기능을 제공합니다.
- <img> 태그 대비 Next/image는 이미지 로딩 속도에서 큰 차이를 보이며, 이는 NEXT.JS 서버가 /_next/image 라우트를 통해 이미지 최적화를 수행하기 때문입니다.
이미지 최적화 과정 및 캐싱
- NEXT.JS는 이미지 요청 시 동적으로 이미지 최적화를 수행하고, 최적화된 이미지를 cache/images 폴더에 저장하여 재사용합니다. 첫 요청은 최적화 시간으로 인해 느릴 수 있지만, 이후 요청은 캐시된 이미지를 사용해 응답 속도가 향상됩니다.
- 모든 이미지를 최적화하는 것은 아니며, SVG나 GIF와 같은 특정 형식은 최적화 대상에서 제외됩니다.
Sharp vs Squoosh
- NEXT.JS는 기본적으로 Squoosh를 사용하지만, 운영 환경에서는 sharp 라이브러리 사용을 권장합니다. sharp는 Squoosh 대비 WebP, AVIF 포맷 변환 시 더 빠른 응답 속도를 제공합니다.
- NEXT.JS는 브라우저의 Accept 헤더를 분석하여 지원하는 이미지 포맷으로 최적화하여 응답하므로, 브라우저 호환성 문제를 해결합니다.