libresprite.dev
v1.3

Free tool · Sprite Sheet Studio

Sprite sheet maker and cutter

Turn frames into a sprite sheet, or a sprite sheet back into frames and an animated GIF. Preview the animation at any speed. Everything happens in your browser: your images are never uploaded.

Checked with LibreSprite 1.3Updated 3 min read
On this page 4 sections
  1. How to use it
  2. Which layout?
  3. The same in LibreSprite
  4. FAQ

    Load a sheet to slice it.

    Preview

    —

    Milliseconds and FPS: 100 ms = 10 FPS, 83 ms ≈ 12 FPS.

    Short answer

    What is a sprite sheet?

    One image that holds every frame of an animation (or many sprites) side by side, usually with a JSON or XML file saying where each frame is. Games load one image instead of dozens, which is faster and simpler. LibreSprite makes them with File → Export Sprite Sheet (Ctrl+Alt+E); this tool is for when you have loose frames, a GIF, or a sheet from somewhere else.

    How to use it

    • GIF to sprite sheet: “Make a sheet”, drop the GIF. Chrome, Edge and Opera read every frame and its timing; other browsers only read the first frame, so use LibreSprite there (open the GIF, then Export Sprite Sheet).
    • PNG frames to sheet: drop all frames at once; they are sorted by name with numbers in order (walk2 before walk10).
    • Sprite sheet to GIF: “Cut a sheet”, drop the sheet, enter the frame size (or columns and rows), check the preview, Download GIF.
    • Split a sheet into frames: same, then “Download frames” for a ZIP of numbered PNGs.

    The JSON uses the same layout as LibreSprite’s json-hash and json-array output (frame rectangles, sizes, durations), which Phaser, PixiJS, Godot importers and many other tools read.

    Which layout?

    LayoutUse it when
    Horizontal stripOne animation; the simplest for engines (Godot hframes, CSS steps() animations).
    Vertical stripThe same, stacked; handy for very wide frames.
    GridMany frames; keeps the image closer to square, which some engines and GPUs prefer.

    Add 1–2 px padding if you see thin lines from neighbouring frames (“bleeding”) when the engine scales or filters the sheet.

    The same in LibreSprite

    If the art is in LibreSprite already, export from there: it also offers packed layouts, trimming, one row per layer, tags in the JSON and a command line for automation. See exporting sprite sheets and the CLI. Engine set-up: Godot, Unity.

    FAQ

    Is my image uploaded anywhere?

    No. The page reads files with your browser and builds the sheet, GIF and ZIP locally. You can disconnect from the internet after the page loads.

    My GIF only gives one frame.

    Your browser can’t decode animated GIF frames for web pages (Firefox and Safari at the time of writing). Use Chrome or Edge, or open the GIF in LibreSprite and use Export Sprite Sheet.

    Why are my frames cut wrong?

    Check the frame size and the spacing between frames; sheets with a border need the extra pixels removed first. The orange grid on the sheet shows exactly where the cuts are.

    Does the GIF keep transparency?

    Yes, as one fully transparent colour (pixels below 50 % opacity become transparent). GIFs hold up to 256 colours; artwork with more colours is reduced.

    Keep going

    Export & importPNG, GIF, sprite sheets with JSON, and importing images.Sprite sheets for GodotExport from LibreSprite and animate in Godot 4.Pixel art upscalerScale pixel art up without blur, and fix blurry sprites in engines.

    Found something wrong or out of date? Tell us: hello@libresprite.dev. We fix mistakes within a day.