今天给大家介绍有关于响应式设计中的一个新东西，现在也比较流行：响应式图像。RWD不是一个新话题，但实现它的方法并不轻松，在实现过程当中充满了陷阱。尤其是当RWD涉及到图片的处理时，有很多问题还有待于解决。

在《探索Web上图片使用方式》一文中介绍了Web上图片的各种使用方式，从引入图片、图片效果处理、图片适配、图片加载以及图片优化几个方面介绍Web的图片使用方式。其中有一个值得我们去探讨的话题，那就是如何根据用户的设备为其提供正确的图片。那在这篇文章中我们就一起来聊聊这方面的技术。

图片是 Web 页面上最重要的媒体元素，它可有效的向用户传递信息，但在 Web 的近三十年发展历史中，它们的适应性一点都不强。关于图片的一切，比如图片的尺寸、格式和裁剪都被其单一的 src 属性设定像顽石一样的固定下来。特别是当高清屏幕（高分辨率屏幕）和 Web 响应式设计的到来，Web 开发者更进一步感受到了图片在 Web 上使用的限制。庆幸的是，近几年随着 Web 技术的发展，<img> 元素也得到进一步的改变，它不再局限于 src 属性引入图片，也不在局限于 width 和 height 属性设置图片尺寸。Web 开发者可以使用新的 srcset 和 sizes 属性让图片更好的适应于高分辨率的屏幕和响应式设计。除此之外，HTML5 还提供了一个新的元素标记 <picture> 来更改显示的图片以适应不同的图片显示尺寸，而且还可以在background-image 使用 image-set() 函数为不同DPR屏幕显示不同图片。虽然在《聊聊img元素》一文中详细介绍过 <img> 的使用，而且在该文中有介绍过 srcset、sizes 以及 HTML5 的 <picture> 的使用，但并无法很好的帮助大家在响应式设计中使用图片。为了更好的了解和掌握响应式图片在Web中的使用，将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

响应式图片在响应式 Web 设计中一直以来都是较为头疼的地方，除了图片的适配难于处理之外，还有就是图片的加载问题。庆幸的是，HTML 给 <img> 标签新增了srcset和sizes属性，我们可以在这两个属性上提供足够的信息，来告诉浏览器，从而让浏览器自已根据所对应的环境加载最合适的图片。那么在这一部分，我们主要来探讨 <img> 的 srcset和sizes属性，以及了解浏览器是如何根据这些信息来选择合适的图片。如果你对这方面知识感兴趣的话，请继续往下阅读。

这是有关于响应式图片使用的第三部分，在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语；第二部分主要和大家聊的是<img>新增属性srcset和sizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的<picture>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话，请继续往下阅读。

前面我们花了较多的篇幅围绕着 HTML 的 <img> 和 <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcset 和 sizes 属性大不同环境下提供不同尺寸的图片；在 <picture> 中使用 <source> ，并且结合media、srcset、sizes和type等属性可以为用户提供不同图片（环境不同提供不同的图片）和不同类型图片（type指定图片类型）等。但在 Web 开发中，很多时候还会使用背景图片（background-image）、边框图片（border-image）和蒙板图片（mask-image）等。我们接下来围绕着 CSS 中的背景图片（background-image）来展开，换句话说，在background-image中是否也可以像 <img> 和 <picture> 一样，根据用户环境来提供不同的图片。