How to Extract Frames From a GIF (and Make a Sprite Sheet)

Sometimes you need the pictures inside a GIF rather than the animation: a still for a thumbnail, one frame for a bug report, or every frame to rebuild the animation somewhere else. Here's how to get them out cleanly, and how to turn them into a sprite sheet.

Why a plain screenshot isn't enough

Pausing a GIF and taking a screenshot works for one frame, but you lose the original resolution and any transparency, and you can't control which frame you get.

Opening the GIF in an image editor has a different problem. To save space, most GIFs store only the part of each frame that changed since the previous one. If a tool exports those raw frames, you get a stack of small rectangles and half-empty images instead of complete pictures.

Rebuild each frame to the full canvas

A proper frame extractor plays the GIF in memory: it draws frame one, then layers frame two on top using the GIF's disposal rules, and so on. Each exported image is exactly what a viewer would see at that moment.

The GIF to PNG tool does this in your browser:

1. Drop your GIF.
2. Every frame appears as a full-size PNG.
3. Click a frame to save it, or download them all as a ZIP.

PNG is lossless and keeps transparency, so the frames are an exact copy of the GIF's pixels.

Notes on frame timing

GIF frames don't all have to last the same amount of time. A GIF might hold the first frame for two seconds and then play the rest quickly. When you export frames, you keep the pictures but not the delays. If you plan to rebuild the animation, note the timing first, or check it in a GIF editor. The GIF speed tool is useful if you only want the same frames played faster or slower.

Making a sprite sheet

A sprite sheet puts all frames side by side in one image. Games and CSS animations use them because loading one image is faster than loading dozens.

Once you have the PNG frames, combine them with any sprite tool. With ImageMagick installed, one command makes a single row:

magick montage frames/*.png -tile x1 -geometry +0+0 -background none sheet.png

-tile x1 puts everything in one row, -geometry +0+0 removes spacing, and -background none keeps transparency. Make sure the files sort in frame order; zero-padded names like frame-001.png do.

Animating a sprite sheet with CSS

If each frame is 100×100 px and there are 12 frames, the sheet is 1200×100 px. The steps() timing function jumps from frame to frame instead of sliding:

.sprite {
  width: 100px;
  height: 100px;
  background: url("sheet.png") 0 0 no-repeat;
  animation: play 1s steps(12) infinite;
}

@keyframes play {
  to {
    background-position: -1200px 0;
  }
}

The duration sets the speed: 12 frames in 1 second is 12 fps. Sprite sheets assume every frame has the same duration, so a GIF with uneven delays may need some frames duplicated to keep its timing.

Other uses for extracted frames

• Thumbnails and previews. Pick the most representative frame rather than the first one.
• Email fallbacks. Classic Outlook for Windows shows only the first frame of a GIF. Exporting frame 1 shows you exactly what those readers will see.
• Editing one frame. Fix a typo or blur a detail in a single PNG, then rebuild the GIF with your editor of choice.

Frames are extracted on your device, so private screenshots and recordings never leave your computer.