Next.js 이미지 최적화, sharp로 성능 UP!

Next/image 컴포넌트는 이미지 로딩 속도 획기적 개선을 위해 다양한 최적화 기능 제공

sharp와 Squoosh 비교 결과, sharp가 3~6배 빠른 응답 속도를 보임

AVIF 등 최신 이미지 포맷 지원하며, 브라우저 호환성 문제 없이 사용 가능

Next/image 컴포넌트의 동작 원리

Next/image는 이미지 요청 시, /_next/image 라우트를 통해 이미지 최적화를 수행한다. 구체적으로, 이미지 리사이징, WebP/AVIF 변환 등을 런타임에 처리한다. 따라서 CLS(Cumulative Layout Shift) 방지 및 레이지 로딩을 기본 지원하여 사용자 경험을 향상시킨다.

sharp vs Squoosh: 성능 비교 분석

운영 환경에서는 sharp 라이브러리 사용을 권장하며, Squoosh보다 뛰어난 성능을 보인다. PNG -> WebP 변환 시, sharp는 Squoosh 대비 3~4배 빠른 응답 속도를 제공한다. AVIF 변환의 경우, sharp가 6배 빠른 속도를 보여 이미지 로딩 속도 개선에 기여한다.

AVIF 사용 시 브라우저 호환성 확보 방안

NEXT.JS는 Accept 헤더를 분석하여 브라우저별 최적의 이미지 포맷을 제공한다. 따라서 AVIF를 지원하지 않는 브라우저에는 WebP를, 지원하는 브라우저에는 AVIF를 제공한다. 결과적으로, 개발자는 브라우저 호환성에 대한 부담 없이 최신 이미지 포맷을 활용하여 성능 향상을 도모할 수 있다.