WebKit的已实施srcset图像响应属性

WebKit已经发布了一些官方新闻，终于落实srcset的属性。作为W3C的响应图像社区组的主席，我一直希望这一刻到来有一段时间了。所以，对所有参与方是个好消息，用户浏览网页时的体验是最重要的。

所有事项有关的到“有求必应图像”：它是复杂的，它可能很难跟上所有的噪音信号。下面是你需要知道什么。

它有什么作用呢?

正如最初提议，允许开发人员指定的图像属性，根据用户的显示屏上的像素密度来设置srcset属性组合：

<img src="low-res.jpg" srcset="high-res.jpg 2x">

这标记太吓人了，在纯英文：

“使用low-res.jpg，这IMG作为源低分辨率显示器上，任何浏览器不明白的srcset属性。使用high-res.jpg的作为源这个IMG了解的srcset属性的浏览器上的高分辨率显示。“

事情开始看起来很吓人，有一小会儿。部分由于高分辨率设备的平均网站现在几乎整个兆字节的图像。现在，开发人员可以针对用户对高分辨率显示器具有高分辨率的图像源。同时，较低的像素密度显示屏上的用户不会背负下载一个巨大的高清晰度图像的带宽成本，没有看到任何好处。

使用JavaScript我们能不能做到这一点?

表面上，srcset的是不是做什么特别的东西，它选择一个合适的源属性和交换内容IMG标签的SRC。交换的内容属性，是自远古以来，我们一直在做的JavaScript。90年代以来，无论如何。所以，这是什么让我们获得?

实际上，我们尝试这种方法上BostonGlobe.com，任何形式的“响应图像”的解决方案利用较早的网站之一。在几个主要的浏览器越来越具有侵略性的预取，请求一个图像的src很久以前我们有机会申请任何自定义脚本：我们将最终使我们每一个图像显示两个请求，打败整个目的。我记录了一些其他地方的这些努力，所以我会饶你血淋淋的细节在这里。

利用CSS我们能不能做到这一点?

“是”和“否”与背景图像，我们可以做到这一点很容易不够，像素密度有关媒体查询结合使用。srcset由WebKit的实现是非常相似，最近的图像设置功能，他们推出了CSS 图像设定允许你指定一个背景图像的来源和决议清单，哪一个是最合适的很熟悉的东西，让浏览器作出决定。我们没有什么非表象的内容图像沿着这些线路，然而，到现在为止。

使用CSS来管理内容的图像被打破，默认情况下，保持我们关注的问题分开。这是一个完美感的方法，可能使一个快速演示页面的范围内，但看台上迅速失控，在生产网站。我们的CMS生成背景图像的样式表的分数就没有野餐，从开发商的角度来看。然而，更糟糕的是，是，它会导致样式表和图像的请求，用户可能并不需要，除非做得非常，非常仔细。除此之外，它使得我们的图像，没有双关语意人迹罕至的用户浏览辅助技术的方式。

最接近我们已经找到了一个基于CSS的方法将基于在HTMLs数据属性值设置交换图像的来源，使用一些拟议的CSS技巧，其中大部分只是理论上的，可能永远不会发生。但是，它仍然没有占到双下载高分辨率和低分辨率图像资产相同的问题，我们遇到的JavaScript。即使像尼古拉斯应该成为我们的技术，我们仍然会面临同样的问题，许多基于脚本的解决方案：尝试解决浪费，冗余请求。

它是做什么的关于带宽?

无论屏幕密度，也有一些分辨率较低的图像源的情况下，可能是可取的：视网膜MacBook Pro的拴到3G，例如，或不稳定的会议WiFi网络，这两种情况下，我们都一直在大量的倍。

除了 ​​简单地为我们提供了一种内嵌速记分辨率媒体查询，对带宽的srcset账户，在一定意义上。它埋在神秘的规范发言，但真正令人兴奋的方面srcset之一是，它的定义为一组建议的浏览器。然后，浏览器可以使用环境的启发式或用户的喜好来决定，它要取一个较低的分辨率的图像，尽管高解析度显示：设想一个偏好高清晰度图像，只要求您的手机浏览器，允许同时连接到WiFi，或手动浏览器偏好，让您低分辨率的图像时，只要求你的连接是摇摇欲坠。

理想情况下，我们很乐意只发送这些图像的设备是专门为每个屏幕分辨率调整大小。我们的目的是节省带宽，使图像下载更快针对性的屏幕上。à 响应图像常见的使用案例。

这不是WebKit的的早期srcset实现的一部分，但它确实铺平道路，为他们的除了我们的标记，而无需任何改动。我们开发者，可以放心地使用srcset今天，这些优化可能出现“免费”在未来。

这是什么意思的图片元素?

这里的事情变得有趣。

由WebKit实施的版本srcset，匹配原建议使用srcset，敏感的图像社区集团一直致力的版本。我们可以认为这个srcset化身速记媒体查询有关决议的整体转换，一个关键的区别在哪里，浏览器可以选择覆盖适用源根据用户的喜好。

虽然此实现匹配原来srcset建议，，当前srcset规格试图扩充的语法，一些用例的图片元素满足，使用microsyntax的执行了一些，但远不及媒体查询的功能。

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">

在我们看来并不理想，这样的标记图案。我们限制相当于最大宽度媒体查询，像素，一个的高深莫测microsyntax，为了复制媒体查询功能。幸运的是，既不是Web开发人员，也没有浏览器的代表都特别喜欢这种过度的语法希望，它永远不会看到光明的一天。

图片元素的存在是为了解决这些应用情况下，使用更灵活的和熟悉的语法。图片使用媒体源元素上的属性，类似的视频元素。这使我们能够针对图像源因素的组合：视区高度和/或宽度，以像素或EM Ş，可以使用最小或最大的值，就像在我们的CSS媒体查询。

<picture>
<source src="med.jpg" media="(min-width: 40em)" />
<source src="sm.jpg" />
<img src="fallback.jpg" alt="" />
</picture>

picture记住这的减少srcset语法规范写的，所以它可以用于图片的源元素以及IMG元素。

<picture>
<source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" /><source srcset="sm.jpg 1x, sm-hd.jpg 2x" /><img src="fallback.jpg" alt="" />
</picture>

在讨论会上，两个标记模式给了我们一个令人难以置信的灵活性，根据它们的上下文，什么样的影像来源，我们向用户提供服务。

因此，这是好消息。www.rswebun.com

虽然srcset WebKit的实施并没有解决所有响应的图像用例，但它确实代表一个早该有的解决方案，希望许多第一次迈进了一大步。

让我们希望遵循WebKit的其他浏览器，因为它最初提出的率先实现此功能，图片在不同分辨率的浏览工具上自动响应交互。