Creation
精灵图生成器
将多个图像合并为精灵图，并为开发者提供 CSS、JSON 和 SCSS 输出。
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the 精灵图生成器 to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="精灵图生成器 by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix 精灵图生成器</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About 精灵图生成器
Last updated: May 2026
OptiPix Sprite Sheet Generator 将多个图像合并到一个优化的雪碧图中，并提供即用型 CSS、JSON 坐标和 SCSS 变量。选择布局：水平条带、垂直条带、网格（自定义列数）或打包（通过装箱算法最小化浪费空间）。设置雪碧图之间的填充以防止边缘出血。输出是一个单独的 PNG 雪碧图，以及为每个雪碧图生成的 CSS（'.sprite-icon-home { background-position: -0px -0px; … }'）、JSON 坐标映射和 SCSS 变量。支持 Retina @1x 和 @2x 缩放。每个雪碧图都以其源文件名命名。所有操作都在本地进行 - 您的图像永远不会离开您的设备。专为游戏开发者、使用 CSS 雪碧图的 Web 开发者以及任何希望将小图标捆绑到单个网络请求中的用户而构建。
How It Works
每个输入图像都会加载到内存中；选择的布局算法（条带、网格或货架装箱）会计算每个雪碧图的（x, y, w, h）坐标；雪碧图会渲染到画布上；CSS / JSON / SCSS 会根据相同的坐标图生成。
Use Cases
- •将 UI 图标捆绑到单个 PNG + CSS 雪碧图中
- •为 Phaser 或 Pixi 中的 2D 游戏创建雪碧图集
- •将社交媒体图标合并到一个 CSS 雪碧图中以加快网站速度
- •将角色动画帧打包成水平条带
- •从源图像构建支持 Retina 的 @2x 雪碧图
You Might Also Like
If you find 精灵图生成器 useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools