[Next] next/image

next/image 기능

• lazy loading (이미지를 로드하느 시점을 필요할 때까지 지연)
• 이미지 사이즈 최적화
• placeholer 제공 (이미지를 로드하기 전에 이미지 영역만큼 표시해 레이아웃 흔들림 방지)

import Image from "next/image";

const App = () => {
  return (
      <div>
        <Image
            src="/test.png",
            alt="이미지 설명"
            width={300}
            height={300}
        />
    </div>
  )
}

image 최적화 시점과 재사용

요청이 들어왔을 때 dist 폴더 밑 cache/images 폴더에 최적화한 이미지를 동적으로 생성 한 뒤 이후에 동일한 요청에 대해서는 이미 만들어 놓은 최적화 이미지를 캐시로서 재사용한다.

sharp

next.js는 Sqoosh를 기본 이미지 최적화 모듈로 사용하고 있고, 빠르게 설치할 수 있으면 개발환경에 적합하다고 한다. 그렇지만 운영 환경에서는 sharp 모듈 사용을 권장하고 있다. 빌드 후 실행을 시키면 경고메시지가 노출되며 해결 방법은 모듈 설치를 해주면 해결이 된다.

npm install sharp