🧩 Next.js Image 컴포넌트 기능 정리
✅ 대표 기능 3가지
- Lazy Loading (지연 로딩)
- 이미지 사이즈 최적화
- Placeholder 제공
📌 1. Lazy Loading (지연 로딩)
- lazy loading이란, 이미지 로딩 시점을 스크린에 보일 때까지 지연시키는 기술이다.
- 즉, 화면 밖에 있는 이미지는 먼저 로드하지 않고, 스크롤로 보이게 되었을 때 로드된다.
- 이는 불필요한 대역폭 낭비를 줄이고, 필요한 이미지를 더 빠르게 보여주는 데 도움이 된다.
Next.js의 Image 컴포넌트를 사용하면 기본적으로 lazy loading이 자동 적용된다.
❗ Lazy Loading 끄는 방법
priority={true}속성을 사용 → 초기 렌더에 꼭 필요한 이미지를 즉시 로딩
- 또는
loading="eager"로 설정
<Image src="/logo.png" alt="logo" width={200} height={100} priority />Next/Image를 사용하면, 자동으로 lazy loading이 적용됨. lazy loading을 적용시키고 싶지 않다면, 해당 기능을 끌 수도 있음. Image 컴포넌트의 priority 라는 props를 true로 설정하거나, loading props에 “eager” 값을 설정하면 됨. (밑줄이 더 권장)
📌 2. 이미지 사이즈 최적화
- Next.js는
Image컴포넌트를 통해 자동으로 적절한 크기로 리사이징하고, - 또한, JPG/PNG와 같은 포맷을 webp와 같은 최적화된 포맷으로 자동 변환한다.
💡 이는 브라우저와 디바이스 해상도에 맞는 이미지를 선택적으로 로딩하게 하여,
용량을 줄이고 성능을 높이는 핵심 기능이다.
📌 3. Placeholder 제공 (CLS 방지)
- 이미지가 늦게 로드될 경우, 레이아웃이 갑자기 밀리는 현상을 경험한 적 있을 것이다.
- 이러한 현상을 CLS (Cumulative Layout Shift)라고 부른다.
Image 컴포넌트는 이를 방지하기 위해 placeholder 기능을 제공한다.
🧷 Placeholder의 역할
- 이미지가 로드되기 전에도 미리 해당 영역에 크기를 차지하도록 하여,
- 이미지가 로드된 후에도 레이아웃이 흔들리지 않도록 한다.
적용 방식
placeholder="blur"로 설정- 로컬 이미지의 경우 →
next/image가 자동으로 blur용 이미지 생성 - 원격 이미지의 경우 → base64 인코딩된 Data URL을
blurDataURL에 수동 설정해야 함
<Image
src="https://example.com/image.jpg"
alt="example"
width={600}
height={400}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
/>✅ 프로젝트 내 이미지 사용 기본 가이드
프로젝트의 모든 이미지는 원격 URL을 사용하는 반응형 이미지다.- 원격 이미지일 경우 Next.js가 종횡비를 계산할 수 있도록
width,height속성을 지정해야 한다. - 종횡비를 모르는 경우,
fill속성과objectFit을 함께 사용해 반응형으로 만들 수 있다. 단, 이 경우 부모 요소에 명확한 width/height 또는 비율이 설정되어 있어야 한다.
⚠️ fill 사용 시 주의사항
fill은 부모 요소 기준으로 이미지를 꽉 채우는 레이아웃을 제공한다.- 하지만
width와height가 명시되지 않기 때문에, Next.js가 적절한 최적화 사이즈를 예측하기 어려워진다. - 그 결과, 원본 크기에 가까운 이미지가 내려와 오히려 성능 저하를 일으킬 수 있다.
✅ 권장 방식:
가능하다면 fill 대신 width, height, sizes를 함께 명시해 Next.js의 자동 최적화를 활용하자.
<Image
src="/example.jpg"
width={600}
height={400}
sizes="(max-width: 768px) 100vw, 600px"
alt="예시 이미지"
/>🧩 반응형 이미지 적용 방법
- 가장 큰 화면(모바일 or PC) 기준으로 적절한
width,height를 설정한다. - 부모 요소에 반응형 width를 부여하면, 이미지도 자동으로 반응형으로 동작한다.
<div className="flex-none p-[0.4rem] md:p-0 w-14 md:w-15">
<Image src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${id}m.gif`}
alt="univImage"
width={60}
height={60}
/>
</div>🟢 컴포넌트 next/image 적용 효과 (실제 사례)
- 기존
<img>태그 사용 시: 평균 이미지 용량 약 8.5kb next/image로 전환 후: 1.7kb ~ 2.0kb 수준으로 감소- 이미지 포맷 또한
gif→webp등 용량 최적화된 포맷으로 자동 변경됨
❌ SVG (image/svg+xml)는 예외
- SVG는 벡터 기반으로 해상도와 상관없이 표현되며, 리사이징이 필요하지 않다.
next/image는 SVG에 대해 별도의 최적화를 적용하지 않기 때문에 오히려 layout 계산, wrapper 렌더링 등으로 성능이 저하될 수 있다.
📌 예시:
<img src="/icons/logo.svg" alt="로고" />→ 평균 렌더링 시간 약 400ms<Image src="/icons/logo.svg" />→ 500ms 이상 소요
✅ SVG는 <img> 태그 사용 권장
참고 문서
https://nextjs.org/docs/pages/api-reference/components/image
https://tech.kakaoent.com/front-end/2022/220714-next-image/
absolutely love this part