精灵的英文叫做Sprite，Sprite也是雪碧的意思，故也称为“雪碧图”。
精灵图就是把很多张小图整合到一张大图的方式，如下图所示：
每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。
举个例子，我们来看一下下面的门户网站，头部有很多很多的图标icon，我们每次打开或者刷新，每个都需要加载一遍，
下面我们来看一下早些年网速和现在网速的对比图，大家就有所了解了：
那么与此同时，精灵图出现了，设计师把网页中用到的所有切图都放到了同一张图片上，利用插件或者网页端工具导出格式文件，前端工程师利用css控制坐标（x，y）的方式定位切图，这样，每次请求一次就会加载所有的切图，刷新时长变短了，用户端打开网页的加载变快了。
这个就很简单了，只需要在显示图标的位置设置好盒子，以盒子左上角为(0,0)坐标，使用background-position来调节图片的位置，让需要使用的图标正好出现在盒子中即可实现一张图片在不同位置显示不同的图标。（正值为下和右，负值为上和左，所以一般用负值）
工具名称：cssspritesgenerator（google浏览器直接搜，第一个就是）
打开的页面如下：
把切好的图拖到左边有绿色按钮的模块中，右边就会自动形成大图，一般也就是放一些小的icon之类的，尺寸不建议太大。大家特别注意一下这里，下图中的下拉选项应该是和开发调用有关系，但是现在随着网速的发达和研发技术的发展，pc端已经很少在用精灵图了，基本都是切图的方法打包给前端开发来实现。
精灵图适合尺寸较小的使用场景，如果是一个按钮的状态，其实也就是三个状态，normal、hover、press，那么我们其实可以手动把这三个状态做成一张长图，交给开发做一个background-position位置的定位实现状态的改变。
软件：AfterEffects、Sketch&figma
插件：css-Sprite-Exporter.jsx（这是精灵图导出的重要插件）
AEUX（这里分为sketch插件和AE的插件，用于设计稿导入AE的插件）
我们在sketch或者figma里做好设计图，比如此时我们的动效设计图为20*20的尺寸，那么需要在底部给一个隐藏的上下左右的安全边距，这里可以给6px的安全边距，原因是因为如果不给边距，在ae里做完动画导出后中间没有间隔，开发那边定位出来会出现误差，实现效果就会大打折扣。
1、先导出26*26的图（拖到ae里作为底图），再分别把每个元素单独导出图片格式（具体看动效需要），拖到AE里把每个元素按设计稿里的位置定位好，然后开始做动画。
优点：设计稿里所有效果都会支持（透明、投影、内阴影，高光），如果只是简单的缩放位移，可以这么做。
缺点：有些动画比较鸡肋，比如要做路径动画，那肯定不支持，色差也是会有的。
2、直接用aeux导入AE
优点：支持复杂的动画，比如路径动画，蒙版，可做范围比较广。
缺点：比如要导出lottie的话，不支持渐变等等。。
在AE中的边距要与在sketch中是一致的，做好动画后，点击文件-脚本-css-Sprite-Exporter.jsx插件
点击后，会出现精灵图插件面板，这时候最大宽度要与合成设置中的参数一致。
点击生成，我们会看到一个文件夹，里面包含生成的序列帧图和一个带有css代码的的网页，如下示例
至此，精灵图从设计到生成就结束了，然后把生成的文件夹压缩后交给前端研发即可。
在sketch中绘制我们要做的页面动效设计图，要切记每个图我们要预留上下左右的边距，
我们在ae里做好动画后，导出的雪碧图应该是如下形式：
动画的路径是如Z形所示：
H5页面代码一般是用rem，在适配各类机型的时候，往往会出现些许误差，这样都是不可避免的，我在实际工作中遇到雪碧图实现出来在iphone全面屏会出现1px的误差，效果是肉眼可见的左右晃动，这样体验不是很好。
布局写死宽高，用px布局。缺点：不同手机屏幕看到的绝对大小是一样的，元素不会根据手机屏幕放大缩小，自动适配（说白了就是小屏幕看到的效果相对来说会大一些，大屏幕看到的效果相对来说会略微小一些）。综合考虑到业务小屏手机（360安卓机型宽和375宽苹果机型）用户较少，所以采用了这个办法，最后落地效果很好。
写死宽高的适配方式不适用于所有场景及业务，具体还是要看具体情况而定。假设小屏用户手机占比很少很少，现在主流大屏用户居多，那么可以舍弃小屏的手机，主要看大屏的效果就ok。
2.开发成本中等，沟通成本小
3.解决了命名困扰，只需对一张集合图片命名就行，不需要对每个图片进行命名
1.在宽屏，高分辨率下的自适应页面，如果图片不够宽，会出现断裂的情况
2.维护麻烦，如果效果有改动，一般要改整张图；如果宽高发生改变，对应的x，y坐标也要改