[NextJS] 이미지를 렌더링하는 두 가지 방법 : img vs Image 태그 비교

 

Next.js에서 img와 Image 컴포넌트 비교

Next.js로 웹 개발을 하다 보면 이미지 태그를 삽입할 때 두 가지 선택지가 있다. 바로 HTML 기본 태그인 <img>와 Next.js가 제공하는 <Image> 컴포넌트다. 비슷해 보이지만, 두 방법은 내부 동작 방식, 성능 최적화, 사용 편의성 측면에서 상당히 다르다.

 

Next.js를 사용하는 목적 자체가 최적화된 React 개발이기 때문에, 이미지 또한 전용 컴포넌트를 적극 활용하는 것이 바람직하다.

"빠르고 가벼운 웹 서비스" 를 목표로 한다면, Next.js의 <Image>를 사용하자!

 

---

1. 기본 정의

 

	<img>	<Image>
정의	HTML 표준 이미지 태그	Next.js 전용 고성능 이미지 컴포넌트
제공 주체	브라우저 표준	Next.js (next/image 모듈)

---

2. 동작 방식

<img> 태그

• 그냥 HTML <img> 그 자체다.
• 브라우저가 이미지를 즉시 다운로드하고 렌더링한다.
• 이미지 크기 최적화, 포맷 변환, 지연 로딩 같은 기능은 직접 처리해야 한다.
• CSS로 크기(width, height)를 조정할 수 있다.

<Image> 컴포넌트

• Next.js가 제공하는 고성능 이미지 최적화 컴포넌트다.
• 내부적으로 자동 최적화가 적용된다:
  • 지연 로딩(Lazy loading) 기본 적용
  • WebP 변환 지원 (브라우저가 지원하면 WebP로 자동 변환)
  • 사이즈 최적화 (필요한 크기만 다운로드)
  • CDN 활용 (Next.js가 이미지 요청을 최적화해서 처리)
• width와 height를 명시하면, 레이아웃 시프트(CLS)를 방지해 퍼포먼스가 향상된다.
• 📍외부 이미지를 가져오려면 next.config.js 설정이 필요해서 번거로움.

---

3. 코드 예시

 

---

4. 언제 어떤 걸 써야 할까?

 

상황	추천 방식
간단한 테스트용 이미지 삽입	<img>
퍼포먼스 최적화가 중요한 실서비스	<Image>
SEO(검색엔진 최적화)나 웹 성능 점수가 중요한 경우	<Image>
외부 URL 이미지를 빠르게 넣고 싶을 때	<Image> (단, 도메인 설정 필요)

요약:
👉 작은 테스트 프로젝트나 스태틱 이미지 몇 장만 있을 때는 <img>로 빠르게 개발할 수 있다.
👉 하지만 실제 서비스(특히 SEO나 성능이 중요한 서비스)에서는 <Image>를 사용하는 것이 권장된다.

---

5. 주의할 점

• <Image> 컴포넌트는 src 경로가 정적(public 폴더) 이거나, next.config.js에 외부 이미지 도메인을 등록해야 한다.
• 자동 최적화 기능을 쓰기 싫거나, 정말 복잡한 커스텀 제어가 필요한 경우 <img>를 써야 할 때도 있다.
• Next.js 14부터 <Image>는 점점 더 기능이 강화되고 있다. 예를 들어 blurDataURL을 통한 로딩 중 블러 처리 등 고급 기능도 쉽게 사용할 수 있다.