Next.js Image 컴포넌트

Next/Image 컴포넌트의 기능

LazyLoading

<img
  src="/inflearn.png"
  width={110}
  height={20}
  alt="인프런 로고"
  loading="lazy"
/>

=>

<Image
  src={img}
  alt="인프런 로고"
/>

• 기본적인 image태그를 통한 lazy loading을 구현하려면 Intersection Observer를 통해서 element가 보일 때 이미지를 로드하도록 직접 구현해야한다(현재 크롬에서는 loading="lazy"옵션으로 쉽게 구현할 수는 있다.

이미지 사이즈 최적화(webp)

<Image
  src={img}
  alt="인프런 로고"
  quality={75}
/>

• 이미지를 그대로 내려받는 것이 아니라, webp 형식으로 가져오기 때문에 원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있다.

• quality의 기본 값은 75이다.

placeholder 제공

<Image
  src={img}
  alt="인프런 로고"
  placehoder="blur"
/>

• placeholder를 제공하여 이미지가 불러오는 동안에 영역의 높이가 변경되어 레이아웃이 흔들리는(CLS) 문제를 방지해준다.

어떻게 이런 기능을 제공할까?

내부 이미지

• Next/Image를 사용하려면 이미지를 static하게 import 해야 한다.
  즉, 빌드타임에 image의 정보(사이즈)를 알 수 있기 때문에 미리 최적화하여 서빙할 수 있다.
  

외부 이미지

• 외부 링크로 가져오고 싶다면, next.config.ts에 아래와 같이 설정해 주어야 한다.
  • 기본적으로 next는 공격 방어를 위해 이미지를 서빙하는 서버에 대해 whitelist로 관리하도록 한다. 만약 설정하지 않는다면 에러가 난다.

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['lecture-1.vercel.app'],
  },
};

• 반드시 사이즈(width, height)를 지정해 주어야 한다.
  • 외부 링크이기 때문에 이미지의 사이즈를 모르는 경우에는 layout옵션을 설정해주어야한다.
    • intrinsic: default, 컨테이너 사이즈가 이미지 사이즈보다 작아졌을 때, 컨테이너에 맞게 크기를 줄인다.
    • fixed: 이미지 사이즈를 width, height로 고정한다.
    • responsive: 이미지 비율은 유지한 채로, 컨테이너에 꽉 차게 된다.
    • fill: relative 포지션을 가진 조상의 width, heigt와 동일하게 조정된다(style의 objectFit과 함께 사용된다).
      • objectFit이 없는 경우: 비율과 관계없이 조상을 따른다.
      • objectFit이 cover인 경우: 비율은 유지한 채 꽉 차게 만든다(잘린다).

Uploaded by N2T

(24.01.13 14:20)에 작성된 글 입니다.