Next/Image에서 흔히 발생하는 warning 해결 방법

warning 01 )

/images/fortune_card_image_02.png" has either width or height modified,
but not the other. If you use CSS to change the size of your image,
also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

warning 02 )

/images/fortune_card_image_02.png" was detected as the Largest Contentful Paint (LCP).
Please add the "priority" property if this image is above the fold.

---

해결 방법

width, height 관련 warning은 스타일 prop으로 확실하게 명시해 주면 됩니다.

Next.js 공식 문서의 Advanced Props의 style 부분을 참고하면 이유를 알 수 있는데요.

Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted.

스타일을 사용하여 이미지의 너비를 수정하는 경우 높이도 스타일을 지정하여

고유한 종횡비를 유지해주지 않으면 이미지가 왜곡된다는 내용입니다.

// Ex)

<Image
  src={message.src}
  alt={message.message}
  width={250}
  height={250}
  style={{ width: 250, height: 250 }} // style을 설정해주자!
/>

 

 

LCP 항목의 warning은 priority 설정으로 해결 가능합니다.

 

 LCP는 뷰포트에서 가장 큰 콘텐츠 엘리멘트가 나타날 때 측정되는데요.

해당 이미지가 가장 큰 이미지로 간주되어서 priority 속성을 추가하라는 warning이기에

해당 속성을 추가해주기만 하면 됩니다.

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

 

물론, priority 속성을 추가해주지 않아도 웹페이지는 동작합니다.

단지 사용자가 페이지를 사용할 때 불편해진다는 것이 문제죠.

 

LCP는 사용자가 페이지를 처음 인식할 때의 시간을 측정합니다.

만약 중요한 이미지가 늦게 로드된다면 LCP 시간을 증가시켜

전체적인 페이지 로딩 성능을 저하시키게 될 것이고,

 

검색 엔진은 페이지 로딩 성능을 중요 요소로 여기는데

LCP 시간이 길어지면 검색 엔진 결과 페이지가 후순위로 밀려나겠죠.

검색 엔진 노출에서 후순위로 밀려난다는 것은 곧 유저의 눈에 띌 수 있는 확률이

줄어든다는 것으로 귀결됩니다.

 

별 것 아니라고 여기고 넘어가기엔 꽤 크리티컬한 요소죠.

warning이라고 그냥 넘어가지 말고 꼭 처리하고 넘어가는 개발자가 되어봅시다!