반응형 이미지(responsive image) : 디바이스에 따라 이미지 크기를 다르게 표현해야 할까?

<img>태그에 CSS 속성 중 하나인 width를 100%로 설정하면 해당 이미지가 부모 요소의 너비에 맞게 자동으로 크기를 조절합니다.
이것은 반응형 웹 디자인에서 일반적으로 사용되는 기법 중 하나입니다. 이미지의 크기가 부모 요소에 따라 자동으로 조절되므로, 모든 디바이스에서 일관된 사용자 경험을 제공하는 데 도움이 됩니다.
하지만 문제점이 있는데,
이미지 크기와 용량에 관련된 문제와 고밀집도 디바이스에서 흐릿하게 보이는 현상이 발생하는 문제가 발생합니다.

---

첫번째. 이미지 크기와 용량에 관련된 문제

모든 디바이스에서 동일한 이미지를 제공할 경우, 보통 데스크톱용으로 큰 이미지를 사용하게 되면 모바일 디바이스에서도 해당 큰 이미지를 불러와야 합니다. 
모바일 디바이스에서는 불필요하게 큰 이미지를 다운로드해야 하므로 트래픽이 증가하고 페이지 로딩 시간이 늘어나는 문제가 발생할 수 있습니다. 이는 사용자 경험을 저하시키고 페이지 성능에 영향을 줄 수 있습니다.

---

두 번째. 고밀도 디바이스에서 이미지가 흐릿하게 보이는 현상

고밀도 디바이스는 더 많은 픽셀을 가지고 있어서 일반 디바이스보다 이미지가 더 선명해야 합니다. 하지만 일반 이미지를 고밀도 디바이스에서 확대하여 표시할 경우, 이미지가 흐릿하게 보일 수 있습니다. 고밀도 디바이스용으로 이미지를 따로 제공하지 않을 경우, 고해상도 디바이스의 선명성을 활용하지 못하고 사용자에게 흐릿한 이미지를 제공하게 됩니다.

---

이 두가지 문제를 해결하는 방법은 여러가지가 있습니다.

첫번째.  img태그에 srcset과 sizes속성을 추가하여 반응형 이미지를 처리하는 방식

<img srcset="small-image.jpg 300w,
             medium-image.jpg 600w,
             large-image.jpg 800w"
     sizes="(max-width: 600px) 300px,
            (max-width: 800px) 600px,
            800px"
     src="large-image.jpg"
     alt="이미지 설명">

sizes 속성:
sizes 속성은 미디어 조건에 따라 이미지의 크기를 지정합니다.
미디어 쿼리를 사용하여 브라우저에게 어떤 크기의 이미지를 보여줄지 알려줍니다.

srcset 속성:
srcset 속성은 브라우저에게 이미지의 다양한 버전을 제공합니다.
여기서 이미지의 폭은 w 단위로 표시됩니다. 브라우저에 이미지의 크기를 알려주는 데 사용됩니다.

src 속성:
src 속성은 <img> 태그에 대체 이미지의 경로를 제공합니다.
브라우저가 srcset 및 sizes를 해석하지 못하는 경우 대체 이미지로 사용됩니다.

alt 속성:
alt 속성은 이미지에 대한 대체 텍스트를 제공합니다. 시각 장애가 있는 사용자나 이미지가 로드되지 않은 경우에 사용됩니다.

---

두번째. 해상도를 이용한 방법

<img srcset="img320w.jpg,
img320w.jpg 1.5x,
img320w.jpg 2x"
src="img640w.jpg"
alt="이미지">     

srcset 속성: 브라우저에게 다양한 해상도의 이미지를 제공합니다.
각 이미지는 파일 이름과 그에 해당하는 디바이스 픽셀 비율(density)을 지정합니다.
예를 들어, img320w.jpg는 기본 해상도 이미지를 나타내고, 1.5x 및 2x는 그에 해당하는 고밀도 디바이스용 이미지를 나타냅니다.

src 속성: srcset 속성이 해석되지 못하는 경우에 대비하여 기본 이미지를 지정합니다.

alt 속성: 이미지에 대한 대체 텍스트를 제공합니다. 시각적으로 이미지가 표시되지 않을 때나 시각 장애가 있는 사용자를 위해 사용됩니다.

 

+디바이스에 따른 해상도 구별 사이트+
https://webkit.org/demos/srcset/