🚧Image with src "..." was detected as the Largest Contentful Paint (LCP).🚧

❗문제 내용

Next.js에서 Image 태그를 사용할 때 나타난 경고. LCP는 뷰포트에서 가장 큰 콘텐츠 엘리멘트가 나타날 때 측정한다. 경고는 해당 이미지가 가장 큰 이미지로 간주되어서 priority 속성을 추가하라는 뜻인 것 같다.

⚒️ 문제 해결

<Image id="x-icon" src={x_icon} alt="닫기 버튼" sizes='(max-width: 600px) 60vw' priority />

priority 속성을 추가하면 해결할 수 있다. 근데 Image 태그의 필드들에 대한 이해가 부족해서 공부가 필요할 것 같다... 🥴

🙇‍♂️ 참고자료

Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP)
<Image>