精灵图
CSS 图像合并（Image sprites）技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。
备注
当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。
认识精灵图 CSS Sprite
什么是 CSS Sprite
是一种 CSS 图像合成技术，将各种小图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分
有人翻译为：CSS 雪碧、CSS 精灵
使用 CSS Sprite 的好处
- 减少网页的 HTTP 请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite 图片制作（雪碧图、精灵图）
- 方法 1：Photoshop, 设计人员提供
- 方法 2：CSS Sprites Generator Tool | Toptal®
精灵图的使用
精灵图如何使用呢？
- 精灵图的原理是通过只显示图片的很小一部分来展示的;
- 通常使用背景：
- 设置对应元素的宽度和高度
- 设置精灵图作为背景图片
- 调整背景图片的位置来展示
如何获取精灵图的位置 Sprite Cow - Generate CSS for sprite sheets
.sprite {
background: url("imgs/jd-sprite.png") no-repeat 0 -192px;
width: 36px;
height: 42px;
}