참고 블로그1

참고 블로그2

참고 블로그3

참고 블로그4

Next.js는 Node.js의 내장 라이브러리를 통해 자동으로 이미지를 최적화한다.

인터넷 환경에 따라 이미지 퀄리티를 다르게 불러오고, webp이미지로 자동 변환된다.

작성 예

<Image
  src={image} //정적 경로
  alt="image"
  width={256}
  height={256}
  quality={75}
/>

추가로, 아래 속성을 추가하면 로딩 중 나타낼 이미지를 설정할 수도 있다.

<Image
  src={image} //정적 경로
  alt="image"
  width={256}
  height={256}
  quality={75}
  placeholder="blur"
  blurDataURL={imgUrl}
/>

➕ blurDataURL에는 원본 경로가 아닌, base64로 처리된 이미지를 넣어준다.