img srcset （note）

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