Stayput

↑↓ to move, Enter to open, Esc to close. Search runs on this page. Nothing you type is sent.

Make a sprite sheet

A GIF or a set of pictures laid out as one PNG grid, with a JSON of every frame’s position and delay, or a sheet cut back into a GIF. It stays on this device.

Lays out a GIF or a set of images as one sprite sheet PNG with a JSON of each frame’s position and delay, or cuts a sprite sheet back into an animated GIF. It is free, needs no account and adds no watermark, and your files are not uploaded: everything runs in your browser on your device. A sheet is capped at 8,192 px a side and about 33 million pixels (half that on phones); give the page a short while after one visit to save itself for offline use, and then it works offline.

Drop a GIF or the frames for your sheetor click to choose files. Batches welcome.
    Working…

    Done

    Free, no ads. Support StayPut

    Your files are processed on this device and never sent to a server. Reload the page to clear everything from memory.

    How it works

    1. Choose Make a sprite sheet, then drop a GIF or several images (they are used in the order listed).
    2. Set the columns, the padding between frames, the background and the frame step, and tick the JSON box if you want the frame positions.
    3. Press Make sprite sheet and save the PNG and JSON. To go the other way, choose Sprite sheet to GIF, drop the sheet, enter its columns and rows and check the preview before you save the GIF.

    In your browser, not on a server

    Your browser decodes the GIF one frame at a time, drawing each frame as it plays (earlier frames and disposal rules applied) onto one canvas, or decodes each picture you dropped. The cell size is the first frame’s, the grid is worked out and checked against the size limits before anything is drawn, and the canvas is saved as a PNG; the JSON lists where each frame went. To go back, the sheet is decoded, cut into cells by columns and rows or by cell size, and each cell is written as a GIF frame by gifenc (MIT), which keeps a frame’s own colours when it has 256 or fewer.

    Compared with upload-based tools: Online sprite sheet tools upload your frames, and many cap the free size or add a watermark. Here the art stays on your device, there is no watermark, and the page tells you before it draws if a sheet would be too large.

    Verify it yourself. Give the page a short while after one visit to save itself for offline use, then turn off Wi-Fi or switch to airplane mode and run the tool again. Or open your browser's developer tools (F12, or Cmd-Option-I on a Mac), pick the Network tab, and watch it while you convert. The panel above does the same count for you.

    Questions

    Is transparency kept?

    In the PNG sheet, yes: the background is transparent unless you pick white or black, and every frame keeps its own transparent pixels. A GIF can only be transparent or not, with nothing in between, so a sheet cut back into a GIF turns soft edges into hard ones.

    How many frames fit on a sheet?

    Frame count times frame size must fit within 8,192 px a side and about 33 million pixels in all (half that on a phone). A 64 px sprite takes 1,000 frames; at 512 px you get about 120. Past 256 frames, frames bigger than 256 px make a sheet over 4,096 px, which some game engines and older phones cannot load as one texture. When a sheet would go over, the page tells you before drawing and suggests a smaller frame size or a bigger frame step.

    What is in the JSON?

    The sheet’s width and height, then a list with one entry per frame: x, y, w, h (in pixels from the top left) and delay in milliseconds. It is a plain list, not the format of any one game engine, so you read it with a few lines of your own code.

    Are my files uploaded, and does the order leave the page?

    No. The frames are decoded and drawn by code running in this tab, and no server is involved. File names and the order of your frames are never sent anywhere.

    What if I only have the frames, or want them back apart?

    Drop the pictures here to make a sheet. To save a GIF’s frames as separate PNGs use the GIF frame splitter or Split GIF, and to build an animated GIF from pictures use the GIF maker.

    More image tools

    Image to Base64

    Get the data URI, the raw Base64 and ready-made HTML and CSS for any image, with the size it adds. Your image never leaves this tab.

    RAW preview extractor

    Extract the JPEG preview from a RAW file: the picture your camera already saved inside it, copied out unchanged. This is not a RAW develop, and the file never leaves this tab.

    Favicon generator

    Drop in your logo and get every icon a website needs, plus the HTML to paste. Unreleased logos stay on this device.

    Remove background

    Cut out people, pets and products at full resolution. The photo never leaves this device.

    Popular conversions