next/image를 쓰면 정말 빨라지나? img 태그와 비교

핵심 요약

next/image는 요청 디바이스에 맞는 크기로 자동 리사이즈하고 WebP/AVIF로 변환하며, width/height로 레이아웃 흔들림(CLS)을 막아준다. 사진·썸네일처럼 무거운 이미지엔 거의 항상 이득. 다만 SVG 아이콘이나 정적 export 환경에선 일반 img가 단순하고 충분하다.

1. next/image가 자동으로 해주는 것

뷰포트별 srcset 생성 → 모바일에 작은 이미지
WebP/AVIF 변환(브라우저 지원 시)
lazy loading 기본 + 뷰포트 진입 시 로드
width/height 예약으로 CLS 0

2. 선택 기준

상황	권장
사진·썸네일·콘텐츠 이미지	next/image
SVG 아이콘·로고	img 또는 인라인 SVG
output: 'export' 정적 사이트	img 또는 unoptimized

3. 함정

외부 도메인은 next.config의 images.remotePatterns에 등록해야 한다
fill 쓸 때 부모에 position: relative + 크기 지정 필수
최적화 서버(sharp) 부하가 있으니 CDN 캐시와 함께 쓰는 게 좋다

자주 묻는 질문

이미 작은 아이콘도 next/image가 좋나요?

아니요. 작은 SVG/아이콘은 최적화 이득이 거의 없고 오버헤드만 생깁니다. 인라인 SVG나 일반 img가 낫습니다.

외부 이미지가 안 나옵니다.

보안상 허용 도메인만 최적화합니다. next.config의 images.remotePatterns(또는 domains)에 호스트를 추가하세요.