为什么要在图像标签中使用 `srcset` 属性？

当您希望根据用户的设备显示宽度为用户提供不同的图像时，您可以使用 srcset 属性 - 为具有视网膜显示屏的设备提供更高质量的图像可以增强用户体验，而为低端设备提供较低分辨率的图像可以提高性能并减少数据浪费（因为提供更大的图像不会有任何可见的差异）。例如：<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> 告诉浏览器根据客户端的分辨率显示 small、medium 或 large .jpg 图像。第一个值是图像名称，第二个值是图像的宽度（以像素为单位）。对于 320px 的设备宽度，将进行以下计算：

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

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

如果分辨率是视网膜 (2x)，浏览器将使用最接近最小值的分辨率。这意味着它不会选择 500w (1.5625)，因为它大于 1，并且图像可能看起来很糟糕。然后，浏览器将选择结果比率更接近 2 的图像，即 1000w (3.125)。

srcset 解决了您希望为窄屏设备提供较小图像文件的问题，因为它们不需要像桌面显示器那样的大图像，并且还可以选择为高密度/低密度屏幕提供不同分辨率的图像。