사이드 프로젝트를 진행하며 Next/Image 컴포넌트를 처음 사용했습니다. 왜 img 태그가 있는데 Image태그를 만들었는지 궁금해져 학습한 내용을 정리하고자합니다.
Next의 이미지 최적화
Next.js에서는 Image를 통해 기본적으로 아래 4가지의 기능을 제공합니다.
1. Web, Vitals의 CLS 방지
2. 이미지 리사이징 기능
3. lazy load를 통한 우선적 이미지 노출 및 뷰포트에 노출 됏을 때 이미지 로드 기능
<Image className="mx-auto" src={lock} width={70} height={70} alt="잠금 아이콘" />
<img
src="/lock.png"
className="w-[70px] h-[70px]"
alt="back"
/>
위 사진은 Next/Image와 일반 img 태그를 사용했을 때의 결과입니다.
Image를 사용했을 때는 확장자가 webp로 변환되어 크기가 줄어든 모습을 확인할 수 있습니다.
자세히 살펴보면 Image 태그로 설정한 이미지의 이름이 쿼리스트링으로 변경된 것을 확인할 수 있습니다.
이 쿼리스트링을 살펴보면 저희가 원래 제공했던 이미지에 대한 정보와 props로 제공했던 width, 원본 품질 대비 지표를 알려주는 q(quality)에 대한 정보가 담겨있습니다.
Next/image는 컴포넌트입니다. 서버 동작시 ./_next/image라는 이미지 최적화 라우트를 생성하고 모듈을 통해 최적화를 진행합니다. 이 때, 쿼리트스링 URL 을 만들고 prop로 전달한 속성값을 통해 최적화를 진행합니다.
최초 호출 이미지는 최적화 된 이미지가 더 빠를 수 있지만 다시 동일한 이미지를 요청하는 경우에는 이미 최적화 되어 있는 이미지를 재사용하기 때문에 좀 더 빠르게 응답합니다.
응답 헤더에 있는 X-Nextjs-Cache의 HIT로 되어있다면 캐싱된 이미지를 제공하는 상태입니다. 캐싱되어 있지 않다면 MISS를 반환합니다.
모든 이미지를 최적화하면 시간이 오래 걸리지 않을까..?
Next.js에서 모든 이미지를 최적화해서 제공한다면 그것 자체도 비용이 꽤 큰 일일텐데 어떻게 하는지 궁금해서 찾아보았습니다.
찾아보니 Next.js는 모든 이미지를 최적화해주지 않는다고합니다. GIF와 같은최적화에 오래 걸리는 애니메이션 이미지, SVG는 최적화를 진행하지 않고 바로 전송한다고합니다.
Next/Image의 props
1. 기본 Props
src
- 타입:
string - 설명: 이미지의 경로(URL 또는
public폴더 내 파일 경로)를 지정합니다.
alt
- 타입:
string(필수) - 설명: 이미지의 대체 텍스트(alt text) 를 설정합니다.
width & height
- 타입:
number - 설명: 이미지의 너비(
width)와 높이(height)를 픽셀 단위로 지정합니다.
fill
- 타입:
boolean - 설명: 부모 요소의 크기에 맞춰 자동 조정됩니다. 이 때 부모 요소의 position은 relative, absolute, fixed 중 하나의 속성을 가지고 있어야합니다.
sizes
- 타입:
string - 설명: 다양한 화면 크기에 따라 다른 이미지 크기를 제공하는 반응형 설정입니다.
-
브라우저는 next/image에서 자동 생성된 소스에서 어떤 크기의 이미지를 다운로드할지 결정할 때 sizes 속성을 사용합니다.
-
sizes 속성은 next/image가 자동으로 생성하는 이미지 소스를 구성합니다.
quality
- 타입:
number(default:75) - 설명: 이미지 품질 설정 (
1~100사이).
priority
- 타입:
boolean - 설명: 페이지 로드 시 우선적으로 로딩.
loading
- 타입:
'lazy' | 'eager' - 설명: lazy인 경우 뷰포트에서 일정 거리까지 이미지 로드를 지연합니다.
eager인 경우, 이미지를 즉시 로드합니다.
placeholder
-
타입:
'empty' | 'blur' -
**설명: 이미지가 로딩되는 동안 사용할 placeholder입니다.
-
blur: blurDataURL 속성이 placeholder로 사용됩니다. 이때 정적인 import이고 이미지가 .jpg, .png, .webp, .avif인 경우 자동으로 채워집니다.
2. 이벤트 관련 Props
onLoadingComplete
- 타입:
(img: HTMLImageElement) => void - 설명: 이미지가 완전히 로드되고 placeholder가 제거되고 호출되는 콜백 함수입니다.
onError
- 타입:
(event: React.SyntheticEvent<HTMLImageElement, Event>) => void - 설명: 이미지 로드에 실패할 경우 호출되는 콜백 함수입니다.
3. 고급 Props
unoptimized
- 타입:
boolean - 설명:
true이면 Next.js의 이미지 최적화를 비활성화합니다.
loader
- 타입:
(props: ImageLoaderProps) => string - 설명: 커스텀 로더를 사용합니다 src, with, quality를 사용하여 Next/Image의 URL을 사용합니다.
const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
<Image loader={myLoader} src="example.jpg" alt="CDN Image" width={500} height={500} />정리
오늘은 Next/Image를 왜 사용하는지 사용하기 위한 Props를 알아보았습니다. URL동적으로 만들고 속성값을 통해 최적화 된 이미지를 만드는 부분이 굉장히 흥미롭고 신기했습니다. 이런 기능 때문에 Next를 많이 사용하는것 같습니다
출처
