Pixel cat walk
A GIF to sprite sheet in one row of six frames, the layout most engines read as a strip.
GIF to Sprite Sheet Converter
Drop an animated GIF and get every frame on one sprite sheet PNG, with a JSON atlas and a CSS animation. This free GIF to sprite sheet tool also takes animated WebP and PNG and short video clips, all in your browser.
GIF to sprite sheetFree · runs in your browser
Drop a GIF here
Animated GIF, WebP or PNG, or a short MP4 or WebM clip. Everything stays in your browser.
- Free, runs in your browser
- GIF, WebP, PNG and video
- Rows, columns and padding
- PNG, JSON atlas and CSS
GIF to Sprite Sheet Examples
Eight animations made for these examples, each turned into a sheet by this page's own converter. Open one to try every setting.
Bluebird flapping
Four frames on a power-of-two sheet, 1024 × 1024, for engines that ask for it.
Flickering torch
Six frames at half size, a small sheet for a tile-based game.
Loading spinner
Eight frames on a square sheet, ready for a CSS loading animation.
Floating ghost
Four frames in one column, for engines that play sheets top to bottom.
Beating heart icon
Four frames with 4 px of padding, so edges never bleed into the next frame.
Robot waving
Four frames in a row with 4 px of spacing between them.
Rocket exhaust
Four frames of a flickering flame on a near-square sheet.
How to Make a Sprite Sheet from a GIF
Three steps, and nothing is uploaded.
Drop, paste or choose an animated GIF, WebP or PNG, or a short MP4 or WebM clip. Every frame is read on your device.
Keep every frame or a range, take every nth frame, leave out repeats, then set the columns, padding, spacing and frame size.
Save the sprite sheet PNG, the JSON atlas with every frame's time, a CSS animation, or the frames as PNGs in a ZIP.
What This Converter Does Best
Six things it does well, from a pixel walk cycle to a web loading animation.
- Animation
GIF, WebP, PNG and short clips
Open an animated GIF, an animated WebP or PNG, or a short MP4 or WebM clip. Frames are read as a viewer shows them, so overlapping GIF frames come out whole.
Only the frames you need
Keep a range, take every second or third frame, and leave out repeated frames. A skipped frame's time goes to the frame before, so the animation keeps its speed.
A layout for every engine
A near-square sheet, one row, one column or your own number of columns, with padding, spacing and power-of-two sizes, so every GIF to sprite sheet fits your engine.
JSON atlas and CSS animation
The JSON atlas lists every frame's place and time in the format Phaser and PixiJS read; the CSS file plays the sheet on any web page.
Frame size and pixel art
Shrink frames to a quarter or half for smaller sheets, or enlarge pixel art 2× or 4× with crisp pixels. The sheet's size is shown before you download.
Free and private
It runs entirely in your browser: no upload, no account, no watermark, and it keeps working offline once the page has loaded.
Guide: Clean Sprite Sheets from Any Animation
Five short tips for a clean sheet from any animation.
Pick the layout your engine reads
One row suits most animation tools and CSS; a near-square sheet keeps big animations under texture limits; one column suits engines that read sheets top to bottom.
Trim the frames
Set From frame and To frame to keep one loop, and Every nth to halve a long animation. Leave out repeated frames to drop the pauses some GIFs hold as copies.
Padding and spacing
Add 1 to 4 px of padding when frames are scaled in a game, so neighbouring frames never show at the edges. Spacing adds room between cells for editing.
Keep an eye on the sheet size
The size shows under the sheet. For phones, a smaller frame size or more columns keeps each side within 4,096 px; turn on power-of-two sizes for engines that ask for them.
Use the atlas or the CSS
Load the PNG with the JSON atlas in your engine to get every frame by name and time. For a website, link the CSS file and give an element its class.
Who Turns Animations into Sprite Sheets
Common reasons to turn an animation into a sprite sheet.
Game developers
Bring animated GIFs and clips into a game engine as one texture with named frames.
Web designers
Replace a heavy GIF with one PNG and a short CSS animation.
UI and app makers
Turn loading spinners and icon animations into sheets for apps and interfaces.
Animators and modders
Collect every frame of an animation on one sheet to edit, share or mod.
GIF to Sprite Sheet FAQ
Answers about converting animations to sprite sheets, files and privacy.
Open the GIF, choose the frames and the columns, then download the sprite sheet PNG, and the JSON atlas or CSS if you need them.
Yes. It runs entirely in your browser, needs no account and adds no watermark.
No. Your animation is read and turned into a sheet on your device; nothing is sent to a server.
Yes. Animated WebP and PNG open in Chrome, Edge and Safari, and short MP4 or WebM clips are read at 12 frames a second.
Every frame's time is kept in the JSON atlas and the CSS. When you skip frames, their time goes to the frame before, so the loop lasts as long as the GIF.
One row is the most common for animations, a square sheet keeps long animations compact, and one column suits engines that read sheets downward.
The JSON hash format is read by Phaser, PixiJS and many other engines and tools; it lists each frame's name, place on the sheet and time.
Yes. Frames (ZIP) saves every kept frame as its own PNG, named and numbered in order.
Convert a GIF to a Sprite Sheet Now
Open an animation and download its sprite sheet in seconds, free and in your browser.
Open a GIF