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的其余浏览器，由于它最初提出的率先实现此功能，图片在不一样分辨率的浏览工具上自动响应交互。