스펙
mdn
----------=--------------
샘플
from: 이케아 홈페이지에서
<img alt="강동점 베스트 어워즈"
src="https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=s"
srcset="https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=sg 1600w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxxl 1400w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxl 1100w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xl 900w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=l 750w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=m 700w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=s 600w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xs 500w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxs 400w,
https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxxs 300w"
sizes="(min-width: 56.25em) 78vw, 100vw" loading="lazy">
srcset 설명
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 설정은?
<img
width="32"
src="icon.png"
srcset="icon-32.png 32w, icon-64.png 64w" sizes="32px"
>
sizes에 보여질 너비를 지정함.
작은 이미지일 경우 차라리
<img
width="32"
src="icon.png"
srcset="icon.png 1x, icon@2x.png 2x"
>
2x, 3x 같은 배율 방식이 더 편함. DPR에 맞춰서 최선의 이미지를 선택하려고 할 것임.
추천 활용 방법
1. 큰 상단 이미지 같은 경우 경우 999w로 처리.
2. 작은 아이콘류 2x 로 처리.
참고
1. img.currentSrc로 현재 선택된 이미지의 url을 알 수 있다.
1.1. srcset의 영향으로 img.src와 값이 다를 수 있다.
2. 휴대폰이나 고급 노트북의 경우 DPR이 3이 나오는 경우가 있다. 이 경우를 대비해서 최소 2x의 아이콘은 준비하자.
3. svg의 경우 렌더링 될 때 다시 백터에서 그려지므로 srcset 처리가 필요 없다. (안에 비트맵이 있는 경우는 희리게 보일 수 있다)
