img을 대체하는 Next.js의 Image

보통 React를 사용할 때 img 태그를 그대로 사용하는 경우가 많다. 하지만 Next.js를 사용하고 있다면 Image 컴포넌트를 사용해서 웹성능을 높일 수 있다.

1. Image 컴포넌트 소개

Next.js의 Image 컴포넌트는 이미지 최적화를 기본적으로 제공한다. 자동으로 다양한 크기의 이미지를 생성하고, 적절한 포맷과 크기를 클라이언트에 제공한다. 고정된 width와 height 값으로 이미지를 랜더링하고자 할 때의 예시 코드이다.

import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="/example.jpg"
      alt="Example image"
      width={200}
      height={200}
    />
  );
}

2. Chrome 개발자 도구에서 어떤 최적화를 해주는지 확인!

Image 컴포넌트를 사용했을 때, 브라우저에서 최적화된 결과를 확인할 수 있다. Chrome 개발자 도구의 Inspect로 이미지 태그를 확인해보면 다음과 같은 점이 보인다:

• loading="lazy" 적용: 기본적으로 이미지가 lazy loading되도록 설정된다. 이는 화면에 보이지 않는 이미지는 로드하지 않아 성능을 개선한다.
• srcset 속성 추가: 다양한 해상도에 맞는 이미지 소스를 생성하여 srcset에 포함한다. 이를 통해 고해상도 디스플레이에서도 적절한 품질의 이미지를 제공한다.

예시로 렌더링된 HTML은 아래와 같다:

<img
  src="/_next/image?url=%2Fexample.jpg&w=384&q=75"
  srcset="/_next/image?url=%2Fexample.jpg&w=200&q=75 1x, /_next/image?url=%2Fexample.jpg&w=384&q=75 2x"
  loading="lazy"
  decoding="async"
  alt="Example image"
/>

3. fill 속성 사용하기

Image 컴포넌트는 고정된 크기 대신 부모 요소의 크기에 맞게 이미지를 채우도록 설정할 수 있다. 이때 사용하는 속성이 fill이다. 사용법은 아래와 같다:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/example.jpg"
    alt="Example image"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

이 코드는 부모 요소(div)의 크기에 맞춰 이미지를 채운다. style 속성에서 objectFit을 사용해 이미지 비율 조정을 제어할 수도 있다. objectFit은 이미지가 부모 요소 내에서 어떻게 크기 조정 및 정렬되는지를 결정한다. 주요 값들은 다음과 같다:

• cover: 이미지가 부모 요소를 완전히 채우도록 크기를 조정하되, 원본 비율을 유지한다.
• contain: 이미지가 부모 요소 안에 완전히 들어가도록 크기를 조정하며, 원본 비율을 유지한다.
• fill: 이미지가 부모 요소의 크기에 맞게 왜곡 없이 채워진다.

예를 들어:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/example.jpg"
    alt="Example image"
    fill
    style={{ objectFit: 'contain' }}
  />
</div>

위 코드는 이미지가 부모 요소 안에 들어가되 비율이 유지되도록 조정한다.

참고로 예전에는 objectFit을 담당하는 prop들이 Image에 별도로 존재했지만 13버전에서 부터는 deprecated 되었다고 한다.

4. quality 속성으로 이미지 품질 조정하기

Image 컴포넌트는 quality 속성을 통해 이미지 품질을 조정할 수 있다. 기본값은 75이며, 숫자(0~100)로 품질을 설정할 수 있다.

<Image
  src="/example.jpg"
  alt="Example image"
  width={200}
  height={200}
  quality={90}
/>

위 예시는 이미지 품질을 90으로 설정하여 렌더링한다. 품질을 높이면 이미지가 더 선명해지지만, 파일 크기가 커질 수 있으니 적절한 값을 선택하는 것이 중요하다.

(참고) fill과 Tailwind CSS를 사용해서 모서리를 둥글게 만들기

fill 속성을 사용하면서 Tailwind CSS의 rounded-md 클래스를 적용하고 싶다면, 부모 요소에 overflow-hidden을 추가해야 모서리가 둥글게 잘려 보인다. 이유는 fill 속성으로 설정된 Image 컴포넌트는 부모 요소를 완전히 채우기 때문에, CSS의 border-radius 효과가 제대로 적용되기 위해서는 부모 요소의 overflow가 hidden으로 설정되어야 한다.

예시는 다음과 같다:

<div className="relative w-full h-64 rounded-md overflow-hidden">
  <Image
    src="/example.jpg"
    alt="Example image"
    fill
  />
</div>

이렇게 하면 둥근 모서리가 적용된 상태로 이미지를 렌더링할 수 있다.