Next.jsMedium#236
next/image는 일반 img 태그와 비교해 어떤 장점이 있나요?
#Next.js#Image#성능#LCP
답변 포인트
이미지 최적화와 레이아웃 시프트 방지를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
next/image는 크기 최적화, lazy loading, responsive srcset, 레이아웃 안정성을 돕습니다. 외부 이미지는 remotePatterns 설정과 sizes 지정이 중요합니다.
next/image는 일반 img보다 이미지 최적화 기능을 제공하는 컴포넌트입니다. 자동 리사이징, 포맷 변환, lazy loading, layout shift 방지, responsive image 생성을 통해 성능을 개선합니다.
기본 예시
TSX
import Image from 'next/image';
<Image
src="/profile.png"
alt="프로필 사진"
width={160}
height={160}
/>width/height를 지정하면 브라우저가 공간을 미리 확보해 CLS를 줄일 수 있습니다.
장점
- 디바이스 크기에 맞는 이미지 제공
- WebP/AVIF 같은 현대 포맷 변환
- 기본 lazy loading
- placeholder blur 지원
- 원격 이미지 도메인 제한으로 안전한 최적화
TypeScript
// next.config.ts
images: {
remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }]
}주의점
모든 이미지에 무조건 좋은 것은 아닙니다. 외부 이미지 최적화는 서버 비용을 만들 수 있고, 원격 도메인을 넓게 열면 SSRF와 유사한 위험이 생길 수 있습니다. 매우 작은 아이콘은 SVG나 CSS가 더 나을 수 있습니다.
면접 답변 포인트
next/image는 이미지 크기/포맷/로딩 최적화와 CLS 방지에 강점이 있습니다. 다만 remotePatterns, width/height, priority 사용 기준을 이해해야 한다고 답하면 좋습니다.