핵심 답변
Next.js는 next/image의 <Image> 컴포넌트로 자동 이미지 최적화를 제공합니다.
주요 기능:
자동 포맷 변환: WebP, AVIF 등 최신 포맷으로 변환
레이지 로딩(Lazy Loading): 뷰포트에 들어올 때만 로드 (기본값)
크기 최적화: 디바이스 해상도에 맞는 적절한 크기로 리사이징
CLS 방지:
width, height 속성으로 레이아웃 시프트 예방예시 코드
typescript
import Image from 'next/image';
import profileImg from '@/public/profile.png';
// 로컀 이미지 (크기 자동 감지)
<Image src={profileImg} alt="프로필" />
// 외부 이미지 (next.config.ts에 도메인 허용 필요)
<Image
src="https://example.com/photo.jpg"
alt="사진"
width={800}
height={600}
priority // LCP 이미지에 사용
/>핵심 용어
📌 CLS(Cumulative Layout Shift)페이지 로드 중 요소가 예기치 않게 이동하는 현상입니다. Core Web Vitals 지표 중 하나입니다.
📌 priority뷰포트 상단에 보이는 중요한 이미지에 사용하는 속성입니다. preload 처리되어 LCP(Largest Contentful Paint)를 개선합니다.