关于此工具
CSS 精灵图（sprite sheet）把一整套小图片——图标、界面符号、表情符号——打包进一张更大的图片文件，然后用 CSS 的 background-position 为每个元素显示其中正确的一小块。在 HTTP/2 的多路复用出现之前，这是一个有意义的性能技巧：浏览器为十几个独立的小图标文件打开十几个连接，比为一张合并后的图片打开一个连接要慢，而这种差距在 HTTP/1.1 连接、CDN 严格的请求数限制，或是在慢速网络上尽量减少阻塞渲染的资源请求时，仍然是有意义的。
这个工具完全在你的浏览器中为你完成这两部分工作：拖入你的图标文件，选择它们排成一行还是一列，以及它们之间需要多少透明间距，然后工具会把它们绘制到一张画布上，编码为 PNG（以保留透明度），并为每一张图片生成精确的 background-position CSS 规则——直接复制到你的样式表即可。不过，精灵图是一种较旧的技术：对于大多数新项目而言，内联 SVG 或 SVG 图标字体通常更容易维护，并且在任何尺寸下都能更干净地缩放，所以请把它当作工具箱里的又一个选项，而不是唯一正确的答案——当你已经有一套位图图标（PNG，而非矢量图）并想减少请求数量时，再使用它。
常见问题
CSS 精灵图仍然有用吗，还是我应该改用 SVG 图标？
对于大多数新项目，内联 SVG 或 SVG 图标字体/精灵图通常是更现代的选择（在任何缩放级别下都清晰锐利，可以用 CSS 轻松重新着色，没有固定像素网格对齐问题）。对于无法表示为矢量形状的照片/位图图标集、已经围绕该技术构建的遗留代码库，或者只是想以最少的 HTTP 请求快速、无依赖地打包一小组图标，CSS 精灵图仍然真正有用。选择适合你实际情况的方式——此工具是为了在位图精灵图适合当前工作时使用，而非声称它永远是最佳选择。
为什么最后一张图片之后不添加尾随间距？
这样可以确保精灵图的总尺寸尽可能小——间距设置的存在是为了防止当精灵图被缩放/放大时相邻图标之间的纹理渗色，而这只在两个图标共享的边缘处才需要考虑；精灵图自身的外边缘另一侧没有相邻图标，因此在那里添加额外空间无法起到该作用，反而会浪费文件大小，并导致每个图标距离精灵图绝对边缘的距离因其位置而不一致。