<img> 태그의 srcset 속성

정의 및 특징

<img> 태그의 srcset 속성은 각각 다른 환경에서 사용될 이미지 소스를 명시합니다.

 

srcset 속성은 브라우저가 사용할 수 있는 이미지 소스를 나타내는 하나 이상의 문자열을 콤마(,)로 결합한 리스트를 속성값으로 가집니다.

 

각 이미지 소스를 나타내는 문자열은 다음과 같이 구성됩니다.

1. 이미지에 대한 URL

2. 옵션으로, 공백 문자(whitespace)를 추가한 후

3.1. 너비 기술자(width descriptor) 또는 뒤에 ‘w’문자가 추가된 양의 정수

: 너비 기술자는 유효한 픽셀 밀도(pixel density)를 계산하기 위해 sizes 속성에서 주어진 소스의 크기에 의해 나눠집니다.

3.2 픽셀 밀도 기술자(pixel density descriptor) : 뒤에 ‘x’문자가 추가된 양의 부동 소수점 수

: 만약 픽셀 밀도 기술자가 명시되지 않는다면, 소스는 기본 기술자인 ‘1x’로 할당됩니다.

---

예제

<img srcset="/examples/images/people_960.jpg 960w,
             /examples/images/people_575.jpg 575w"
     sizes="(min-width: 960px) 50vw,
            (min-width: 575px) 75vw,
            100vw"
     src="/examples/images/people_575.jpg" alt="people">