Next.js 에서 Next/Image를 사용하여 이미지 처리하기

 

Using `<img>` could result in slower LCP and higher bandwidth. 
Use `<Image />` from `next/image` instead to utilize Image Optimization. 
See: https://nextjs.org/docs/messages/no-img-elementeslint@next/next/no-img-element

nextjs에서는 react에서 사용하는 것과 동일하게 img 태그로 이미지 처리를 하게 되면 eslint가 경고를 띄웁니다. 

<img>를 사용하면 LCP속도가 느려지므로 next.js에서는 <Image/>를 사용하여 이미지 최적화를 하라는 경고입니다.

 

위 문구를 무시하고 사용할 수는 있지만 근본적인 해결방법은 아닙니다.

그럼 어떻게 바꿔서 사용하면 될까요?

 

<Image /> 사용법

// before
<img src="/images/info.svg" alt="info"/>

기존의 이 방식에서, 

// after
import Image from 'next/image'
...

<Image
      src="https://example.com/hero.jpg"
      alt="Landscape picture"
      width={800}
      height={500}
/>

이렇게 next/image의 Image를 사용하여 사용하라는 뜻입니다.

 

 

리모트 이미지인 경우

src를 로컬 이미지를 사용하는 경우는 크게 문제가 되지 않지만 외부 링크를 사용하는 리모트 이미지의 경우엔 보안상의 문제로 이미지를 제공하는 서버가 안전한 서버임을 next.config.js 파일에 알려주어야 합니다.

// next.config.js
module.exports = {
  images: {
    domains: ["example.com"],
  },
};

 

 

next/image을 써야하는 이유

그럼 next/image은 어떤 기능을 가지고 있길래 최적화가 가능한 건지 알아보겠습니다.

 

1. lazy loading 

lazy loading은 스크린 밖에 있는 이미지들의 로딩은 지연시키고 스크린 안에 있는 이미지만을 로드하는 기능이며 기본으로 적용이 되어있습니다. 이 속성을 끄려면 priority={true}의 옵션을 설정하여 꺼줄 수 있습니다.

 

2. 이미지 사이즈 최적화

디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원하며 webp와 같은 용량이 적은 포맷으로 이미지를 변환하여 보입니다. 또한 이미 로드된 이미지는 캐시가 만료될 때까지 캐시된 이미지가 제공되기 때문에 두 번째 요청은 첫 번째 요청보다 빠르게 볼 수 있습니다.

 

3. placeholder 제공

이미지가 로드 되기전 이미지에 대한 영역이 잡히지 않아 레이아웃 부분이 좁아졌다 이미지가 로드된 후 레이아웃이 돌아오는 현상이 있습니다. 이 현상을 CLS(Cumulative Layout Shift)라고 부르며 이 현상을 방지하기 위해 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시하여 레이아웃의 무너짐을 막아줍니다. placeholder는 빈 영역 또는 blur 이미지(로컬 이미지의 경우 build 타임에 생성, 리모트 이미지의 경우에는 base64로 인코딩된 data url을 지정해 줘야 함)로 적용할 수도 있고, 커스텀하게 설정할 수도 있습니다.

 

 

---

nextjs에서는 최적화에 대한 좋은 기능들이 내장되어있어 제공하는 기능을 안 쓸 이유가 없어 보였습니다. 기존 img 태그에서 Image로 이미지를 로드하는 방식을 교체한다면 많은 측면에서 비용을 절감할 수 있을 겁니다. 더 자세한 옵션들을 살펴보아 이후 작업에서 더 잘 사용해야겠습니다.

 

---

https://fe-developers.kakaoent.com/2022/220714-next-image/

https://nextjs.org/docs/messages/no-img-element#possible-ways-to-fix-it