[warning] has "fill" but is missing "sizes" prop. Please add it to improve page performance

NextJS를 쓰고 나서 Image 컴포넌트와 관련한 Warning이 많이 뜬다. 속도와 사용자 경험을 중시하는 느낌이랄까?

Warning이 뜨는 곳은 Test Item 컴포넌트였다. 왜 이런 경고 문구가 뜨는지 바로 지피티에게 물어봤다.

<Image
      src={image}
      alt={title}
      layout="fill"
      objectFit="cover"
/>

<Image> 컴포넌트에서 warning이 뜨는 이유는 sizes 속성이 없는 경우, 브라우저가 이미지를 로드할 때 모든 이미지 크기를 가져오기 위해 추가 요청을 보내야 하기 때문입니다. 이는 성능 저하를 유발할 수 있습니다.
sizes 속성은 브라우저에게 이미지가 어떤 크기로 표시되는지 알려주는 역할을 합니다. 브라우저는 해당 정보를 통해 이미지를 최적으로 처리하고 필요한 크기만 요청하여 효율적인 로딩을 할 수 있습니다.
따라서, sizes 속성을 추가함으로써 브라우저에게 이미지 크기에 대한 정보를 제공하고, 추가 요청을 최소화하여 페이지 성능을 개선할 수 있습니다. 이는 웹 페이지의 로딩 속도를 향상시키고 사용자 경험을 향상시키는 데 도움이 됩니다.

음, 그렇구나. 그러면 해결 방법을 알려줘.

해당 경고를 해결하기 위해 TestItem 컴포넌트의 Image 컴포넌트에 sizes 속성을 추가해 보겠습니다.

<Image
      src={image}
      alt={title}
      layout="fill"
      objectFit="cover"
      sizes="(min-width: 640px) 50vw, 100vw" // sizes 속성 추가
/>

이 코드에서 사용된 CSS 속성을 설명해드리겠습니다:

1. `layout="fill"`: `layout` 속성은 Next.js의 `Image` 컴포넌트에서 사용되는 속성으로, 이미지를 부모 요소의 크기에 맞게 채웁니다. `fill` 값은 이미지를 부모 요소의 전체 영역을 차지하도록 확장합니다.

2. `objectFit="cover"`: `objectFit` 속성은 이미지가 부모 요소의 크기에 맞게 조정될 때 사용되는 속성입니다. `cover` 값은 이미지의 가로 세로 비율을 유지하면서 부모 요소를 가득 채울 수 있도록 이미지를 조정합니다. 이미지가 부모 요소보다 크거나 작을 경우, 일부 이미지가 잘릴 수 있습니다.

3. `sizes="(min-width: 640px) 50vw, 100vw"`: `sizes` 속성은 미디어 쿼리와 함께 사용하여 다양한 화면 크기에 대응하는 이미지의 크기를 지정할 수 있습니다. 해당 속성 값은 콤마로 구분된 조건부 크기를 나타냅니다. 위의 예시에서는 뷰포트 너비가 640px 이상인 경우 50vw(뷰포트 너비의 50%)로 이미지 크기를 지정하고, 그 이하인 경우에는 100vw(뷰포트 너비와 동일한 크기)로 이미지 크기를 지정합니다. 이를 통해 다양한 화면 크기에 대응하는 반응형 이미지를 구현할 수 있습니다.

위의 CSS 속성은 `Image` 컴포넌트를 사용하여 이미지를 효과적으로 조정하고 반응형으로 표시하는 데 도움을 주는 속성들입니다.

에? 아니 어떻게 이미지의 크기가 뷰포트 너비의 50%, 100%가 돼? 거기다가 부모 컨테이너인 그리드 UI가 떡하니 자리잡고 있는데, 어떻게 지 혼자 크기가 그렇게 커져? 심지어 지금 그렇게 보이지도 않는데?

처음에는 왜 저렇게 지정해주는지 이해가 되지 않았다. 이미 그리드 UI의 크기가 정해져있고, 이미지가 들어가는 컴포넌트의 크기 또한 고정인데 왜 이미지의 size 지정을 저런식으로 해야하지 싶었다. 지피티에게 폭풍 질문을 하기 시작했다.

저렇게 해도 이미지가 화면에 꽉 차지 않잖아? 
만약 이 코드를 이미지 컴포넌트에 추가하더라도 부모 요소의 크기가 정해져있다면 이미지는 절때 뷰포트에 꽉 차게 보일 수 없다는 얘기지?

지피티의 대답은 이러했다.

맞습니다. `sizes` 속성은 이미지의 표시 크기를 지정하지만, 부모 요소의 크기에 따라 이미지가 뷰포트에 꽉 차게 보이지 않을 수 있습니다. 

`sizes` 속성은 이미지의 표시 크기를 뷰포트 너비에 기반하여 조정합니다. 하지만 부모 요소의 크기가 이미지의 표시 크기보다 작다면, 이미지는 부모 요소의 크기에 맞춰 표시됩니다. 따라서 부모 요소의 크기를 조정하거나 이미지를 감싸는 컨테이너에 추가적인 스타일을 적용하여 이미지가 뷰포트에 꽉 차게 보이도록 할 수 있습니다.

이미지를 뷰포트에 꽉 차게 표시하기 위해서는 부모 요소의 크기를 조절해야 합니다. 부모 요소의 너비와 높이를 100%로 설정하거나, 필요에 따라 컨테이너 요소에 추가 스타일을 적용하여 이미지가 원하는대로 표시되도록 조정할 수 있습니다.

부모 요소의 크기가 이미지가 표시 될 크기보다 적으면 이미도 부모 요소의 크기에 맞추어 표시되므로 이미지가 절때 화면의 반 이상을 차지하지 않았던 것이다.

그렇다면 또 다시 질문이 생겼다. 그럴거면 저 코드가 왜 필요한건데? 단순히 경고 문구를 지우려고?

이 코드의 목적은 이미지를 뷰포트의 크기에 맞춰 반응형으로 표시하면서, 페이지 성능을 최적화하는 것입니다. sizes 속성은 브라우저에게 이미지의 표시 크기를 알려주어 필요한 이미지 리소스를 로드하도록 유도합니다.
뷰포트의 크기에 따라 이미지의 크기를 동적으로 조정함으로써 불필요한 이미지 다운로드를 방지하고, 페이지 로딩 속도를 개선할 수 있습니다. 따라서 이 코드는 페이지 성능을 향상시키기 위해 사용되며, warning을 해결하는 것 외에도 성능 개선을 목적으로 합니다.

정리해보자면, 이미지 컴포넌트를 사용할 때 sizes 속성을 지정해주지 않으면 오류는 뜨지 않지만 브라우저가 모든 크기의 이미지를 다운로드 해야하기 때문에 브라우저에게 미리 이미지의 sizes를 알려주어 속도를 향상시킴으로써 좋은 사용자 경험을 만들 수 있다는 것 같다.

지피티 말대로 sizes 속성을 추가해주니 더 이상 경고 문구가 뜨지 않는다! 이 부분이 이해가 안돼서 계속 지피티에게 질문했다. 이해하고 나니 편-안 하다.