嘿！设计师 | 前端们说的“雪碧图”是什么？

通常来说，完成设计稿后设计师会使用设计软件中的切图插件来进行切图。用ps设计有切图神器cutterman，而设计新秀sketch也有许多不同的切图插件，它们可以很方便地导出图片，甚至能同时导出一倍图和二倍图，这可以满足我们绝大多数的需求。

常规切图

但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。

在详细介绍雪碧图之前，先说说背景图片的概念。前端在构建网页结构时，会使用很多的块元素堆叠嵌套，比如大标题< h1 >、段落< p >、图片< img >等，图片标签< img >就是将图片引用进来直接显示，而背景图片则是给< h1 >等元素的背景设置为图片。就好比给电脑设置背景图片，你可以控制它是自适应还是原始大小，重复或者不重复，同样地在网页中每个块元素的背景图片，可以控制它的适应方式、是否重复以及显示位置等。

背景图片

当我们给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理，有点类似ps里的创建剪切蒙版。下图左边就是网易云音乐的一张雪碧图，右侧就是用剪切蒙版演示的雪碧图原理。

原理对比示意

一般来说，在某一模块（比如一个播放器）需要的图片很多而每张图片又不是很大时，可以考虑切成雪碧图交给前端。但目前很多前端构建工具里面有雪碧图合并功能，所以如果前端使用了构建工具可以把合并的功能交给前端。

雪碧图还有一个妙用，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有毛边，在颜色反差很大的背景色上更明显。因此，可以考虑将多帧图片横向排列，以雪碧图的形式每隔固定时间改变背景图片的位置，因为本质上还是png图片，所以毛边的情况就可以解决了。可以参考我之前的文章：透明背景gif图的锯齿是个什么鬼？ 。

那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王老吉图”不行吗？这个，我也不知道。