本文目录
什么是 CSS 精灵图
精灵图（sprite sheet）会将多张小图合并为一个较大的图像文件。每张单独的图像在图集中占据一块划定的区域。在网页开发中，可以使用 CSS 的 background-position 只显示每个元素所需的那部分精灵图，从而减少 HTTP 请求，提升页面加载性能。
在早期的网页性能优化中，精灵图至关重要，因为当时每张图像都需要单独的 HTTP 请求。即便有了现代的 HTTP/2 多路复用，精灵图对图标集、UI 元素和游戏动画依然很有价值——这些场景会同时用到数十张小图，将它们作为单个缓存文件加载能带来收益。
精灵图工具的工作原理
上传多张图像，选择一种排列方向，即可同时获得精灵图图像和可直接使用的 CSS 代码。
- 上传图像——选择图标、按钮或动画帧等多张小图
- 选择布局——选择横向条带、纵向条带或网格排列，并配置精灵之间的间距
- 下载精灵图和 CSS——导出合并后的图像，并复制自动生成的 CSS 代码，其中包含每个精灵精确的 background-position 值
免费试用 —— 无需注册
打开精灵图工具 →何时使用精灵图
精灵图能优化资源分发并简化动画工作流程。
- 网页性能——将图标集和 UI 元素合并到单张精灵图中，以减少图像请求的数量，这对拥有大量小图标的网站尤为有益
- 游戏开发——将动画帧打包进精灵图，在基于 canvas 或 CSS 动画的游戏中实现高效渲染，通过偏移背景位置来逐帧访问连续的画面
- 邮件与旧版兼容——为 HTML 邮件和无法使用现代图像加载技术的旧版环境制作精灵图
常见问题
我应该选择哪种布局？
横向条带非常适合按顺序播放的动画帧。纵向条带适合菜单和导航图标。网格布局对大型图标集最节省空间。无论你选择哪种布局，本工具都会生成正确的 CSS background-position 值。
本工具会生成 CSS 代码吗？
会。本工具会自动生成 CSS 代码，为图集中的每个精灵提供精确的 background-position 偏移。你可以将这些 CSS 直接复制到样式表中，并使用提供的类名来显示各个精灵。
哪种图像格式最适合做精灵？
PNG 是理想之选，因为它支持透明，这对具有非矩形形状的图标和 UI 元素至关重要。精灵图会导出为 PNG，以保留源图像中的任何透明区域。