雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
一、使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。
通常来说，完成设计稿后设计师会使用设计软件中的切图插件来进行切图。用ps设计有切图神器cutterman，而设计新秀sketch也有许多不同的切图插件，它们可以很方便地导出图片，甚至能同时导出一倍图和二倍图，这可以满足我们绝大多数的需求。
但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。
在详细介绍雪碧图之前，先说说背景图片的概念。前端在构建网页结构时，会使用很多的块元素堆叠嵌套，比如大标题<h1 >、段落<p >、图片<img >等，图片标签<img >就是将图片引用进来直接显示，而背景图片则是给<h1 >等元素的背景设置为图片。就好比给电脑设置背景图片，你可以控制它是自适应还是原始大小，重复或者不重复，同样地在网页中每个块元素的背景图片，可以控制它的适应方式、是否重复以及显示位置等。
当我们给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理，有点类似ps里的创建剪切蒙版。下图左边就是网易云音乐的一张雪碧图，右侧就是用剪切蒙版演示的雪碧图原理。
一般来说，在某一模块（比如一个播放器）需要的图片很多而每张图片又不是很大时，可以考虑切成雪碧图交给前端。但目前很多前端构建工具里面有雪碧图合并功能，所以如果前端使用了构建工具可以把合并的功能交给前端。
雪碧图还有一个妙用，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有毛边，在颜色反差很大的背景色上更明显。因此，可以考虑将多帧图片横向排列，以雪碧图的形式每隔固定时间改变背景图片的位置，因为本质上还是png图片，所以毛边的情况就可以解决了。可以参考我之前的文章： 透明背景gif图的锯齿是个什么鬼？ 。
那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王老吉图”不行吗？这个，我也不知道。
