过去这些年，我们写了不少关于响应式图片的文章。如今既然响应式图片已经运用在浏览器里了，似乎也是时候回顾和总结一些入门指南给那些刚刚开始探索响应式图片的同学。因此，我们推出一个新系列叫做响应式图片101，在里面我们会谈到为什么需要响应式图片以及如何选择正确的响应式图片解决方案。让我们深入学习吧！

我们需要的响应式图片解决方案的主要原因之一是<img>元素功能不足。它只有一个src属性，只能加载一张图片资源，但是我们需要加载多个资源。既然如此，你可能会很惊讶怎么我们还在讨论<img>元素而不是其他新东西例如<picture>和srcset。不管采用哪种响应式图片方案，<img>元素必不可少。<img>元素在所有的内联响应式图片解决方案中都饱受诟病。我喜欢把img当做一个添加和应用所有响应式图片规则的盒子。

自从苹果发布带retina显示屏的iPhone 4，网页设计人员一直在找一个处理高分屏的方案。于是引入了srcset和它的显示密度。首先提醒大家，显示密度是一种分辨率切换使用情况。当我们解决分辨率切换问题时，我们需要使用srcset。我们想要使用srcset的原因是它让浏览器可以选择。当使用<picture>元素提供的media属性时，实际上我们在告诉浏览器必须使用哪个图片。这对于艺术切换很有效。遇到分辨率切换的情况时，浏览器知道哪张图片显示效果最好。它可以根据网络情况或用户行为等因素来做决定。

在响应式图片101系列教程中的第三篇中，我们学习了显示密度描述，并且总结出它们适合用于固定宽度图片，但是对于自适应图片有所不足。伸缩使图片就需要用到srcset的宽度描述符。

上一次我们已经发现了srcset宽度描述符的威力，但他们同时也面临着新挑战－当图片开始下载时浏览器知道的只有视窗尺寸。现在，是时候认识这篇故事里的英雄了：sizes属性。

在第3，4，5部分中，我们专注于分辨率切换的解决方案。现在是时候来研究如何解决艺术指导了。<picture>元素——尤其是媒体属性——被设计来简化艺术指导。

到目前为止我们专注于如何提高响应式图片性能。这是必要的，但是今天，我们依然在页面上使用一样的旧图片。现在，是时候看点有意思的东西了！

大多数时候谈到响应式图片，人们指的是内联图片，而不是CSS图片。这是因为在<picture>和srcset之前内联响应式图片还没有好的解决方案。但遇到CSS图片时，我们可以使用媒体查询，那还有什么可担心呢？现在是时候回顾响应式CSS图片并基于我们已经学过的内联图片寻找解决方案。

我其实很害怕写响应式图片101系列里图片断点这个部分。选择图片断点每个人都会遇到，坦白说，我也没有一个好的解决方案。但我们迟早会遇到图片断点的问题。所以不妨现在就开始研究。

我们做到了！我们到了响应式图片101系列的结尾。在与这个系列就此分别之前，我想给出一些提示，资源和一些关于响应式图片发展的最终思考。