Next/Image를 활용한 이미지 최적화

📌 Image Component

next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다.

Image 컴포넌트에서 제공하는 대표적인 기능은 아래와 같다.

• lazy loading
• 이미지 사이즈 최적화하여 빠른 로딩이 가능하다.
• placeholder 제공하여 CLS(Cumulative Layout Shift)를 방지해 준다.

CLS(Cumulative Layout Shift)란? 어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 현상

👉 lazy loading

이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다. 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 해준다.

Next/Image를 사용하게 되면 자동으로 lazy loading이 적용된다.

👉 이미지 사이즈 최적화

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해 두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원한다.

👉 placeholder 제공

Next/Image는 레이아웃이 흔들리는 CLS(Cumulative Layout Shift) 현상을 방지하기 위해 placeholder를 제공한다. placeholder는 빈 영역 또는 blur 이미지를 적용할 수 있다.

로컬 이미지의 경우 build 타임에 생성되고, 원격 이미지의 경우에는 base64로 인코딩 된 data url 을 지정해 주어야 한다.

📌 사용법

로컬 이미지의 경우

import Image from 'next/image';
import profilePic from '../public/me.png';

function Me() {
  return (
    <Image
      src={profilePic}
      alt="Picture of me"
      placeholder="blur" // Optional blur-up while loading
    />
  );
}

 

빌드 타임에 import 된 이미지 파일을 기준으로 자동으로 width, height 지정하고, base64로 인코딩된 blur 이미지가 생성되어 별도의 작업 없이 placeholder=“blur”를 사용할 수 있다.

원격 이미지의 경우

👉 Domains 설정 필수!

// next.config.js
module.exports = {
  images: {
    domains: ['your-cdn-image-domain'],
  },
};

 

원격 이미지의 경우 next.js 서버에서 원격 서버에 직접 요청을 하기 때문에 모든 url에 대한 접근을 허용하면 악의를 가진 사용자에 의해 공격받을 가능성이 있다. 이러한 이유로 원격 서버가 안전한 서버라는 것을 next.config.js파일에 명시하여 next.js에게 알려주어야 한다.

import Image from 'next/image';

export default function Me() {
  return <Image src="/me.png" alt="Picture of me" width={500} height={500} />;
}

 

사용법은 로컬 이미지와 거의 동일하다. 이미지 파일을 import 하는 대신에 src에 이미지 경로를 작성한다. 원격 이미지는 빌드 타임에 이미지 파일에 접근하는 것이 불가능하기 때문에 width, height를 명시해주어야 한다. blur 이미지를 사용하고 싶을 경우에는 blurDataURL 속성에 base64로 인코딩 된 이미지 데이터를 작성해주어야 한다.

👉 Priority

각 페이지의 LCP(Large Contentful Paint) 요소가 될 이미지에 priority 속성을 추가해야 합니다. 이렇게 하면 next.js가 로드할 이미지의 우선순위를 지정할 수 있어 성능을 향상 시킬 수 있다.
LCP 요소는 일반적으로 페이지의 뷰포트 내에서 볼 수 있는 가장 큰 이미지이며, LCP 요소의 priority 속성이 없는 이미지인 경우 콘솔 경고가 표시된다.

👉 Quality

default 퀄리티 속성은 75이며, 1~100 사이의 값을 가진다. 사진의 선명도를 높이기 위해서는 quality 값을 default 값보다 높여주면 된다.

👉 Image Sizing

next/image에 크기를 명시하는 방법은 3가지가 있다.

1. static import를 사용하기
2. remote 이미지를 사용하는 경우, heigth, width 속성 표기
3. layout='fill' 사용해서 부모 element 크기와 맞추기 (이미지 크기를 모르는 경우 사용)

 

[참고]

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

https://velog.io/@tunggary/Next.js-Image-Optimization