雪碧图是什么？
雪碧图也叫css精灵， 是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图。
适合拼成雪碧图的图片：
-
静态图片，不随用户信息的变化而变化
-
小图片，图片容量小，加载量大
-
可以自己合成雪碧图
方法：cssgaga，photoshop，gulp，webpack都可以去尝试，还有一个网站CSS Sprites Generator，不过貌似缺点是图片合成后超小
为什么会有雪碧图？
网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；
而每个请求都需要一定的性能开销，主要在请求、以及响应阶段。
为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。
如何利用它来解决问题？
每个小图标的使用配合background-position来获取, background-position使用定位如下X和Y轴，注：原点0，0 位置， 之后X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标.
参考文章：原文
