在开发 H5 应用的时候碰到一个问题， 应用只需要一张小的缩略图， 而用户用手机上传的确是一张大图， 手机摄像机拍的图片好几 M，这可要浪费很多流量。 像我这么为用户着想的程序员，绝对不会让这种事情发生的， 于是就有了本文。

首先我们来说一下前端 icon 的发展史。 在我刚开始实习时，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 backgrou…