Sprite Sheet Studio
Sprite sheet → GIF / APNG with auto grid detection and crisp pixel scaling, or animation → sprite sheet with JSON metadata and a CSS steps() snippet — all on your device.
Click a cell to skip it.
The animation or sprite sheet appears here
How to Use Sprite Sheet Studio in 3 Steps
Drop a sheet or an animation
A static PNG / JPG / WebP is treated as a sprite sheet; an animated GIF, APNG or WebP is split into frames. For a sheet, press Auto to detect the grid from the gutters, or type columns × rows — the overlay shows exactly which cells will be used. Click a cell to skip it.
Tune the animation or layout
Sheet → animation: set the speed, frame order, loop, ping-pong and scale (nearest-neighbour keeps pixel art crisp) and watch the live preview. Animation → sheet: choose a near-square grid, a fixed column count or a single strip, padding, spacing and background.
Build and export
Press Build. Animations download as GIF, APNG (lossless with alpha) or a ZIP of PNG frames. Sheets download as PNG, with one-click metadata.json (frame rectangles and delays for Phaser, Godot, Unity, PixiJS) and sprite.css (a steps() keyframe animation).
Sprite Sheet Studio — Frequently Asked Questions
How does Auto grid detection work?
It looks for fully transparent (or solid background-coloured) columns and rows that separate the sprites and counts the content runs between them. Uniform sheets with gutters are detected exactly; tightly packed sheets fall back to a square-cell guess, which you can correct by typing columns × rows. Irregular texture atlases with mixed sizes are not supported — use their JSON instead.
GIF or APNG?
GIF is universal but limited to 256 colours and 1-bit transparency, so soft edges get jagged. APNG keeps full 24-bit colour and 8-bit alpha, loses nothing, and plays in every modern browser, Discord, Slack and iMessage — the better choice for pixel art and UI stickers. Choose GIF only where APNG is not accepted (some chat apps, older email clients).
Why do my pixels look blurry / crisp?
Scaling uses nearest-neighbour sampling, so 2× / 3× / 4× keeps pixel art razor sharp. ½× halves the size and will soften detail — it is meant for photo-style frames, not pixel art.
What is in metadata.json and sprite.css?
The JSON lists the sheet size, frame size, columns, rows, padding and every frame’s x, y, width, height and delay in milliseconds — enough to import into Phaser, PixiJS, Godot or Unity, or to write your own loader. The CSS animates a div with background-position in steps(), with keyframe percentages that follow the original per-frame delays.
Is there a size limit?
Files up to 50 MB. Sheets wider or taller than 8,192 px are flagged — many GPUs and engines refuse textures above that; switch to more rows, a smaller scale or “keep every 2nd frame”.
Is anything uploaded?
No. Decoding, slicing, scaling and encoding all run in your browser; the ZIP library and GIF encoder are static scripts. Your sprites never leave your device.