img srcset과 size

srcset에서 w나 x등의 디스크립터는 정확히 말하면 이미지의 실제 규격과 관련된 것이다.

개발자가 반응형 break-point로 사용하기 위해 어찌저찌 할 수 있는 것이 아니다.

 

즉, srcset의 디스크립터를 view port와 연관지어 생각하면 안된다.

 

srcset의 목적은 브라우저에게 이미지의 정보를 알려주고 '브라우저 니가 알아서 선택해' 라고 선택권을 주는 것이다.

 

개발자가 break-point를 명시하여 반응형으로 렌더링하려면 css media query나 img태그의 size속성을 이용하면 된다.

 

그러면 정해진 break-point내에서 브라우저가 srcset속성을 참고하여 최적의 이미지파일을 선택하여 렌더링한다.

 

srcset에서 최적의 이미지를 선택하는 기준은 브라우저의 캐시,네트워크 상태, 이미지 dpi, 디바이스 상태 등등 여러 조건에 따라 결정된다.