반응형 이미지를 사용하는 이유?

화면마다 너비가 다르기 때문에 반응형으로 줄어드는 부분에서 높이가 맞지 않거나 이미지가 맞지 않을 수 있습니다.
이러한 문제를 해경하기 위해 <img>요소에 다양한 사이즈를 추가 할수 있습니ㅏㄷ.

사용예제

해상도 전환

<img src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">

위 코드는 <img> 요소에 반응형 이미지를 지정하는 코드입니다. 각각의 이미지 파일에는 width 정보를 포함한 srcset 속성이 지정되어 있고, sizes 속성에서는 미디어 쿼리를 사용하여 각각의 이미지 파일에 적절한 크기를 지정합니다. 마지막으로 src 속성에서는 가장 큰 이미지 파일을 지정하여 이미지를 로드할 때 실패할 경우에도 이 파일이 보이도록 합니다.

해당 코드에서는 elva-fairy-320w.jpg가 320 픽셀의 폭을 가지고 있으며, elva-fairy-480w.jpg는 480 픽셀의 폭을 가지고 있으며, elva-fairy-800w.jpg는 800 픽셀의 폭을 가지고 있습니다. sizes 속성에서는 먼저 320 픽셀 이하의 뷰포트에서는 280 픽셀의 크기로 지정하고, 320 픽셀 이상 480 픽셀 이하의 뷰포트에서는 440 픽셀의 크기로 지정하며, 480 픽셀 이상의 뷰포트에서는 800 픽셀의 크기로 지정합니다. 따라서 뷰포트의 크기에 따라 적절한 이미지 파일이 로드되어 사용자에게 보여집니다.

참고사이트

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images