img标签的srcset属性

网站中图片信息需要使用img标签来展示，img元素中有一个很少用的属性 -srcset，该属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

显示的图像可以通过srcset属性来实现响应式，为不同尺寸的设备提供不同尺寸的图像，移动设备显示小尺寸图像，平板显示中等尺寸的图像，台式机显示大尺寸的图像，这样就避免在较小的设备上下载不必要的图像数据，并提高网站在这些设备上的性能。

srcset属性：

图片地址 宽度描述w | 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 960w, small.jpg 1x" />

上面的例子表示浏览器宽度达到 960px 则加载 middle.jpg ，达到 1440px 则加载 big.jpg，否则就显示small.jpg图片。当然如果浏览器不支持 srcset 属性，则默认为 src 属性。

w是对该图片宽度的描述，而且这会直接影响到浏览器对于图片的选择，浏览器选择的标准就是根据sizes和dpr计算所得准确值在w值增大和减小的两个方向上选择一个比值（永远是大数/小数）更小的一个图片显示。

像素密度描述只对固定宽度图片有效。

sizes属性

在浏览器下载html 页面不久之后，他将会继续请求css 和 js 资源 img 资源, 但是css,js,img的请求没有先后之分 所以浏览器并不知道页面的布局，所以对图片的尺寸也一无所知，浏览器唯一知道的是视口的尺寸，但是这并不足以 给浏览器选择最佳的图片源。

img的sizes属性作用就在于告诉浏览器根据【屏幕尺寸】和【像素密度】的计算值从srcset 中选择最佳的图片源。

媒体查询 宽度描述（支持px），多条规则用逗号分隔。

<img src="img/gun.png" srcset=" img/bg_star.jpg 1200w,  img/share.jpg 800w,  img/gun.png 320w"
sizes="(max-width: 320px) 300w, 1200w"/>

第一个部分是【媒体情况】，他不是媒体查询，但是跟媒体查询类似，用括号包括起来。 第二个部分是【长度单位的值】 ，可以是px, vw或者其他单位。

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

sizes是如何起作用的呢？

首先浏览器会读取 sizes 然后根据媒体情况来选择，如果匹配到某个值，就根据这个值的长度值单位乘以屏幕像素密度，最终得出来的值再与srcset 中的宽度描述匹配来选择图片。

1. 根据媒体情况 选择 size 中的值。
2. 将值中的长度值 * 屏幕像素密度得到 最终宽度
3. 最终宽度去匹配 srcset 中的宽度描述，得到最终图片

为不同视口宽度选择图像的决策逻辑可能因浏览器而异，你可能会看到不同的结果。

为较小的设备下载较少的图像数据，可以让浏览器快速显示这些图像，从而提高网站的性能。

一句话总结： 

1、img 标签的 srcset 可以用来处理页面在不同像素密度终端设备上对图片的选择性展示 

2、sizes 作用就在于告诉浏览器根据【屏幕尺寸】和【像素密度】的计算值从srcset 中选择最佳的图片源。

3、在css中我们可以使用image-set()属性来实现，具体内容请点击查看详情。

链接: https://www.fly63.com/article/detial/11663