Sprite Sheet Studio
Pack frames into a sprite sheet with CSS and JSON coordinates, split a sheet back into frames as a ZIP, or play it and save a real animated GIF, WebP or APNG. One sheet, three modes.
How to Use
- Pick a mode: Make sheet packs separate images into one sheet, Split sheet cuts a sheet into frames, Animate plays a sheet. A 16-frame sample is loaded so every mode shows a result straight away.
- In Make mode, drop your frames (they are sorted by file name), then set the columns, the padding between cells and how smaller frames sit in their cell. Copy the CSS or the JSON atlas and save the sheet in any format.
- In Split or Animate mode, drop a sheet and describe its grid: rows × columns, or the cell size in pixels, plus any margin around the edge and spacing between cells. The overlay shows every cut before you commit.
- Split mode downloads every frame in a ZIP (PNG, WebP, GIF, BMP, TGA or JPG) with a frames.json of their positions; tick Skip empty frames to leave out blank cells.
- Animate mode plays the frames at the frame rate you choose, looping or ping-pong, over any range. Press Make animated file for a real GIF, animated WebP or APNG, scaled up without blurring.
Worked Example
Making a sheet. 16 frames of 64 × 64 px with automatic columns: ⌈√16⌉ = 4 columns and ⌈16 ÷ 4⌉ = 4 rows. With 2 px padding around and between cells, the width is 4 × 64 + 5 × 2 = 266 px, and the height is the same. Frame 6 is index 5: column 5 mod 4 = 1, row ⌊5 ÷ 4⌋ = 1, so it starts at x = 2 + 1 × (64 + 2) = 68 and y = 68, and its CSS is background-position: -68px -68px. The frames cover 16 × 4,096 = 65,536 of the sheet’s 70,756 pixels: 92.6%.
Splitting it again. That 266 × 266 sheet has a 2 px margin and 2 px spacing. By cell size: columns = ⌊(266 − 2 × 2 + 2) ÷ (64 + 2)⌋ = ⌊264 ÷ 66⌋ = 4, and the same for rows, giving 16 frames of exactly 64 × 64 with 0 px left over.
The common mistake: splitting the padded sheet as a plain 4 × 4 grid with no margin or spacing. Then each frame is ⌊266 ÷ 4⌋ = 66 px wide and starts at 0, 66, 132 and 198 instead of 2, 68, 134 and 200, so every frame comes out 66 × 66 with a 2 px strip of padding on its left and top, and the sprite sits 2 px off-centre in the game. Enter the margin and spacing (or use the cell size) and the cuts land on the frames.
Animating. At 12 fps each frame lasts 1000 ÷ 12 = 83.3 ms, and the 16-frame loop takes 16 ÷ 12 = 1.33 s. WebP and APNG store 83 ms; GIF stores hundredths, so it saves 8 (80 ms) and plays at 12.5 fps. Ping-pong over 16 frames plays 16 + 14 = 30 frames, because the first and last frames are not repeated.
Show Work
Formulas
Where Sprite Sheets Came From
“Sprites” began as hardware: small images the video chip drew over the background without touching the frame buffer. The Commodore 64’s VIC-II chip, for example, could show eight 24 × 21 pixel sprites at once. Animating one meant swapping which block of memory it pointed at, frame by frame — the same idea as a sheet of frames today.
On the web, the technique was popularised by Dave Shea’s 2004 A List Apart article “CSS Sprites: Image Slicing’s Kiss of Death”: put many images in one file and show each with a negative background-position, so a page makes one request instead of dozens. Game frameworks use the same packing as a texture atlas, so the GPU switches textures less often.
The animated formats this tool writes have their own history. GIF89a (1989) added a per-frame delay in hundredths of a second, and Netscape Navigator 2.0 (1995) added the looping extension that made animated GIFs common. APNG was proposed by Mozilla developers in 2004 and shipped in Firefox 3 in 2008; Google’s WebP gained animation later, with full alpha and millisecond timing.
About This Tool
This tool replaces three separate pages: the sprite sheet maker, the sprite splitter and the sprite animator. They work on the same grid, so here they share it: a sheet you build in Make mode can be split or played straight away, and the margin and spacing you set for splitting also drive the animation.
Frames and sheets load through the site’s image engine, so they can be any of 205 formats, including PSD, TIFF and WebP. The animation is a real file made by the same encoder as the Animated GIF Maker, read back by your browser to check its frame count. Everything runs on your device; nothing is uploaded.
It is made for game developers, pixel artists and web developers who need a sheet, its coordinates or its frames without opening a game engine.
Related tools: Animated GIF Maker, Pixel Art Editor, and GIF from Video.
Frequently Asked Questions
Which game engines can read the JSON?
It is the TexturePacker “JSON (Hash)” layout: a frames object keyed by file name, each with frame {x, y, w, h}, sourceSize and spriteSourceSize, and a meta block with the image name and size. PixiJS and Phaser load this layout as a texture atlas. The frames are not trimmed or rotated, so each entry is just a rectangle on the sheet.
How do I use the CSS sprite classes?
Give an element both classes: <span class="sprite sprite-ball-06">. The base class sets the sheet as a non-repeating background and the size; each frame class shifts it with a negative background-position. In the sample, frame 6 sits at x 68, y 68, so its class is background-position: -68px -68px.
Why add padding between frames?
When a game scales or rotates a sprite, the GPU samples pixels just outside the frame. With no gap, a sliver of the neighbouring frame bleeds in as a flickering line. 1–2 px of transparent padding stops it. Padding also costs space: 16 frames of 64 × 64 with 2 px padding make a 266 × 266 sheet instead of 256 × 256.
Why does my GIF play at 12.5 fps when I chose 12?
GIF stores each frame’s delay in hundredths of a second. 12 fps is 83.3 ms per frame, which GIF can only store as 8 hundredths (80 ms), so it plays at 12.5 fps. Animated WebP and APNG store milliseconds, so they keep 83 ms. Browsers also slow GIF delays under 20 ms down to about 100 ms, which is why the frame rate stops at 60 fps.
Do transparency and size limits apply?
Animated WebP and APNG keep full alpha transparency. GIF has only on/off transparency, so its frames are flattened onto the GIF background colour you choose. An animation can have up to 500 frames, 2,048 px a side and 36 megapixels in total; a sheet can hold 1,024 frames in Make mode and be cut into 4,096 cells. Nothing is uploaded: everything runs in your browser.
How do I use the Sprite Sheet Studio?
Simply type your numbers and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Game characters
Pack 8 walk-cycle frames of 32 × 48 px into one 8 × 1 strip (256 × 48 px) and load the JSON atlas in Phaser or PixiJS.
Icon sprites for a website
Combine 24 small icons into one 6-column sheet so the page makes 1 image request instead of 24, then copy the CSS classes.
Extracting frames
Cut a downloaded 512 × 512 sheet of 64 px tiles into 64 separate PNG files in a ZIP, with empty cells skipped.
Checking an animation
Play a 4 × 4 sheet at 12 fps to see a 1.33 s loop, and spot a missing or out-of-order frame before it reaches the engine.
Sharing pixel art
Export a 16-frame, 64 × 64 sprite at 3× as a 192 × 192 GIF with sharp pixels for a forum post or a portfolio.
Last updated: