GIF to Sprite Sheet

Convert your animated GIF into a sprite sheet for game development and CSS animations. Choose horizontal, vertical, or grid layouts - then export with JSON metadata or ready-to-use CSS. Pair with the GIF Frame Extractor to pick individual frames first, or resize your GIF before generating the sheet.

Drop your GIF here

or click to browse files

GIF Animated
Max 10 MB per file
Related tools:
Frame Extractor GIF Resizer Compress GIF GIF Enhancer PNG to ICO

How to Create a Sprite Sheet

  1. Upload your animated GIF using drag and drop or the file browser - up to 10 MB. Use the GIF Resizer first if you need to adjust dimensions.
  2. Pick a layout: Horizontal (single row), Vertical (single column), Grid (custom columns/rows), or Auto (nearest-square arrangement).
  3. Set frame spacing and sheet padding in pixels. Adjust the scale slider to resize each frame up or down.
  4. Select which frames to include using the frame grid - deselect duplicates or unnecessary frames to keep the sheet compact.
  5. Choose PNG (recommended for transparency), WebP, or JPG output. Enable JSON metadata for game engines or CSS for web animations.
  6. Click Generate Sprite Sheet and download. Compress your original GIF beforehand to reduce input size.

Layout Options Explained

Horizontal

All frames in a single row from left to right. Best for CSS animations and game engines that expect horizontal strips.

Vertical

All frames stacked in a single column. Useful for vertical scrolling animations or when output width needs to stay narrow.

Grid

Frames in a customizable grid - specify exact columns and rows. Best for Phaser, Unity, and PixiJS which expect fixed grid sheets.

Auto

Calculates the most square-like arrangement automatically. Great for quick exports without manual configuration.

Use Cases

Game Development

Export JSON metadata compatible with Phaser, PixiJS, and Unity. Enable JSON output for instant engine import.

CSS Animations

Generate the CSS file option for a ready-to-use keyframe animation. Drop it straight into your stylesheet.

Performance

One image request instead of many. Sprite sheets reduce HTTP overhead significantly compared to individual extracted frames.

UI Sprites

Combine icon animations into a single sheet. Enhance quality first, then pack into a compact sprite sheet.

Frequently Asked Questions

A sprite sheet is a single image containing multiple animation frames arranged in a grid or strip. Game developers and web designers use them to reduce HTTP requests and speed up animations. Instead of loading 20 separate images, the browser loads one and moves a "window" across it to show each frame.

PNG is recommended for most sprite work because it supports full transparency and lossless quality. WebP gives smaller files with good quality and also supports transparency - great for modern web projects. JPG is only useful when there is no transparency and you need the smallest possible file size.

The JSON file describes each frame: its x/y position on the sheet, width, height, and original frame delay in milliseconds. This format is compatible with Phaser 3, PixiJS, and Unity's sprite sheet importer. Use the Frame Extractor to inspect individual frames before generating the sheet.

Enable "Generate CSS file" before clicking Generate. The output includes a class for each frame's background-position and a keyframe animation that steps through all frames at the original speed. Link the CSS file and apply the animation class to any div with the sprite sheet as a background image.

The GIF is processed entirely in your browser using JavaScript - no upload required. Generated sprite sheets are created locally on your device and never sent to our servers. Your files remain completely private.