mdn

----------=--------------

1600w : 이 이미지는 너비가 1600px 기준이라는 표시. 브라우저는 sizes 를  참고하여 알맞는 너비의 이미지인지 판단 때 사용함.

sizes="(min-width: 56.25em) 78vw, 100vw"

=> 화면 너비가 56.25em 이하일 때 이미지는 화면 너비의 78% 가정, 미만이면 100% 가진다고 가정

=> 작은 화면인 경우 이미지는 화면의 100% 너비로 보이게, 큰 화면인 경우 78%의 너비로 보이게

=> 브라우저에서는 지정된 sizes 에서의 너비를 보고 1600w 등을 참고해서 보여질 이미지를 srcset 에서 선택함.

1. 화면 너비에 따라서 sizes 의 너비 기준을 가지고 이미지를 선택해서 가져온다.

2. PC의 FHD 모니터에서 화면 너비가 1920이면 75vw로 1440px가 기준 너비가 된다. 1600w 를 선택해서 리사이즈 해서 사용한다.

3. 큰 사이즈은 이미지를 이미 가져왔을 경우, 화면이 작아져도 작은 사이즈 이미지를 안가져오고 이미 가지고있는 이미지를 리사이즈 해서 사용하는 경우가 많다.

4. 작은 사이즈의 이미지를 이미 가져왔어도 화면이 넓어지면 큰 사이즈로 가져와서 사용하는 경우가 많다.

5. 이미지 선택에 대해서는 브라우저가 자체적으로 판단하는 부분이라서 원하는 데로 정확히 동작 안할 수 있다.

6. 브라우저는 디바이스 픽셀 비율(DPR)도 계산에 포함한다.

6.1. DPR이 3이고 화면 너비가 400인 경우 너비 1200px 를 기준으로 가져오려고 할 것이다. srcset에서1400w를 가져와서 사용한다.

7. sizes 설정이 없으면 100vw를 기준으로 사용한다.

sizes에 보여질 너비를 지정함.

2x, 3x 같은 배율 방식이 더 편함. DPR에 맞춰서 최선의 이미지를 선택하려고 할 것임.

1. img.currentSrc로 현재 선택된 이미지의 url을 알 수 있다.

1.1. srcset의 영향으로 img.src와 값이 다를 수 있다.

2. 휴대폰이나 고급 노트북의 경우 DPR이 3이 나오는 경우가 있다. 이 경우를 대비해서 최소 2x의 아이콘은 준비하자.

3. svg의 경우 렌더링 될 때 다시 백터에서 그려지므로 srcset 처리가 필요 없다. (안에 비트맵이 있는 경우는 희리게 보일 수 있다)