responsive design 并不是 responsive image，它能创建适应性的布局可以缩放图片但不能智能加载适应屏幕大小的图片。在小尺寸屏幕上缩放大图片确定是浪费流量浪费时间的事。

解决方法一是后端检测浏览器信息输出不同的img地址，responsive design目的就是为了将前端行为与后端分开，这样做耗力耗时间而且浪费服务器资源。
二是前端用javascript检测屏幕大小(包括resize行为)，自动加载适应屏幕大小的图片，但是用这样的方法，img标签的src属性是动态生成的，如果不幸javascript被禁用，那图片就显示不出来了。当然可以放张小图,但是总觉得麻烦。

我们只能寄望于html增加新的标签并且浏览器原生支持实现responsive image的功能。

Scott Jehl 提出的解决方式是用 标签和Media Query 让浏览器自动选择合适的图片。当然现在只能用javascript来实现了。不过这是一种十分可行而且语义十足的方式，希望在某一天可以被w3c列入html规范。

代码如下：

   
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- smallest size first - no @media qualifier -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
<!-- medium size - send to viewport widths 400px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5.jpg" media="(min-width: 400px)">
<!-- large size - send to viewport widths 800px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_z.jpg" media="(min-width: 800px)">
<!-- extra large size - send to viewport widths 1000px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_b.jpg" media="(min-width: 1000px)">
<!-- extra large size - send to viewport widths 1300px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_c6160b34e2_o.jpg" media="(min-width: 1200px)">
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial,     unqualified source element. -->
<noscript>
<img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face     at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</picture>

原文在此：http://www.w3.org/community/respimg/2012/02/21/a-sample-picture-implementation/
demo在此：http://scottjehl.com/picturefill/
github:https://github.com/scottjehl/picturefill

##问题
因为浏览器不支持，即使google也还不知道有这样的标签。在这样的代码中是没有img标签的，爬虫并不能像原来一样找到img标签并列入索引。那么是否会对SEO造成很大的影响(尤其是图片网站)。即使某一天支持了，google认识了新的标签，但是百度什么的不认怎么办（连robots.txt都不大认识）。