Next/image 기본 기능과 장점

  1. Laze loading

모니터 스크린 영역 안에 있는 이미지만 로드 하는 최적화 기술이다. HTML 기본 태그 img 태그에는 loading="laze" 속성을 적용 사용할 수 있다. Next/image 에서는 기본으로 적용된다. 해당 기능을 끄고 싶은 경우는 곧 설명할 priority 속성을 명시해주거나 loading="eager" 속성을 명시 해주면 된다. priority 속성을 설정하는것이 더 권장되는 방식이다.

  1. 이미지 사이즈 최적화

Next/image 는 디바이스 크기별로 srcSet 을 미리 지정해두고, 사용자의 디바이스 에 맞는 이미지를 다운로드 할 수 있게 지원한다. 또 webp 와 같은 용량이 작은 포맷으로 변환 제공한다. 최초 접속시 이러한 작업이Next.js 서버에서 진행된다.

  1. Placeholder 제공

CLS(Cumulative Layout Shift) 이미지가 로드 되기 전까지 영역의 높이가 0 이 였다가, 이미지가 로드 된 후 이미지영역 만큼 늘어나서 레이아웃이 출렁이거나 흔들리는 현상. 이런 현상을 방지하기 위해 placeholder 를 제공한다. 이미지가 로드 되기 전에 이미지 영역만큼 영역을 차지하고 있는 용량이 작은 blur (흐릿한이미지)를 제공한다.

Props

import testImage from "/public/testImage.jpg" 
  <Image
      src={testImage} //이미지 파일 경로, 필수요소
      width={500} //단위 px, 필수요소
      height={500} //단위 px, 필수요소
      alt="testImage" //문자열, 필수요소
      fill
      style={{objectFit: "contain"}}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      placeholder = 'empty' // "empty" | "blur" | "data:image/..."
      priority
      quality={75}
      blurDataURL="www.example.com/test.jpg"
    />