Next.js Image 알아보기

Next.js에서는 이미지에 대한 최적화를 기본으로 제공한다

 

Next.js를 쓰지 않았을 때는 Lazy loading등 성능을 위해 고려해야할 사항이 많았는데 Next.js에서는 기본으로 제공을 해준다고한다.

한번 살펴보면서 공부해보자 

 

 

Image 컴포넌트에 내장된 최적화는 아래와 같다

• 향상된 성능 - 최신 이미지 형식을 사용하며 각 디바이스에 맞는 올바른 크기의 이미지를 제공한다
• 시각적 안정성 - 자동으로 CLS (Cumulative Layout Shift) 를 방지해준다
• 빠른 페이지 로드 - 이미지가 뷰포트에 들어 왔을 때만 로드되기 때문에 초기 페이지 로드 속도가 빠르다
• 유연한 에셋 - 외부에 저장된 이미지의 경우에도 크기 조정이 가능

필수 props

src

1. 정적으로 가져온 이미지 파일
2. 외부 URL ( 외부 url을 사용하는 경우는 보안상의 이유로 next.config.js에 remotePatterns 속성을 추가하여야 한다 )

width, height

정적으로 가져온 이미지 또는 layout="fill" 인 이미지를 제외하고 width , height속성이 필요하다

 

 

옵셔널 Props

layout

intrinsic (default) - 기본 크기를 유지하지만 화면 크기가 이미지의 크기보다 작아질 경우 부모 컨테이너 너비에 맞게 축소된다

fixed - 화면 크기와 상관없이 지정된 width, height를 유지한다

responsive - 부모가 display: block 이어야 하며, 부모 컨테이너의 크기에 맞춰진다 (이미지의 비율은 유지)

fill - 부모가 display: relative 일 경우 부모의 width, height와 동일하게 맞춰진다. 주로 objectFit과 함께 사용

 

loader

URL을 확인하는 데 사용되는 사용자 정의 함수

src, width, quality를 props로 받아 이미지에 대한 URL 문자열을 리턴한다.

 

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

 

 

quality

1부터 100 사이의 퀄리티(default 75)를 지정하고 숫자가 높을수록 퀄리티가 높다는 의미

 

priority

true인 경우 이미지가 높은 우선 순위와 preload로 간주된다

LCP(Large Contentful Paint) 요소가 될 이미지에 priority속성을 추가해야 한다.

즉, 페이지 상단에 스크롤 없이 볼 수 없는 부분에만 사용해야한다.

기본값은 'false'이다

 

placeholder

이미지가 로드되는 동안 보여질 placeholder이다. 스켈레톤 UI와 유사하다고 볼 수도 있겠다

지정 가능한 속성은 blur, empty 이며 기본값은 'empty'이다

'blur'속성인 경우 blurDataURL을 통해 이미지를 불러 올 수 있으며 정적, 동적으로 이미지를 지정할 수 있다

base64로 인코딩된 이미지여야 하며, 10px이하의 이미지를 권장한다

'empty'속성인 경우에는 빈 공간만 보여준다.

 

loading

Next.js에서 이미지의 기본 로드 방식은 LazyLoading이며 기본값은 ‘lazy’이다

lazy인 경우에 뷰포트에 계산된 거리에 도달 할 때까지 로드를 연기한다

반대로 ‘eager’ 속성인 경우에는 이미지를 즉시 로드한다

 

reference

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