图片是页面中较为重要的元素之一，在目前流行的响应式设计当中，图片也需要随之做出变化，本文就给出了目前业界针对响应式图片给出的各种解决方案。

对img元素增加srcset属性

规范地址：http://www.w3.org/TR/html-srcset/

在img的srcset属性中可以提供若干图片资源地址，并附加使用图片的条件描述，浏览器可根据使用条件来使用对应的资源。srcset的格式要求是：图片资源地址+可选的宽度描述+可选的高度描述+可选的像素密度描述，多个资源和描述组合之间用逗号分隔，例如：

<img alt="The Breakfast Combo"
         src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

例如在上面的例子中，“banner-HD.jpeg 2x”表示当设备像素密度为2时使用该图像资源。“banner-phone.jpeg 100w”表示浏览器视口宽度为100像素时使用该资源。

当使用像素密度条件时，如果没有提供图片渲染尺寸，浏览器会自动将图片渲染尺寸设置为符合像素密度的大小。例如，图片本身尺寸为400x400，像素密度为2x，那么浏览器在渲染的时候图片尺寸就变为200x200。当然建议还是手动写上图片尺寸，以减少浏览器的负担。

目前只有像素密度描述被Chrome支持，视口描述目前均不支持。（http://stackoverflow.com/questions/14397458/which-browsers-support-the-img-srcset-attribute）

picture元素

规范地址：http://www.w3.org/TR/html-picture-element/