고물상

<img src="fallback.jpg" />

보통 사용하는 이미지 태그

<img 
src="fallback.jpg"
srcset="
이미지@1x.png 1000w,
이미지@2x.png 2000w,
이미지@3x.png 3000w"
/>

해상도별 반영 이미지 구분

~1000px : 이미지@1x.png

1001px~2000px : 이미지@2x.png

2001px~3000px : 이미지@3x.png

그외 : fallback.jpg

<img 
src="fallback.jpg"
srcset="
이미지@1x.png 1000w,
이미지@2x.png 2000w,
이미지@3x.png 3000w"
size="50vw"
/>

해상도별 반영 이미지 구분에 화면 비중을 추가로 계산하고 싶으면 size 추가

~1000/2 px  : 이미지@1x.png

1001/2 px ~ 2000/2 px : 이미지@2x.png

2001/2 px ~ 3000/2 px : 이미지@3x.png

그외 : fallback.jpg

지원하는 브라우저가 많지 않으니 최적화가 꼭 필요한 경우만 사용할것!

https://caniuse.com/?search=srcset