图片是 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中的使用，将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

为什么要用自适应的图片

@johnallsopp早在 2000 年 4 月在 A List Apart 的 《A Dao of Web Design》一文这样说过：

"Everything I’ve said so far could be summarized as: make pages which are adaptable.… Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web, far from fulfilled as yet, is accessibility, regardless of difficulties, to information."

大致意思就是：“到目前为止，我所说的一切都可以概括为：制作自适应的网页...设计自适应的网页就是设计无障碍的网页。也许 Web 伟 大承诺还远未实现，那就是无障碍，不管什么障碍，都能获得信息。”

自从 2010 年 5 月国外著名网页设计师 @Ethan Marcotte 提出响应式网页设计（Responsive Web Design，即 RWD） 概念之后，自适应网页设计就得到了很大的改善。但在构建响应式网页时碰到了最令开发者感到头痛的问题，那就是 响应式图片。

响应式图片是一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，它仅仅只是响应式Web设计的一部分，但它也奠定了响应式 Web 设计的良好基础。不过，在 Web 发展的近 30 年历史中，图片的适应性很弱。因为对于大多数 Web 开发者而言，可能只记得 <img> 的 src 引入单一图片源，并且仅仅依赖 width 和 height 属性来设置图片尺寸，但这对于响应式图片是远远不够的 —— 限制太多。特别是随着硬件终端种类越来越多，Web 开发者为了满足图片在大的屏幕和高分辨率的屏幕上看起来很清晰，会选择尺寸最大的，清晰度最高的图片：

但这样做对于很多使用低分辨率或小屏幕用户而言是不公平的，因为无形中给这些用户增加了更多的带宽，也让他们在访问页面时变得更慢（因为高清晰，大尺寸图片文件就更大，下载就更慢）。面对这种复杂的场景时，最为理想的是：

当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

这样一来，就让事情变得复杂了，有些设备有很高的分辨率，为了显示的更出色，可能需要超出你预料的更大的图片。这从本质上是一样的问题，但在环境上有一些不同。

你可能会认为矢量图能解决这些问题，在某种程度上是这样的 —— 它们无论是文件大小还是比例都合适，无论在哪里你都应该尽可能的使用它们。然而，它们并不适合所有的图片类型，虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的照片，创建矢量图会变得非常复杂。像 JPEG 格式这样的位图会更适合上面例子中的图片。

当 Web 第一次出现时，这样的问题并不存在，在上世纪九十年代中期，仅仅可以通过笔记本电脑和台式机来浏览 Web 页面，所以浏览器开发者和规范制定都甚至没有想到要实现这种解决方式（响应式开发）。最近应用的响应式图片技术，通过让浏览器提供多个图片文件来解决上述问题，比如使用相同显示效果的图片但包含多个不同分辨率（分辨率切换），或者使用不同的图片以适应不同的空间分配（艺术指导）。

但是，响应式图片不仅仅只是尺寸和格式这么的简单。响应式图片的显示其背后有很复杂的逻辑。它涉及到确定图片的大小、以及了解用户是否在高分辨显示器上，还有其他一些事情。值得庆幸的是，浏览器比我们更有能力来处理这个逻辑。我们所要做的仅是给