img 元素的 srcset 属性用于浏览器根据宽度或者像素比来加载相应的图片资源。

属性格式：图片地址 宽度描述w 像素比描述x，多个资源之间用逗号分隔。

例1：

<img src="zero.jpg" alt="" srcset="first.jpg 200w, second.jpg 400w, third.jpg 600w">

上述代码根据浏览器视口的宽度来确定显示哪一张图片，如果是宽度小于等于200px，显示first.jpg，如果宽度大于200px小于等于400px，显示second.jpg，如果大于400px小于等于600px，则显示third.jpg。注意：如果宽度大于600px呢？还是显示third.jpg，不会显示zero.jpg。只有当浏览器不支持srcset属性时，才会显示zero.jpg。

例2：

<img src="zero.jpg" alt="" srcset="first.jpg 1x, second.jpg 2x, third.jpg 3x">

上述代码根据浏览器设备像素比来确定显示哪一张图片。这里的设备像素比指的是 物理像素/逻辑像素，如果不太清楚参考 链接了解。 注意：像素密度描述只对固定宽度图片有效。

例3：

<img src="zero.jpg" alt="" srcset="first.jpg 200w, second.jpg 400w, third.jpg 600w"  sizes="(max-width: 800px) 100px,(max-width: 1000px) 300px" />

上述代码添加了sizes属性，使用媒体查询的方式确定显示的图片。如当视口宽度大于600px小于800px时，当初100px时的视口处理，所以说显示的就是first.jpg，大于800px小于1000px时，当成300px处理，所以说图片显示的就是second.jpg.