1.針對不同的屏幕分辨率
通過上傳不同分辨率的圖片：
srcset屬性可以通過指定一系列的圖片url及尺寸來讓瀏覽器能根據(jù)不同條件加載不同圖片，并且仍然指定src屬性來兼容那些不支持srcset的瀏覽器：
例如在一個實際案例中： （高質(zhì)量的圖片遠比低質(zhì)量的圖片體積大）
通過設備像素比來加載指定質(zhì)量的圖片:
e.g：
<img src="https://www.dnvgl.com/Images/KL_Cru_112_Industry_Container_Ship_Blue_Ocean_tcm8-147168.jpg"
? ? ? ? ? ? ? ? srcSet="
? ? ? ? ? ? ? ? ? ? https://www.dnvgl.com/Images/hospital765x459pxl_tcm8-146824.jpg 1x,
? ? ? ? ? ? ? ? ? ? https://www.dnvgl.com/Images/Viewpoint_FoodSafety_765x459_compressed_tcm8-142628.jpg 2x,
? ? ? ? ? ? ? ? ? ? https://www.dnvgl.com/Images/DataScience765x459px_tcm8-140531.jpg 3x
? ? ? ? ? ? ? ? ? ? " />
在chrome中模擬不同分辨率的設備：
2.針對不同的屏幕大小
另一種方法是把圖片信息提供給瀏覽器，使瀏覽器能根據(jù)這些信息更智能地選擇需要的圖片
可以看到這時我們用的是w而不再是x，w指的是圖像的真實大?。ㄓ覔魣D片屬性查看）
使用sizes:
e.g： 當滿足size中max-width:400px 的時候，發(fā)現(xiàn)插槽寬度為389，然后再看設備dpr為2，那么就會在srcset中找到插槽*2的寬度，即389*2 = 778w，如果沒有找到，則會尋找更大的
利用picture并指定source來加載不同格式的圖片
references:
https://html.com/attributes/img-srcset/
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
