Generate a PNG Sprite Sheet
Drop a stack of PNG files and pack them into a single sprite-sheet PNG. Each cell is sized to the largest input dimensions; smaller images are centred inside. Drag rows to reorder before exporting. Output is PNG with transparent padding (unless you set a background colour).
Drop image files here
Drag-to-reorder · all PNG / JPG / WebP welcome
Common uses
- CSS sprite for a website. 16–32 small UI icons in one sheet — one HTTP request, position via
background-position. (Less important since HTTP/2, but still saves connection overhead.) - Game animation frames. Walking-cycle frames in one sheet — engine seeks frames by row/column.
- Contact sheet. Visual index of a folder of photos for review.
- Mock-up comparison grid. Multiple design variants side by side for review.
Picking columns & padding
- Square-ish sheet: columns = √(number of files), rounded up.
- Wide sheet (filmstrip): columns = number of files, 1 row.
- Padding 0 — for tight packing (game engines that index by exact cell size).
- Padding 2–4 — for CSS sprites with anti-aliased icons (avoids edge bleed).
- Padding 16+ — for contact sheets / mock-up grids (visual breathing room).
Workflow tips
- Pre-trim transparent edges with Auto-trim so cell sizes are tight.
- Pre-resize with Resize so all inputs are the same size — otherwise smaller inputs are letterboxed in larger cells.
- Drag-to-reorder in the file list before clicking Build sprite — the grid fills row-by-row in list order.
- For SVG icon sets, rasterise first via SVG → PNG at your target size.
FAQ
Different-sized inputs?
Every cell uses the largest width and largest height across all inputs. Smaller images are centred with transparent padding inside their cell.
Output transparency?
Yes — the sprite is PNG with alpha; padding stays transparent unless you set a solid background colour.
How do I extract a single sprite cell later?
Use Split tiles with the same rows × cols.
Will it generate a CSS map / coordinate file?
Yes — leave "Also export a CSS + JSON coordinate map" ticked and you'll get sprite.css (a .sprite--name class per cell with the right background-position and size) and sprite.json (a frames array of {name, x, y, w, h}) alongside the PNG. Drop the JSON straight into Phaser/Pixi or wire the CSS classes into your markup.