那么srcset标签和HTML5的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/