[Next.js] fill을 사용한 이미지에 sizes 추가 (Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance.)

🚨 경고 발생 

Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance.

Read more: https://nextjs.org/docs/api-reference/next/image#sizes

 

🤔 원인

해당 링크로 들어가 보니 내용은 다음과 같았다.

sizes의 값은 fill을 사용하는 이미지나 반응형 크기를 가진 이미지에 대한 성능에 큰 영향을 미친다.
"fill" 속성이 있는 이미지에 "sizes"값을 지정하지 않으면 기본값으로 100vw가 사용된다.

 

이게 무슨 뜻인지 좀 더 찾아봤는데

fill 속성을 사용한 이미지의 경우 이미지가 전체 뷰포트를 채우도록 확장되어야 한다는 것을 의미한다. 하지만 sizes속성이 지정되지 않은 경우 기본적으로 전체 화면 넓이(100vw)에 해당하는 크기로 설정된다. 

이미지를 다운받을 때 sizes속성을 통해 어떤 크기의 이미지를 다운로드할지를 결정하는데 sizes속성이 없으면 브라우저는 뷰포트를 모르기 때문에 전체 화면 크기와 같은 이미지를 선택한다. 이는 성능에 좋지 않다. 

따라서 fill속성을 사용하는 이미지에는 sizes속성을 명시적으로 지정해 브라우저가 올바른 이미지를 선택하도록 해야 한다. 이렇게 해 불필요한 대용량 이미지를 다운로드하는 것을 방지할 수 있다.

 

🎉 해결 방법

fill을 사용한 부분에 적절한 sizes를 추가해주면 된다.

다시 정리하자면, sizes는 뷰포트 크기에 따라 이미지가 어떤 크기로 표시될지 브라우저에게 알려줘 올바른 크기의 이미지를 선택하여 다운로드하도록 할 수 있다.

<Image
    src={imageUrl}
    className="object-cover"
    alt={`image_${id}`}
    fill
    sizes="(max-width: 842px) 100vw, 80vw"
/>