雪碧图

雪碧图是什么？

雪碧图也叫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截取小图标.

参考文章：原文