[NextJS 15] 이미지 최적화

const Image from "next/image"

 

1) nextjs 는 기본적으로 lazy loading 을 지원한다.

정적 이미지는 lazy loading이 필요 없으므로 priority 속성 추가해주면 좋다

 

2) 사이즈는 width, height 속성으로 지정할 수 있지만 그것보단 sizes 속성을 사용하거나

Image에 fill 속성 추가한 후 이미지를 감싼 부모요소에 relative 속성을 추가하는 게 좋다.

 

3) 이미지 미리보기 띄우기 (로드되기 전 블러처리)

<Image
  src="/images/example.jpg"
  alt="예시 이미지"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="/images/example-blur.jpg"
/>