为什么你会在图片标签中使用 `srcset` 属性？

当你想根据用户的设备显示宽度向他们提供不同的图片时，你会使用srcset属性--向有视网膜显示的设备提供更高质量的图片，增强用户体验，而向低端设备提供低分辨率的图片，提高性能，减少数据浪费（因为提供更大的图片不会有任何可见的差别）。 例如：<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> 指示浏览器根据客户端的分辨率显示大小、中等或大的 .jpg 图片。 第一个值是图片名称，第二个值是图片宽度像素。 对于宽度为 320px 的设备，计算如下：

• 500 / 320 = 1.5625
• 1000 / 320 = 3.125
• 2000 / 320 = 6.25

如果客户端的分辨率是 1x，1.5625 是最接近的，500w对应的small.jpg将被浏览器选中。

如果分辨率是视网膜（2x），浏览器将使用高于最小分辨率的最接近的分辨率。 它不会选择 500w(1.5625)，因为它大于 1，图片看起来可能很差。 然后，浏览器将选择结果比率接近 2 的图片，即 1000w（3.125）。

srcset解决的问题是，你想为窄屏幕设备提供较小的图片文件，因为它们不像桌面显示器那样需要巨大的图片--也可以选择你想为高分辨率/低分辨率屏幕提供不同分辨率的图片。