一、本文内容干货量远不及之前的那篇

首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“响应式图片srcset全新释义sizes属性w描述符”一文。

提前说明下，本文的示意图片均来自：The anatomy of responsive images

我只是把上面的英文变成了中文，一些图片时候实时效果可以去原页面观摩。

另外，补充了一些遗漏的关于响应式图片处理的tips.

1. 作为背景图片，image-set()这厮
这个是我自己补充的，精力有限，我就不作图了，嘻嘻，使用示意如下(目前需要-webkit-私有前缀)：

兼容性如下：

2. 尺寸固定，密度变化

 

这里出现了srcset，兼容性如下：

3. 尺寸和密度都变化

 

4. 尺寸，密度，资源都变化

 

5. 不同的图片类别

 

二、直接结语

本文主要图解了几种HTML侧的响应式图片的用法说明，希望可以对移动端同学的学习有所帮助。