WebKit最新特性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是它定义为一组提供给浏览器的建议方案。然后，浏览器可以根据使用环境或用户的喜好去决定，它到底是使用一个较低的分辨率的图片还是使用高分辨率的图片。
 

[[85637]]

实际上，我们是很倾向根据用户显示设备不同的分辨率去发送图片的，因为这样既节省了带宽，也能加速图片的下载。如果熟悉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/