改进对高分辨率显示屏上图片的支持

WebKit 现已支持图像（<img>）元素的 srcset 属性（W3C 官方规范）。这使得您，开发者，可以为拥有高分辨率显示屏的用户指定更高质量的图像，而不会对没有高分辨率显示屏的用户造成性能损失。重要的是，它还为尚不支持此功能的浏览器提供了优雅的降级方案。

查看新功能的实际应用。请注意，您需要一个最新的 WebKit 每夜构建版本。我还在此处内联了部分演示内容。

如您所知，WebKit 支持 -webkit-image-set CSS 函数已有一年多时间。它允许接受图像的 CSS 属性提供候选图像 URL 列表，每个 URL 都有一个修饰符，例如“2x”。这使得浏览器能够为用户的设备选择最佳图像。在此功能之前，如果您想支持高分辨率显示屏，有几种选择，每种都有一些缺点。您可以重复您的 CSS。您可以使用 JavaScript 查询设备像素比并在页面加载后更新图像资源，这可能会触发多次图像加载。或者您可以硬编码更高分辨率的图像，从而惩罚那些下载了不必要数据的用户。而且，如果您提供不同分辨率的图像，还需要额外痛苦地指定相关的 CSS 属性，例如 background-size 或 border-image 的切片。这很烦人。值得庆幸的是，-webkit-image-set 解决了这个问题，它允许您编写一个简单的规则，让浏览器完成决定使用哪个图像以及下载哪个图像的工作。

img 上的 srcset 属性与 -webkit-image-set 非常相似。事实上，您可以将其视为 CSS 功能的标记等效项。与 -webkit-image-set 中的候选图像列表类似，您可以为图像元素添加一个新属性 srcset。它被设计为向后兼容：不支持该属性的浏览器会忽略它，并继续使用 src 值。同时，WebKit 等浏览器引擎可以查看 srcset 并决定哪张图像最适合用户的设备。在大多数情况下，您不需要除此之外的任何东西

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

注意到“better-image.jpg”后面的“2x”了吗？这告诉浏览器，如果您的显示器每个 CSS 像素有两倍或更多设备像素，它应该使用“better-image.jpg”而不是“normal-image.jpg”。如果您的显示器不是高分辨率的，浏览器将回退到 src 中指定的值。您还可以在 srcset 中为 1x 显示器指定另一个候选（如示例所示）。

您可以在官方规范中阅读更多关于 srcset 的内容。请注意，目前 WebKit 仅支持分辨率修饰符（例如 1x、2x、3x）。与 WebKit 中的任何新功能一样，可能存在错误，因此请留意任何行为异常的情况。特别是，您应该验证 WebKit 是否正在为页面下载最少的资源，因为这是此功能的目标之一。

特别感谢 WebKit 社区成员 Romain Perier 和 Yoav Weiss，他们为此功能做出了重要贡献（r153624, r153733）。