NextJS Image 사용 방법

NextJS의 Image 컴포넌트를 이용하면 이미지 최적화를 쉽게 할 수 있다.

확장자를 저용량인 webp로 바꿔준다거나 viewport에 적합한 이미지를 다운로드 한다거나 lazy loading 등등

개발자가 일일이 하기 귀찮은 작업을 알아서 해준다.

 

다만 일반 image 엘리먼트가 아니기 때문에 잘 파악하고 있지 못하면

화면에 따라 레이아웃이 변해야하는 등의 반응형 개발에 어려움이 생긴다.

공식문서에서 소개하는 내용을 쉽게 볼 수 있도록 정리하고자 한다.

src

아래와 같이 이미지를 import 해서 src에 넣는다.

 

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

/* ... */

<Image
  src={profilePic}
/>

 

dynamic import는 불가능하다고 한다.

빌드시에 이미지 분석을 해야 최적화 등을 할 수 있는데 그러지 못하기 때문이다.

 

local이 아닌 remote 이미지를 불러올 경우 src에는 url을 넣는다.

빌드시에 접근할 수 없기 때문에 아래처럼 width와 height를 명시해야 한다.

 

<Image
  src="/me.png"
  width={500}
  height={500}
/>

width, height

CLS(Cumulative Layout Shift) 현상을 막기 위해 원본 이미지의 크기에 따라 자동으로 설정된다.

 

layout shift를 막기 위해서 항상 설정해야만 하는데 다음 중 한 가지 방식으로 한다.

첫 번째, static import를 사용하여 자동으로 이미지의 width와 height를 정하게 한다.

두 번째, width와 height를 명시적으로 정해준다.

세 번째, layout="fill"을 이용해서 부모의 크기를 따라가게 한다.

 

이미지의 사이즈를 모를 경우 다음 중 한 가지 방식으로 한다.

첫 번째, layout="fill" 을 사용한다.

두 번째, 이미지 소스의 크기를 변경하는게 가능하다면 특정한 사이즈로 변경한다.

세 번째, (생략, 공식문서 참고)

layout

네 가지 옵션이 있다.

intrinsic은 기본값으로 viewport가 줄어들면 줄어들고 커질 때에는 크기를 유지한다.

fixed는 viewport가 달라져도 크기를 고정한다.

responsive는 viewport가 줄어들면 줄어들고 커지면 커진다.

부모의 display는 block이어야 한다.

fill은 width와 height를 부모의 크기에 맞게 늘린다.

objectFit을 같이 이용해서 이미지를 비율에 맞게 늘이거나 할 수 있다.

부모의 position은 relative여야 한다.

sizes

layout이 fill, responsive, raw일 경우 sizes를 설정해야 한다.

예를 들어 부모의 레이아웃이 viewport의 절반을 넘을 일이 없을 경우 sizes="50vw"로 하여 이미지의 크기를 한정해준다.

불필요하게 큰 이미지를 불러오지 않도록 하여 성능 개선에 큰 영향을 준다.

브라우저가 어떤 크기의 이미지를 다운 받아야하는지 알려주는 것이다.

https://nextjs.org/docs/api-reference/next/image#sizes

placeholder

blur나 empty를 사용할 수 있다.

blur로 했을 경우 blurDataURL(placeholder용 이미지) 설정을 해야한다.

그러나 static import로 src에 이미지를 넣었을 경우 blur image가 자동으로 생성된다.

empty인 경우 로딩 될 때까지 빈 공간으로 보이게 된다.

priority

LCP(Large Contentful Paint)인 경우에 설정한다.

loading이 오래걸리는 이미지는 LCP를 유발 할 수 있으니 사용을 고려해야 한다.

설정하면 우선적으로 loading된다.

loading이 오래 걸리는 이미지에 적용한다.

 

참고

https://nextjs.org/docs/basic-features/image-optimization

https://nextjs.org/docs/api-reference/next/image