WebKit最新特性srcset简介(转)

WebKit内核最新新增了对srcset属性的支持（参考：https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/）,这是首个宣布支持srcset的浏览器引擎。

 

 

WebKit内核最新新增了对srcset属性的支持（参考：https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/）,这是首个宣布支持srcset的浏览器引擎。

srcset属性是由W3C旗下的响应式图片社区（http://responsiveimages.org/）首先提出的，目的是旨在为使用不一样分辨率的不一样浏览器用户提供适合其浏览环境的图片大小的解决方案。

做为W3C响应式图片社区的主席，我本人对此功能期待已经有很长的时间了。如今该属性率先由Webkit内核宣布支持，这是个天大的好消息，并且对参与的各方――不管是用户仍是浏览器厂商来讲都是颇有利的。在本文中，我将简单介绍关于srcset属性。

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

srcset属性的目的在于容许开发者为某个图片的属性指定一系列的来源，其中这些图片的来源是要根据客户显示屏的像素分辨率而设定的，好比：

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

其中指出了使用图片做为在低分辨率的显示屏上显示的默认图片以及不能识别srcset属性的浏览器中也会使用该图片；而srcset中指定的图片，则会在能识别srcset属性的浏览器中同时是高分辨率屏幕中显示。能够看到，其语法相似于苹果对Retina-ready图形卡的定义：开发人员只需提供一个备用的文件名(alternate filename)和倍数放大(resolution multiplier)，好比1x、2x或4x。"Resolution Multiplier"是用来衡量"多少个物理像素组成'一个'像素点的方法"，例如iPhone 5的屏幕分辨率为1136x640，但"显示分辨率"为568x320。这意味着4个物理像素组成了一个"显示像素"，或称"4x multiplier"。

这样其中的一个好处是，持有高分辨率显示设备的用户（典型的如苹果设备的用户）能很轻松得浏览那些能提供高质量图片的网站，从而带来很好的用户体验。与此同时，那些使用普通显示分辨率的用户也不会由于网络带宽等问题而懊恼浏览高分辨率图片较多的网站，由于这些网站能提供适合他们观看的图片。

接下来，咱们会有这样的疑问，咱们可否使用Javascript去实现这个属性的功能？其实srcset属性所作的事情并无太特别，它根据用户的显示分辨率从一系列的可供选择的列表中选择了某张图片，而后替换原来src属性所指定的。看上去这个步骤能够彻底用Javascript去代替，但为何要使用全新的属性去实现呢？

实际上，咱们尝试对网站BostonGlobe.com进行响应式图片设计的时候，采用过这样的方法，这个网站也是咱们较早采用“响应图片”解决方案的网站之一。但因为目前几个主要的浏览器对图片具备愈来愈强大的预读取功能(prefetch)，由于图片被读取以前，咱们很难有机会去自定义脚本，最后咱们为每个图片发起了两个不一样的请求。我将其中的一些过程记录

在（http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need），有兴趣的读者能够参考。

那么咱们能用CSS去实现这个功能吗？咱们可使用背景图片并结合和像素有关media查询语法去实现这个功能。由WebKit实现的srcset属性和CSS　3中最新的image-set属性有点像。image-set容许指定一系列的背景图片和分辨率 并能让浏览器去判断哪种是最适合用户的。

使用CSS去按上面的方法去管理图片在不一样分辨率下的显示的话，在一些简单的好比示例性的页面上是没问题的，但若是一旦应用到生产环境的规模比较大的网站中去，是多少会出现性能上或者各类各样的问题。

从开发人员的角度看，让CMS网站去成大量的背景图片并无特别的好处。然而，更糟糕的是，它会致使用户每一次会请求不少并不须要的额外的样式和图片（固然除非你的CSS设计的十分仔细和谨慎）。除此以外，它使得咱们的图片丢失了语义，这在搜索的环境下显得不是那么有利。

最接咱们已经找到了一个基于CSS的方法，能经过基于HTML5中的数据属性值的方法，更换掉图片的来源，这其中使用了一些CSS的技巧（参考http://nicolasgallagher.com/responsive-images-using-css3/），可是要注意的是，其中大部分只是理论上的，可能在生产环境上会遇到各类问题，而且，它仍然没有解决如脚本遇到的一样问题：在下载高分辨率图片的时候的屡次请求问题。

接下来咱们讨论带宽的问题。不管屏幕的分辨率如何，也有大量须要使用分辨率较低的图像源的状况：好比Retina的MacBook Pro的链接到3G网络环境，或不稳定的会议WiFi网络。

除了能为用户提供一种内嵌简单的分辨率媒体查询功能外，srcset属性也在必定程度上考虑了带宽。真正使人兴奋的是，srcset是它定义为一组提供给浏览器的建议方案。而后，浏览器能够根据使用环境或用户的喜爱去决定，它究竟是使用一个较低的分辨率的图片仍是使用高分辨率的图片。
 

实际上，咱们是很倾向根据用户显示设备不一样的分辨率去发送图片的，由于这样既节省了带宽，也能加速图片的下载。若是熟悉HTML 5的读者可能会记得<picture>标签，那么srcset标签和这个picture标签有什么异同呢？

由WebKit所实现的srcset的版本是和原来建议的srcset功能相匹配的，也跟响应式图片社区一直致力的版本是相符的。咱们能够认为这个srcset其实就是化身为针对分辨率的快速的媒体查询方法，一个关键的区别在于浏览器能够选择源根据用户的喜爱和选择进行选择。

虽然这已是匹配原来srcset草案的建议，但当前srcset规范还正在试图扩大语法涵盖的范围，其中有的部分跟<picture>标签的功能是有重合的，如：

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

象上面这种模式的语法在咱们看来并不理想。咱们限制一些和媒体查询语法中如max-width、像素和高深莫测的一些用法，其目的是尽量能重用媒体查询语法的功能。幸运的是，web开发人员或者浏览器厂商都不是特别喜欢过分复杂的语法。

而<picture>标签的存在其目的是为了能用更灵活的和熟悉的语法，去解决一些问题例。<picture>标签在source元素中可使用media属性，和video标签相似。这使咱们可以针对图像源作一些组合：viewport的高度和宽度，以像素或ems为单位，使用min或max值，就和咱们使用CSS　media查询同样。

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

要注意的是，咱们是能够在<picture>标签中使用srcset属性的，例子以下：

<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>

最后要注意的是，尽管Webkit在基于响应式图片的解决方案中率先行动了，但咱们也指望其余浏览器继续跟上这个趋势，同时在http://usecases.responsiveimages.org/上，列举了在响应式图片处理方案的最新研究趋势。
 

原文连接：http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/