KAKAO.GG
KAKAO.GG
Header Banner
Kakao Logo

TECH.KAKAO.GG

기술 자료/FrontEnd/Next.js Image 컴포넌트 최적화하기

Next.js Image 컴포넌트 최적화하기

FrontEnd
👁️ 5642개월 전

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 점수를 얻을 수 있습니다.