📍 <img /> 말고 <Image /> 써야되는 이유
<Image />는 자동으로 resize, lazy loading, layout shift 방지 등을 지원한다.
-
resize : 브라우저에 맞는 크기로 자동 resize
-
lazy loading : 화면에 보이지 않는 이미지는 필요한 시점(스크롤 내릴 때)까지 로드하지 않는 방식
근데❓ 필요하면priority옵션으로 즉시 로드할 수도 있음. -
layout shift 방지 : 늦게 로드되는 컨텐츠들로 인해, 먼저 로딩된 컨텐츠가 밀려나는 현상
근데 여기서 문제❓ width, height값이 고정이라 반응형이 제대로 안됨.
그럴땐 fill 옵션을 사용하면 된다.
📍 fill
fill 옵션일때 이미지는 자동으로 absolute를 할당받기 때문에, 부모 요소에 position을 정해줘야한다. (보통 relative)
그리고 부모 요소에 width, height도 정해줘야함 (이미지에 말고)
반응형은 fill + aspect가 가장 간단해서 relative aspect-video w-full 이건 그냥 세트 느낌
<div className="flex flex-col gap-4">
<div className="relative aspect-video w-full">
<Image
src={item.image}
alt={`sample${index + 1}`}
fill
/>
</div>
</div>📍 priority
<Image />는 디폴트가 lazy loading이기 때문에, 이미지를 초기 로드 시점에 불러올거면 priority 옵션을 추가해야 한다.
근데 16 버전부터는 동작 방식을 명확히 하기 위해 priority 대신 <Image loading="eager" />
lazy loading 대신 <Image loading="lazy" /> 를 권장한다고 한다.
📍 quality
최적화된 이미지 품질을 조절하는 옵션으로, 디폴트 값은 75이고 쿼리스트링으로 확인 가능
작은 크기 (400px쯤?)는 50~60, 중간 크기 (800px쯤?)는 60~75으로 하는게 좋다.
<Image quality={75} />
❌주의❌
애초에 너무 저화질 이미지의 quality를 높이면, 화질 개선 없이 파일 크기만 커져버린다.
📍 src
<Image />는 최적화를 위해 string 경로만 허용한다.
Blob URL, File 객체 같은 브라우저 메모리 이미지는 처리 불가하기 때문에 이런 경우에는 그냥 <img />를 사용해야 한다.
공식문서
https://nextjs-ko.org/docs/pages/api-reference/components/image
https://nextjs.org/docs/app/api-reference/components/image
