Next.js에서 기본<img>태그 대신Image컴포넌트 를 사용하면,
자동 최적화, 지연 로딩, 다양한 디바이스 대응 등 더 최적화된 방법으로 이미지 렌더링이 가능하다.
이유는 ? 특별한 내장 최적화 기능을 제공하는 이미지 요소이기 때문!
🚫 기존 방식 (<img> 컴포넌트)
import Logo from "./public/images";
<img src={Logo.src} alt="logo" />작동을 잘 됨. 하지만,
- 자동 크기조절 ❌
- 지연 로딩 ❌
- 이미지 포맷 최적화 ❌
✅ Next.js 방식 (<Image> 컴포넌트)
import Logo from "./public/images";
import Image from "next/image";
<Image src={Logo} alt="logo" />src={Logo}만 넣어줘도,자동으로 연결- 사이즈나 포맷 지정이 없어도 자동 처리
- 내부적으로는
<img>태그가 생성되지만, 더 많은 기능이 붙음
🔍 개발자 도구(F12)에서 보면?
<img alt="logo" loading="lazy" width="1024" height="1024" decoding="async" data-nimg="1"
srcset="/_next/image?...w=1080&q=75 1x, ...w=2048&q=75 2x"
src="/_next/image?...w=2048&q=75" style="color: transparent;" />loading="lazy":
지연 로딩으로 화면에 보일 때만 이미지 로딩srcset:
뷰포트와 웹사이트를 방문하는 기기에 따라 크기가 조정된 이미지 제공
지원되는 포맷으로 자동 변환decoding="async":
렌더링 성능 최적화src:
Next.js의 최적화된 이미지 경로로 자동 처리
⚡ priority 속성으로 렌더링 우선순위 지정
<Image src={Logo} alt="logo" priority />priority 속성은 해당 이미지가 페이지에서 가장 먼저 렌더링되어야 함을 명시한다.
로고, Hero 이미지는 가장 먼저 렌더링되는 것이 사용자 경험에 중요하기에,
priority를 통해 지연 로딩이 아닌, 즉시 로딩으로 사용된다.
