img标签的srcset属性

网站中图片信息需要使用img标签来展示，img元素中有一个很少用的属性 -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值增大和减小的两个方向上选择一个比值（永远是大数/小数）更小的一个图片显示。

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

在浏览器下载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()属性来实现，具体内容请点击查看详情。