How to Build a Sprite Sheet from Images
Combine multiple images into a single sprite sheet PNG with auto-generated CSS coordinates and JSON metadata. Free, private, runs entirely in your browser.
Try Sprite Sheet Builder free →
The problem
You have a set of images — animation frames, UI icons, game tiles, or pixel art sprites — and you need to combine them into a single sprite sheet. The usual options are Photoshop (manual positioning, tedious coordinate tracking), TexturePacker (paid, desktop app), or command-line tools like ImageMagick (requires scripting knowledge). For the common case of "arrange these images in a grid and give me the coordinates," you shouldn't need specialized software.
How it works
- Upload your images — drag multiple files at once, or click to browse. Supports PNG, JPG, and WebP.
- Arrange sprites — thumbnails appear in a strip. Drag to reorder, click X to remove. The order determines grid placement (left-to-right, top-to-bottom).
- Configure the grid — auto-arrange calculates a roughly square grid. Or switch to custom and set exact columns and rows.
- Set padding — 0px for pixel art, 1-2px for anti-aliased images that will be used with bilinear filtering in game engines.
- Choose background — transparent (default) or a solid color.
- Preview — see the assembled sheet with optional grid lines showing sprite boundaries.
- Export — download the PNG sprite sheet, copy CSS for web use, or copy JSON metadata for game engines.
All processing happens in your browser. Your images never leave your device.
CSS sprites for the web
CSS sprites reduce HTTP requests by combining multiple images into one file. Instead of loading 20 separate icon files, you load a single sprite sheet and use background-position to display individual icons.
The Sprite Sheet Builder generates ready-to-use CSS. Each sprite gets a class with the correct background-position, width, and height. The class names are derived from your original filenames, so icon-home.png becomes .sprite-icon-home.
Game development workflow
Game engines expect sprite sheets with coordinate metadata. The JSON output includes each sprite's name, x/y position, width, and height — the standard format for Phaser, Godot, Unity sprite importers, and similar tools.
For animation sprite sheets, arrange frames in order in the frame strip before building. The JSON preserves this order, so your game engine plays frames in the correct sequence.
Pixel art pipeline
- Draw frames in the Pixel Art Editor — export each as a 1x PNG
- Open the Sprite Sheet Builder and upload all frames
- Set padding to 0px (pixel art doesn't need anti-aliasing margins)
- Download the sprite sheet + copy JSON for your engine
The preview canvas uses image-rendering: pixelated, so pixel art stays crisp at any zoom level.
Uniform vs mixed-size images
If all your images are the same dimensions, the grid is a perfect fit — every cell matches every sprite exactly. If your images are different sizes, the tool uses the largest width and largest height as the cell size, centering smaller images within their cells. This produces a clean, aligned grid regardless of input dimensions.
Sizing guidelines
- Mobile games: keep sprite sheets under 2048x2048 for GPU compatibility
- Desktop games: 4096x4096 is safe for modern GPUs
- Web CSS sprites: no hard limit, but smaller sheets load faster
- Padding: 0px for pixel art, 1-2px for smooth images in game engines
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.