[Learn Next.js] 이미지 최적화

이미지 최적화

Next.js에서 이미지와 같은 정적 자산을 보관하기 위해 public 폴더를 사용합니다. 이 폴더에 있는 파일은 애플리케이션에서 바로 참조될 수 있습니다.

예를 들면, public/my-profile.png 파일이 있는 경우 다음 코드로 이미지를 참조할 수 있습니다.

<img src="/my-profile.png" alt="my profile image" />

하지만, img 태그를 이용해 이미지를 렌더링하는 경우 많은 작업들을 직접 처리해야하는 단점이 존재합니다.

• 화면 크기에 따라 변하는 이미지 (반응형 이미지) 설정
• 기기 종류에 따라 달라지는 이미지 설정
• 이미지를 불러올 때 레이아웃 변경 피하기
• 뷰포트에 포함되지 않는 이미지 지연 로딩

이미지 최적화

Next.js는 next/image 모듈에서 제공하는 Image 컴포넌트를 통해 이미지를 자동 최적화를 달성할 수 있습니다.

Image 컴포넌트는 img 태그의 확장이며, 다음 작업을 자동으로 처리하여 최적화합니다.

• 이미지를 불러올 때 레이아웃 변경 방지
• 뷰포트 크기에 따라 이미지 크기 자동 변경
• 이미지 지연 로딩 (이미지가 뷰포트에 포함될 때 로드)
• 최신 이미지 포맷 (WebP, AVIF 등)으로 이미지 제공 (브라우저가 지원하는 경우)

다음은 Image 컴포넌트를 이용해 이미지를 렌더링하는 코드의 예시입니다.

<div>
  <Image
    src="/my-profile-desktop.png"
    width={600}
    height={600}
    className="hidden md:block"
    alt="My Profile image desktop version"
  />
  <Image
    src="/my-profile-mobile.png"
    width={400}
    height={400}
    className="block md:hidden"
    alt="My Profile image mobile version"
  />
</div>