Next.js를 처음 접했을 때 Routing을 제일 먼저 배우고 다음으로 배웠던 게 Image 컴포넌트였다. Image 컴포넌트는 img 태그를 사용했을 때보다 이미지 최적화라는 장점이 뚜렷하다고 한다. 하지만 사용해보니 불편한 게 정말 많았던 것 같다. 화질 저하 이슈도 있었고, 가끔씩 Image 컴포넌트의 최적화 기능을 사용하지 않는다는 글들을 보면서 Image 컴포넌트를 사용하는 장점이 뭐고, 어떻게 사용해야 잘 사용하는지를 제대로 알고 사용해야겠다고 생각됐다.
그래서 좀 더 늦어지면 수정하기 귀찮다고 미룰 것 같아서 프로젝트 초반에 Image 컴포넌트에 대해 확실히 정리하고 가기로 했다.

next/image

Next.js에서 이미지 최적화를 위해 제공되는 컴포넌트로 Next.js 서버를 거쳐 최적화된 크기의 이미지를 가져온다.

아래와 같은 장점을 가진다.

최적화
이미지 크기를 미리 줄여주어 사용자의 이미지 로딩 시간을 단축시켜 사용자 경험을 향상시킨다.
사용자 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지를 다운로드 받을 수 있다. 디바이스가 작을 수록 성능 개선이 클 수 있다.
webp 같은 최신 이미지 포맷을 지원하여 이미지 용량을 최적화하고 이미지 로딩 시간을 줄인다.
지연 로딩
이미지가 뷰포트에 근접 할 때까지 로딩을 지연시킨다. 이는 초기 페이지 로드 시 필요하지 않은 리소스를 로드하지 않음으로써 성능을 향상시킨다.
자동 캐싱
서버에서 이미지 크기를 자동으로 조절하고 캐싱한다. 캐싱을 하면 요청 시 빠르게 제공할 수 있어 반복된 요청에 대한 서버의 부담을 줄인다.
placeholder 제공
Next/Image는 레이아웃이 흔들리는 현상(CLS(Cumulative Layout Shift))을 방지한다. 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 한다.

다음과 같이 Image 컴포넌트를 import 하여 사용할 수 있다.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

일반적인 img 태그와 비슷한 필수 속성을 가진다.

src : 이미지 경로
alt : 대체 텍스트
width : 이미지 가로 크기
height : 이미지 세로 크기

아래 내용들은 선택 속성이다.
1. fill : (boolean) 이미지를 부모 컨테이너의 크기에 맞춰서 자동으로 채우도록 설정한다.
fill 속성을 사용할 경우에는 width/height 값을 지정하지 않아도 된다. 이미지 size를 모르는 경우에 유용하다.
fill은 자동으로 position: absolute 속성이 부여되므로, 부모 요소에는 position: relative 등과 같은 속성이 부여되어 있어야 한다.

object-fit: "contain"을 style에 추가해주면, 이미지가 컨테이너에 맞게 늘어난다.
object-fit: "cover"을 style에 추가해주면, 이미지를 전체 컨테이너에 채우고 종횡비를 유지하기 위해 잘라낸다.

2. sizes : (String) 미디어 쿼리와 같이 사용하여 뷰포트에 따라 이미지의 크기를 지정한다.

import Image from 'next/image'
 
export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

3. quantity : (number) 이미지의 품질을 지정한다. 1부터 100까지의 정수 값을 이용한다. 기본 값은 75이다.

4. priority : (boolean) loading="lazy" 속성을 사용하지 않고 fetchPriority="high" 속성을 사용하여 이미지를 우선적으로 로딩한다.

5. placeholder : (String) 이미지의 플레이스홀더를 사용하여 로딩한다.

   blur: 블러 처리된 이미지를 로딩 전에 표시 (사용 시 blurDataURL 필요).
   empty: 별도의 자리 표시자 없이 바로 로드. 공간은 차지한다. (기본값)
   data:image/... : 이미지를 포함한 데이터를 Base64로 인코딩

6. onLoadingComplete : 이미지가 완전히 로드되고 플레이스 홀더가 제거되면 호출되는 콜백 함수.

7. onError : 이미지가 로드되지 않을 경우 호출되는 콜백 함수.

8. loading : (String) 이미지 로딩 방법을 지정한다. (기본 값 = lazy)
   eager 값을 줄 경우 즉시 로드한다. 하지만, 이 속성은 성능저하를 일으킬 수 있으므로, priority 속성을 사용하는 걸 권고한다.

9. unoptimized : (boolean) true이면 원본 이미지가 품질, 크기 또는 형식을 변경하지 않고 그대로 제공된다.

외부 이미지

Next.js 14에서 원격 이미지를 사용하려면 보안과 성능 최적화를 위해 next.config.js 파일에서 외부 도메인을 허용하는 설정을 해야 한다.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

pathname에 와일드카드(* 또는 ** )를 사용하여 해당 도메인에서 제공되는 모든 이미지를 허용할 수 있다.

참고 자료

<Image>
Goodbye next/image
Next/Image를 활용한 이미지 최적화