1.针对不同的屏幕分辨率
通过上传不同分辨率的图片：
srcset属性可以通过指定一系列的图片url及尺寸来让浏览器能根据不同条件加载不同图片，并且仍然指定src属性来兼容那些不支持srcset的浏览器：
例如在一个实际案例中： （高质量的图片远比低质量的图片体积大）
通过设备像素比来加载指定质量的图片:
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.针对不同的屏幕大小
另一种方法是把图片信息提供给浏览器，使浏览器能根据这些信息更智能地选择需要的图片
可以看到这时我们用的是w而不再是x，w指的是图像的真实大小（右击图片属性查看）
使用sizes:
e.g： 当满足size中max-width:400px 的时候，发现插槽宽度为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
