Next.js의 이미지 최적화

 

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

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

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. 제품 갤러리

<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
	<Image
	  src="/hero-desktop.png"
    width={1000}
    height={760}
    className="hidden md:block"
    alt="Screenshots of the dashboard and invoices page"
  />
  <Image
	  src="/hero-mobile.png"
    width={560}
    height={620}
    className="block md:hidden"
    alt="Screenshots of the dashboard and invoices page"
  />
</div>

성능 모니터링

1. Chrome DevTools
   • Network 탭에서 이미지 로딩 시간 확인
   • Performance 탭에서 이미지 관련 성능 분석
2. Lighthouse
   • 이미지 최적화 점수 확인
   • 최적화 추천사항 검토

 

결론

Next.js의 Image 컴포넌트를 활용하면:

1. 자동화된 이미지 최적화
2. 향상된 성능과 사용자 경험
3. 개발자 경험 개선

특히 next/image의 자동 최적화 기능은 수동으로 처리해야 하는 많은 최적화 작업을 자동화하여 개발 효율성을 크게 높여준다.

참고자료: Next.js Image Optimization