精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。

常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

优点：

体积小：把N多个小图标放到一张大图上去，通过整合图片来减少图片的体积；
请求次数少，打开速度更快：通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度。

使用 background属性

例如：background: #ccc url('/icon.png') no-repeat 0 -200px

补充background相关属性
background-color: red (等于 background:red)
background-image: url() 填充背景图片
background-repeat: no-repeat(不平铺)

前端如何制作合并精灵图（雪碧图）

方法一：这是一个在线生成工具

alloyteam.github.io/gopng/###

方法二：npm命令生成

1.首先电脑上要安装有 node.js

打开终端输入下npm -v可以查看是否安装（注意空格）

LiudeMac-Pro:~ liu$ npm  -v
6.14.13 //已安装会显示这个node的版本号

2.使用spirit-cli命令合并所有图片为一张精灵图并生成代码

①全局安装spirit-cli插件

// 使用npm 
npm install -g spirit-cli   //报错的话，可以尝试前面加sudo,以管理员身份运行：sudo npm install -g spirit-cli

这里如果出现报错，

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules //没有读写权限
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
···
npm ERR! Error: EACCES: permission denied,//拒绝授权 access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,

报错显示没有权限，我们需要以管理员身份去运行，在前面加上sudo,如下图

sudo npm install -g spirit-cli

②使用命令 spirit 加上要合并的图片所在的文件夹路径
spirit + 空格+文件夹路径

// 使用npm 
→ ~ lrachel$ spirit /Users/lrachel/Desktop/flag
开始检测路径： /Users/lrachel/Desktop/flag
检测到5个文件！
开始进行合并

合并完成后，你会发现在你之前创建的img文件夹下多了一个spirit-cli文件夹，文件夹里面有合并好的精灵图(雪碧图)和对应的CSS，到这里只需要前端引入.css文件样式直接调用就可以。出处：www.jianshu.com/p/7e9081cf3…

什么是雪碧图

优点：