next/image의 〈Image〉 컴포넌트를 쓰는 이유는 무엇인가요?

next/image의 <Image> 컴포넌트는 일반 <img> 태그를 대체하며, 이미지 최적화를 자동으로 처리합니다. 이미지는 보통 웹 페이지에서 용량이 가장 큰 자원이라 성능에 큰 영향을 줍니다.

주요 장점

• 자동 최적화 — 요청한 기기에 맞는 크기·포맷(WebP/AVIF)으로 변환·압축해 전송합니다.
• 반응형 크기 제공 — sizes에 맞춰 여러 해상도를 만들어 적절한 것을 내려줍니다.
• 지연 로딩(lazy loading) — 기본적으로 뷰포트에 들어올 때 로드해 초기 로딩을 줄입니다.
• 레이아웃 이동(CLS) 방지 — width/height(또는 fill)로 공간을 미리 확보해, 이미지 로드 시 화면이 밀리지 않습니다.
• 블러 플레이스홀더 — placeholder="blur"로 로딩 중 흐릿한 미리보기를 보여 줄 수 있습니다.

import Image from 'next/image';
 
<Image src="/hero.jpg" alt="히어로" width={800} height={400} priority />;

priority는 최초 화면에 보이는 핵심 이미지(LCP 대상)에 붙여 미리 로드하게 합니다.

주의할 점

• width/height를 알 수 없으면 fill을 쓰고 부모에 position: relative를 줍니다.
• 외부 도메인 이미지는 next.config.js의 remotePatterns에 등록해야 최적화됩니다.

이 모든 것을 직접 구현하면 번거롭지만, <Image>는 성능 지표(LCP·CLS) 개선을 기본으로 제공하는 것이 핵심 가치입니다.