들어가며: 이미지 최적화가 필요한 이유

웹 성능에서 이미지는 가장 큰 비중을 차지하는 요소 중 하나이다. 최적화되지 않은 이미지는 다음과 같은 문제를 일으킬 수 있다 :

1. 느린 페이지 로딩 시간
2. 불필요한 대역폭 사용
3. 레이아웃 이동 (CLS)
4. 모바일 사용자 경험 저하

Next.js의 Image 컴포넌트

Next.js는 성능과 사용자 경험을 향상시키기 위해 이미지 최적화(Image Optimization) 기능을 제공한다. 이는 이미지 파일의 크기를 줄이고, 다양한 기기와 화면 해상도에 맞는 이미지를 자동으로 생성하여 로드 시간을 줄이고 웹사이트를 더 빠르게 만든다.

• 기능
  • 자동 크기 조정: 기기의 뷰포트 크기에 따라 이미지를 적절히 조정
  • 포맷 변환: 더 효율적인 포맷(WebP 등)으로 이미지를 자동 변환
  • 레이지 로딩(Lazy Loading): 화면에 보이는 이미지만 로드하여 초기 로드 속도를 개선
  • 최소화된 CLS: 이미지의 크기를 미리 계산하여 레이아웃 이동 방지
  • CDN 지원: 이미지를 CDN을 통해 제공하여 전송 속도 향상

기본 사용법

import Image from 'next/image'

function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      priority
    />
  )
}

주요 속성

1. src:

   • 이미지의 경로 또는 URL
   • Next.js는 보안을 위해 기본적으로 외부 이미지를 차단하므로, 외부 이미지를 사용하려면 도메인을 허용하도록 설정해야 함

   // next.config.ts
   module.exports = {
     images: {
       domains: ['example.com', 'another-domain.com'], // 허용할 도메인
     },
   };
   

2. width와 height:

   • 고정 크기를 지정

3. layout:

   • intrinsic: 이미지의 고유 비율 유지
   • responsive: 컨테이너 크기에 따라 반응형으로 조정
   • fill: 컨테이너를 완전히 채움
   • fixed: 고정 크기

4. placeholder:

   • blur: 이미지가 로드되기 전, 블러 처리된 저해상도 이미지를 표시

   • 예시:

     <Image
       src="/example.jpg"
       alt="Example"
       width={500}
       height={300}
       placeholder="blur"
       blurDataURL="data:image/jpeg;base64,[base64-string]"
     />
     

5. priority:

   • 중요 이미지를 우선적으로 로드(레이아웃의 가장 중요한 부분에 사용)

   • 예시:

     <Image
       src="/hero.jpg"
       alt="Hero Image"
       width={1200}
       height={800}
       priority
     />
     
     

예시

1. 제품 갤러리