Sprite Sheet Slicer & Packer

How to use the Sprite Sheet Slicer & Packer

1. To slice: drop a sprite sheet and set the columns and rows, or the frame size.
2. Check the red grid lines line up with the frames, adjusting margins and gaps if needed.
3. To pack: switch modes and drop your frame images; choose an even grid or tight packing.
4. Download the frames as a ZIP, or the sheet with its JSON atlas and CSS.

About this tool

Games and animations often store many frames in a single image called a sprite sheet. Sometimes you need the opposite of what you have: separate frames to edit or import into a tool that wants single images, or a single sheet built from a folder of frames. This tool does both, entirely in your browser, with pixel-exact results.

Slicing works with a number of columns and rows, or with a fixed frame size, and handles sheets that have a margin around the edge or gaps between frames. A red grid over the preview shows exactly where the cuts will be, and frames that are completely transparent can be skipped, which tidies up sheets with empty slots at the end.

Packing places your frames on one sheet, either in an even grid that keeps animation frames aligned or in a tight arrangement that saves space when sizes vary. Alongside the PNG you get a JSON atlas in the common hash format that many game frameworks read, and a CSS file with a class per frame for web sprites.