Next.js에서는 이미지에 대한 최적화를 기본으로 제공한다
Next.js를 쓰지 않았을 때는 Lazy loading등 성능을 위해 고려해야할 사항이 많았는데 Next.js에서는 기본으로 제공을 해준다고한다.
한번 살펴보면서 공부해보자
Image 컴포넌트에 내장된 최적화는 아래와 같다
정적으로 가져온 이미지 또는 layout="fill" 인 이미지를 제외하고 width , height속성이 필요하다
intrinsic (default) - 기본 크기를 유지하지만 화면 크기가 이미지의 크기보다 작아질 경우 부모 컨테이너 너비에 맞게 축소된다
fixed - 화면 크기와 상관없이 지정된 width, height를 유지한다
responsive - 부모가 display: block 이어야 하며, 부모 컨테이너의 크기에 맞춰진다 (이미지의 비율은 유지)
fill - 부모가 display: relative 일 경우 부모의 width, height와 동일하게 맞춰진다. 주로 objectFit과 함께 사용
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}
/>
);
};
1부터 100 사이의 퀄리티(default 75)를 지정하고 숫자가 높을수록 퀄리티가 높다는 의미
true인 경우 이미지가 높은 우선 순위와 preload로 간주된다
LCP (Large Contentful Paint) 요소가 될 이미지에 priority속성을 추가해야 한다.
즉, 페이지 상단에 스크롤 없이 볼 수 없는 부분에만 사용해야한다.
기본값은 false 이다
이미지가 로드되는 동안 보여질 placeholder이다. 스켈레톤 UI와 유사하다고 볼 수도 있겠다
지정 가능한 속성은 blur, empty 이며 기본값은 'empty'이다
'blur'속성인 경우 blurDataURL을 통해 이미지를 불러 올 수 있으며 정적, 동적으로 이미지를 지정할 수 있다
base64로 인코딩된 이미지여야 하며, 10px이하의 이미지를 권장한다
'empty'속성인 경우에는 빈 공간만 보여준다.
Next.js에서 이미지의 기본 로드 방식은 LazyLoading이며 기본값은 ‘lazy’이다
lazy인 경우에 뷰포트에 계산된 거리에 도달 할 때까지 로드를 연기한다
반대로 ‘eager’ 속성인 경우에는 이미지를 즉시 로드한다