Next.js 이미지 최적화 개념 설명
웹 페이지에서 이미지는 전체 용량의 큰 비중을 차지하는 요소로, 사용자 경험(UX)과 SEO에 직결됨. Next.js는 next/image 라이브러리의 Image 컴포넌트를 통해 자동 최적화 기능을 제공함. 이는 브라우저가 이미지를 다운로드하기 전, 서버단에서 이미지 크기 조정 및 포맷 변환을 수행하여 전송량을 최소화하는 원리임.
1. 포맷 최적화 (WebP, AVIF)
기존 JPEG 대비 압축률이 월등한 WebP나 AVIF 포맷으로 자동 변환하여 제공. 브라우저 지원 환경에 맞춰 최적의 포맷을 선택함.
2. Lazy Loading (지연 로딩)
뷰포트에 보이지 않는 이미지는 로드하지 않다가, 사용자가 스크롤하여 이미지에 가까워질 때 로딩을 시작함. 초기 페이지 로딩 속도 개선에 탁월함.
3. Responsive Sizes (반응형 사이즈)
사용자의 디바이스 화면 크기에 맞춰 적절한 해상도의 이미지를 생성함. 모바일 사용자에게 4K급 이미지를 전송하는 낭비를 방지함.
사용 상황 예시
- 이커머스 메인 페이지: 수백 개의 상품 썸네일을 한꺼번에 노출해야 할 때 지연 로딩을 통해 초기 속도 유지
- 고해상도 배너: 데스크톱과 모바일에서 각각 다른 크기의 이미지가 필요할 때
srcset을 자동 생성하여 대응 - 블로그 포스팅: 다양한 포맷의 업로드 이미지를 일관되게 WebP로 변환하여 트래픽 절감
기본 문법
next/image를 사용하면 복잡한 설정 없이도 최적화 적용 가능.
import Image from 'next/image'
// 로컬 이미지 또는 외부 URL 사용
<Image
src="/profile.png"
alt="프로필 이미지"
width={500}
height={500}
priority // LCP 요소인 경우 우선 로딩 설정
placeholder="blur" // 로딩 중 블러 처리된 이미지 노출
/>자주 하는 실수
- 전체 이미지 동시 로드:
priority속성을 모든 이미지에 남발하여 초기 로딩 성능을 오히려 저하시키는 실수. 중요한 메인 배너에만 제한적 사용 권장. - 고정 크기 미지정:
width와height를 누락하거나 잘못 설정하여 레이아웃 시프트(CLS) 발생. 이미지 영역을 미리 확보하는 것이 중요. - 외부 도메인 설정 누락: 외부 URL 이미지를 사용할 때
next.config.js에 도메인 허용 설정을 잊어 이미지가 엑스박스로 표시되는 경우 빈번함.
핵심 요약
- WebP/AVIF 자동 변환을 통한 용량 최적화
- Lazy Loading 및 반응형 사이즈 제공으로 성능 극대화
- 정확한 width/height 설정으로 레이아웃 흔들림 방지
