Sprite Sheet Generator & Splitter
Combine images into a sprite sheet, or split a sheet into individual frames
Drop multiple frame imagesTap to choose multiple frame images
or click to browseor tap to choose
Upload frames in order — they'll be arranged left-to-right, top-to-bottom
Large files (over 50 MB) may take longer or run out of browser memory
About Sprite Sheet Generator & Splitter
Combines multiple individual images into a single sprite sheet grid, or splits an existing sprite sheet back into individual frame images — useful for game development and animation work.
In combine mode, upload your frames in order and set the grid columns; in split mode, upload a sprite sheet and specify its rows and columns. Download the result.
Keep all your source frames the same pixel dimensions before combining them into a sheet — mismatched frame sizes will throw off the grid alignment in the combined result.
Watch: Sprite Sheet Generator & Splitter in Action
- Do my source images need to be the same size before combining them?
- Yes — keep all your source frames the same pixel dimensions before combining them into a sheet. Mismatched frame sizes will throw off the grid alignment in the combined result.
- In what order are frames placed in the sheet?
- In the order the files were supplied by your selection, left to right and then top to bottom. Naming files with leading zeros, like run_01 and run_02, helps because many file pickers list names alphabetically.
- What if my frames are different sizes?
- Every cell takes the width of the widest frame and the height of the tallest. Smaller frames are centered in their cell at their original size, with no stretching, and smoothing is turned off so pixel art stays crisp.
- How are split frames named and saved?
- As PNG files called frame_01.png, frame_02.png and so on, numbered row by row from the top left, and delivered together in sprite-frames.zip. The preview thumbnails follow the same order.
- Can the tool work out my sheet's grid by itself?
- No. You type the number of Columns and Rows, and the sheet is divided into equal cells. If the tiles have spacing between them, type that gap in Padding (px) and the slices line up; outer margins are not handled, so crop them first.
- Can it write a JSON atlas, padding or extruded edges?
- Yes. Padding (px) leaves a gap between frames, Extrude (px) repeats each frame's edge pixels outwards so game engines do not bleed neighbours into a sprite, and the optional JSON atlas lists every frame's x, y, width and height in the TexturePacker JSON (Hash) layout. With both at 0 you get the plain grid. It does not trim or rotate frames.
- How do I save the combined sheet?
- Press Open / Save Sprite Sheet and the PNG opens in a new browser tab, from which you can use the browser's save option. The result is a transparent PNG with no extra metadata.
How to use Sprite Sheet Generator & Splitter
Two modes sit at the top. In Combine Frames, drop several images in the order you want them, set Columns (the default is 4), optionally Padding (px) and Extrude (px), tick the JSON atlas box if you want frame coordinates, and press Generate Sprite Sheet. Frames fill left to right, then top to bottom. Each cell is as large as your biggest frame, and smaller frames are centered in theirs without scaling. The finished PNG appears below; Open / Save Sprite Sheet opens it in a new tab where you can save it.
In Split Sheet mode, drop one sheet, enter its Columns and Rows (defaults 4 and 2) and, if the tiles have gaps, Padding, then press Split into Frames. The frame count (for example 8 frames) and thumbnails appear, and Download All as ZIP saves sprite-frames.zip containing frame_01.png onward, row by row.
When to use it
Use it when preparing assets for a 2D game engine, a CSS steps animation or a web canvas loop. Combine exported animation frames into one texture to cut down on requests, or split a purchased or downloaded sheet back into numbered files so you can edit, reorder or replace a single frame.
When not to use it
It lays frames out in a plain grid. For packed atlases of different sprites, rotation or trimming, a dedicated texture packer is the right choice. It also gives no animation playback, so use a sprite previewer to check timing. Nor can it trim empty pixels around frames.
Tips for best results
Name your files so they sort in play order before you drop them, such as walk_01 to walk_08, and make the Columns value divide the frame count evenly to avoid an empty cell at the end. Before splitting, verify that the sheet's pixel width divides exactly by the columns and its height by the rows, or slices will land on fractions of a pixel.
Limitations
Padding defaults to 0 and Extrude to 0, which gives the plain grid; the optional JSON atlas covers x, y, width and height only (no trim or rotation data). Output is a transparent PNG. If you enter more columns than frames, the sheet is still that many cells wide, leaving blank cells. Split needs the grid size typed in because it cannot detect it, and single frames cannot be downloaded alone, only as a ZIP.
Privacy
Frames are read as local files, drawn onto canvases and encoded to PNG in your browser, and the splitting ZIP is packed there too by a library that ships with the page. No frame or finished sheet is uploaded. The usage counter notes only the tool name and an anonymous browser id, and the default per-file size warning is 50 MB.
More from Animation & Avatars: