5. next.js 에서 <Image> 태그를 쓰자!

react에서 쓰던 img 태그를 버릇처럼 넣었더니 노란줄이 쳐지면서 이런 경고문이 나왔다.

 

<img>태그를 쓰면 LCP(페이지의 메인 콘텐츠가 로드되었을 가능성이 있을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 메트릭)가 느려지고 대역폭이 높아질 수 있어서 next.js에서 이미지 최적화를 활용하려면 next/image 에서 <Image/>태그를 사용하라는 내용이었다.

 

<Image>?

- html의 <img>를 기반으로 성능을 최적화시킨 next의 built-in 컴포넌트

 

<Image> 태그 장점

1. improved performance : modern image formats을 사용해 항상 올바른 크기의 이미지 제공

2. Viswual Stability : 누적 레이아웃 이동 방지

3. faster page loads : viewport에 들어왔을때만 이미지 로드

4. asset flexbility: remote servers에 저장된 이미지도 resize 가능

 

로컬 이미지 기준에서는

next/image를 import 한 후 image를 써야할 위치에 <img> 대신 <Image>를 쓰면 된다.

 

 

---

* next.js docs

https://nextjs.org/docs/basic-features/image-optimization