next/image vs img 태그: Next.js에서 언제 무엇을 쓸까

Next.js는 이미지를 표시하는 두 가지 방법을 제공합니다: next/image의 <Image> 컴포넌트와 순수 HTML <img> 태그입니다. 잘못 선택하면 성능이나 유연성을 잃습니다. 각각을 언제 사용해야 하는지 알아봅니다.

next/image가 하는 일

<Image> 컴포넌트는 다음을 추가하는 <img> 래퍼입니다:

• 자동 WebP/AVIF 변환: 브라우저 지원에 따라 JPEG와 PNG를 WebP 또는 AVIF로 변환합니다.
• 자동 srcset 생성: deviceSizes와 imageSizes 설정을 사용하여 여러 크기 변형을 생성합니다.
• 지연 로딩: 접힘 아래 이미지는 뷰포트에 들어올 때만 로드됩니다 (네이티브 loading="lazy" 사용).
• 레이아웃 시프트 방지: width와 height 프롭을 통해 공간을 예약하여 CLS를 방지합니다.
• 블러 플레이스홀더: 전체 이미지가 로드되는 동안 저품질 플레이스홀더를 표시합니다.
• 우선 로딩: priority 프롭은 LCP 이미지에 <link rel='preload'>를 추가합니다.

next/image의 트레이드오프

자동화에는 제약이 따릅니다:

• 서버 사이드 처리: 이미지는 요청 시(또는 첫 번째 요청 후 캐시) 서버에서 변환됩니다. 이는 콜드 스타트 지연과 서버 CPU 비용을 추가합니다.
• 필수 치수: width와 height 프롭을 제공하거나fill 모드를 사용해야 합니다. 치수를 알 수 없는 사용자 업로드 콘텐츠에서는 어색할 수 있습니다.
• 원격 도메인 허용 목록: 외부 이미지 도메인은 next.config.js에서 설정이 필요합니다.
• 정적 이미지의 오버헤드: 사전 변환된 WebP 이미지도 필요하지 않은 최적화 파이프라인을 통과합니다.

next/image를 사용해야 할 때

• CMS 또는 데이터베이스의 동적 이미지 (알 수 없는 치수, 다양한 형식)
• 사전 처리할 수 없는 사용자 업로드 이미지
• 수동 파일 생성 없이 자동 srcset을 원할 때
• 최소한의 코드로 블러 플레이스홀더 또는 우선 로딩이 필요할 때

일반 img 태그를 사용해야 할 때

• 사전 최적화된 이미지: 빌드 시 이미 WebP 또는 AVIF로 변환된 이미지는 next/image 처리의 혜택이 없습니다.
• 알려진 고정 치수: 소스를 제어하고 이미 올바르게 크기를 조정한 정적 에셋.
• 서버 사이드 비용 방지: 변환 오버헤드가 중요하고 대신 이미지를 사전 처리할 수 있는 고트래픽 페이지.
• 완전한 HTML 제어: 여러 소스, 아트 디렉션 또는 사용자 정의 로딩 동작이 있는 복잡한 <picture> 요소.

성능 비교

하이브리드 접근법

많은 프로덕션 Next.js 앱이 두 가지를 함께 사용합니다. 동적 콘텐츠(블로그 게시물 이미지, CMS의 제품 사진)에는 <Image>를, 사전 최적화한 정적 에셋(히어로 이미지, 아이콘, 일러스트)에는 일반 <img>를 사용합니다.

정적 이미지를 WebP로 사전 변환하려면 Picovert의 변환기를 사용하거나 Sharp를 빌드 파이프라인에 통합하세요. 전체 비교는 next/image vs 사전 변환 글을 참고하세요.

흔한 실수

• sizes 프롭 누락: sizes 없이는 Next.js가 100vw로 기본 설정되어 데스크톱에서 불필요하게 큰 이미지를 로드합니다. 실제 렌더링 크기에 맞게 항상 sizes를 설정하세요.
• LCP 이미지에 priority 미설정: 접힘 위의 히어로 이미지는 페이지에서 가장 중요한 이미지를 지연 로드하지 않도록 priority를 설정해야 합니다.
• 위치 지정된 부모 없이 fill 모드 사용: fill은 부모가position: relative와 명시적인 치수를 가져야 합니다.