기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우, srcset을 사용한다.
레티나 디스플레이를 통해 고품질 이미지를 제공하여 사용자 경험을 향상시키고,
저해상도 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄인다. (더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문)
예를 들어서
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">는 클라이언트 해상도에 따라 브라우저에 small, medium, large .jpg 그래픽을 표시하도록 지시한다.
(첫번째 값은 이미지이름이고 두번째 값은 픽셀 단위의 이미지 width이다.)
즉, 클라이언트의 해상도가 1x일 경우, small.jpg 에 해당하는 500w가 브라우저에 의해 선택된다.
해상도가 레티나(2x) 인 경우, 브라우저는 최소값에서 가장 위로 가까운 해상도를 사용한다.
500w은 1보다 크고 이미지가 보기 좋지 않을수 있기 때문에 선택하지 않는다는 것을 의미한다.
그래서 브라우저는 계산 결과 비율값이 2에 가까운 1000w 이미지를 선택한다.
srcset는 데스크탑 디스플레이처럼 거대한 이미지를 필요로하지 않기 때문에, 화면 장치를 좁히는 작은 이미지 파일을 제공하고자 하는 문제를 해결할 수 있다.
srcset은 화면이 작은 기기에서 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지파일을 제공하는 문제를 해결할 수 있다. 또한, 선택적으로 고해상도/저해상도 화면에 다른 해상도 이미지를 제공할 수도 있다.
