将图像拖放到此处
或点击上传多个文件
生成器设置
Set to 0 for auto-calculating columns.
为什么使用此工具？
用于前端优化的高效实用程序
Reduce HTTP requests and speed up loading.
1
自动坐标生成
我们为您做数学题。立即为您合并后的精灵图中的每个单独图像获得精确的 X 和 Y 坐标。
2
智能网格打包算法
我们的引擎智能地将不同大小的图像排列成尽可能最有效的网格，最大限度地减少空白空间并减小最终文件大小。
3
即用型 CSS 类
生成一个干净、可复制粘贴的 CSS 块，其中包含每个资产的单独类，包括 background-position 和尺寸属性。
4
可自定义的布局模式
根据您特定项目架构的需求，在垂直条、水平条或最高效的“网格”模式之间进行选择。
5
填充和间距控制
在精灵之间添加自定义间距以防止“像素出血”——即相邻图标的部分意外显示在您的 UI 中。
6
本地内存处理保护
您的 UI 资产是您的财产。所有打包和代码生成都在您的浏览器中进行，确保没有任何数据离开您的设备。
高速资产指南：如何使用生成器
Create sprites in minimal steps.
1
收集您的小资产
收集您想要合并的所有小图标、按钮或动画帧。确保它们是高质量的格式，如 PNG。
2
批量上传到工具
一次选择所有文件并上传。该工具将立即创建一个它们如何打包在一起的视觉预览。
3
配置优化
如果您担心视网膜屏幕上出现边缘，请调整“填充”，或者如果您正在构建侧面菜单或幻灯片，请选择“垂直”布局。
4
审查精灵预览
检查生成的图表。确保每个项目都可见，并且网格紧凑且高效，没有浪费空间。
5
下载图集图像
点击“下载精灵图”按钮，将合并后的图像文件保存到您项目的资产文件夹中。
精灵图精通：游戏资产创建秘密
精灵图在 HTTP/2 下仍然相关吗？
是的！虽然 HTTP/2 更好地处理多个请求，但精灵图仍然更快，因为它们减少了元数据和压缩开销的总量。
如果我有不同大小的图像会发生什么？
我们的智能网格算法专为此设计！它会将您各种形状和大小的图像排列成尽可能最紧凑的矩形。
我不应该为我的精灵图使用 JPG 还是 PNG？
我们强烈建议使用 PNG。它更好地处理图标的“锋利边缘”并支持透明度，这对于大多数 Web UI 工作至关重要。
我可以包含多少张图像有限制吗？
技术上没有。但是，我们建议每张图表保持在 50-100 张图像左右，以防止文件尺寸变得过大。
什么是“像素出血”？
当亚像素渲染显示图表中下一个图像的一小部分时，就会发生这种情况。在我们的工具中添加 1-2 个像素的“填充”以防止这种情况。
此工具支持 SVG 吗？
此工具用于光栅精灵（PNG/JPG）。对于 SVG，您应该使用“SVG 精灵”方法，这在现代浏览器中的处理方式不同。
以后如何更新精灵图？
只需重新上传原始图标加上新图标即可。我们的工具将在几秒钟内为您提供新图表和新 CSS。
此工具对游戏开发人员免费吗？
是的！无论您是制作网站还是手机游戏，我们的生成器都是 100% 免费的，没有商业限制。
浏览器可以缓存精灵图吗？
可以！这是最大的好处之一。浏览器只需缓存一个文件即可为您网站的所有页面准备好每个图标。
我的专有图标数据安全吗？
绝对安全。因为您的文件在您的浏览器中本地处理，所以您的设计永远不会上传、存储或被我们的系统查看。