img srcset (note)

1.针对不同的屏幕分辨率

通过上传不同分辨率的图片:


srcset属性可以通过指定一系列的图片url及尺寸来让浏览器能根据不同条件加载不同图片,并且仍然指定src属性来兼容那些不支持srcset的浏览器:


例如在一个实际案例中: (高质量的图片远比低质量的图片体积大)


通过设备像素比来加载指定质量的图片:

e.g:

                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

你可能感兴趣的:(img srcset (note))