Next.js Image 컴포넌트 최적화하기
KUKJIN LEE • 1개월 전 작성
Next.js Image 컴포넌트 속성 최적화
화질 개선
<Image
quality={95} // 기본값 75에서 상향 조정
/>크기 및 반응형 최적화
<Image
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 800px, 66vw"
// 모바일: 전체 너비
// 태블릿: 800px
// 데스크톱: 뷰포트의 66%
/>
로딩 최적화
<Image
priority // LCP(Largest Contentful Paint) 이미지용
loading="lazy" // 뷰포트 밖 이미지용
/>
이미지 포맷 최적화 (next.config.js)
module.exports = {
images: {
formats: ['image/avif', 'image/webp'], // 최신 이미지 포맷 지원
},
}적용 컴포넌트 예시
메인 이미지 (LCP)
<Image
src={imagePath}
alt={imageAlt}
width={800}
height={400}
quality={95}
priority
className="object-cover"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 800px, 66vw"
/>CDN 최적화 (Cloudfront 사용 시)
-
이미지 캐싱 설정
-
압축 설정
-
WebP 자동 변환 설정
성능 체크 포인트
-
[x] 메인 이미지에 priority 적용
-
[x] 보조 이미지에 lazy loading 적용
-
[x] 적절한 sizes 속성 설정
-
[x] 높은 quality 값 (95) 설정
-
[x] 최신 이미지 포맷 지원
-
[x] CDN 최적화 설정
최적화를 통해 향상된 이미지 품질(화질), 로딩 성능, SEO 점수를 얻을 수 있습니다.
