사내 프로젝트에서는 Next.js 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 최근에 Image 속도 이슈 관련해서 기획 쪽 문의글이 있어 이번 기회에 Next.js 기술 중 Next/image 최적화 하는 방법에 대해서 정리 해 볼려고 합니다.

서론

사내 프로젝트에서는 메인 화면에서 추천 상품이나 프로모션, 팝업 등 다양한 컨텐츠 이미지들을 Next/image를 통해 화면에 노출하고 있습니다. 최근에 메인 페이지 이미지 렌더링 속도 이슈에 대해 이야기가 나왔고, 이미지 최적화 라이브러리인 Sharp를 사용하고 있는데 왜 이런 이슈가 발생하는지 궁금 하였고, 현재 쓰고 있는 기술에 대해서 공부도 하면서 이미지 렌더링 속도 이슈를 어떻게 해결 했는지 설명하려고 합니다.

문서는 아래와 같은 순서로 정리했습니다.

img 태그와 Next/Image 차이점

특징 <img> 태그 next/image
Lazy-loading 구현 방식 브라우저 기본 자동 지원 (loading) Intersection Observer (JS 기반)
최적화 수준 없음 자동 최적화(크기, 포맷, 품질)
레이아웃 안정성 직접 스타일링 필요 기본 제공(CLS 방지)
CDN 및 캐싱 별도 설정 필요 자동으로 Next.js 서버 또는 CDN 연동
브라우저 지원 최신 브라우저(부분 지원) 모든 브라우저 지원(JS 필요)