[Next.js] Image 경고(LCP, 종횡비) 해결하기

1. LCP 경고

Next.js 프로젝트에서 랜딩페이지, 로그인 페이지에 로고 이미지를 넣었더니 이런 콘솔 경고가 떴다.

Image with src "/images/swith-logo.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

경고 내용은 로고 이미지가 LCP로 추정이 되었는데 priority 속성을 넣어주지 않았다고 한다.

알아보니 Next.js의 Image 컴포넌트에서 priority 속성은 이미지 로딩의 우선순위를 지정하는 중요한 기능이라고 한다.

LCP는 Largest Contentful Paint라고 하는데, 기본 값은 false이다.

LCP는 페이지의 뷰포트 내에서 보이는 가장 큰 이미지나 텍스트 블록을 의미한다. 보통은 화면 상단에 표시되는 이미지.

이 속성을 사용하면 이미지가 높은 우선순위로 간주되어 preload된다.

이 속성을 사용하면 이미지 로딩 성능을 크게 향상시킬 수 있어, LCP 이미지에는 반드시 추가하는게 좋다고 한다.

그런데 이 속성을 사용하면 이미지의 지연 로딩(lazy loading)이 자동으로 비활성화된다.

따라서, loading="lazy" 속성과 priority 속성은 함께 사용할 수 없다!

💡 LightHouse의 LCP는 페이지 로딩 성능을 측정하는 핵심 지표로, 뷰포트 내에서 가장 큰 콘텐츠 요소(주로 이미지나 텍스트 블록)가 표시되는 시간을 측정한다.
priority 속성을 사용하면 이 요소가 더 빨리 로드되어 LCP 점수가 개선된다고 한다! 👍

---

2. 종횡비 경고

Image with src "/images/swith-logo.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.

흠...Image 속성엔 width와 height가 필수라서 입력은 해뒀는데..

가로세로 비율은 고정이 되어있어서 width로 크기를 조정했었다. height는 그냥 비슷한 임의의 값...

style에 둘 중 하나를 auto로 설정하라고 해서 해봤는데 소용이 없었다. width랑 height를 요리조리 바꿔봐도 실패...

찾아보니 실제 이미지의 원본 비율과 지정한 비율이 많이 다를 경우에 경고가 발생할 수 있다고 한다.

그래서 내가 넣은 로고 이미지의 종횡비를 계산해서 수정해주었다!

style 코드를 따로 추가할 필요 없이 해결되었다. 👏

크기를 수정할 땐 종횡비 맞춰서 계산한 다음 바꿔줘야된다는 번거로움이 있지만...

대충 감으로 비율 맞춰서 넣어도 얄짤없이 경고장이 날라온다....ㅠㅠ