图片精灵表 将多张图片合并成一个单独的精灵表，支持配置列数和间距。
🖼️
图片精灵表
将多张图片合并成一个单独的精灵表，支持配置列数和间距。
1
上传图片
拖放或选择多张图片（图标、边框）用于精灵表。
2
配置布局
设置列数和精灵之间的填充距离。
3
生成并下载
生成精灵表图片并复制CSS坐标。
Loading tool...
What Is 图片精灵表?
一个将多个图像合成为单个网格排列的复合图像的精灵表生成器，附带每个精灵的CSS背景位置坐标。对于Web性能优化、游戏精灵动画和图标集来说是必不可少的。上传您的单独图像，设置列数和填充，然后工具将同时生成复合PNG和CSS代码片段。
Why Use 图片精灵表?
-
生成精灵表图片 + CSS 坐标
-
可配置列数和填充距离
-
减少HTTP请求以提高网页性能
-
非常适合图标集和游戏精灵
Common Use Cases
Technical Guide
图像被加载并以可配置的列形式排列在网格中。行数计算为ceil（imageCount/columns）。画布尺寸根据每列最大宽度和总行高加上填充计算得出。每个图像都绘制在其计算出的网格位置。CSS坐标作为每个精灵的负背景位置值生成。
Tips & Best Practices
-
1使用一致的图片大小以保持干净的网格
-
2将填充距离保持在1-2px以最小化浪费空间
-
3为文件命名描述性名称以获得更好的CSS类名
-
4对于游戏引擎兼容性，请使用2的幂
Related Tools
Frequently Asked Questions
About This Tool
图片精灵表 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.