Sprite Slicer

Turn a sprite sheet into game-ready frames

A sprite sheet is convenient to ship, but most of the time you need the frames as clean, individually sized, consistently aligned images before an engine will treat them as a proper animation. Sprite Slicer does that in three passes: it cuts the sheet on a grid, trims the dead transparent space around each frame, and then normalizes every frame onto a fixed canvas so the character sits in the same place from frame to frame. It all runs locally in your browser, so your art is never uploaded.

How to use it

1. Load a sprite sheet. Pick a PNG, WebP, or JPEG. A transparent PNG works best, since the trimming and alignment steps key off the alpha channel.
2. (Optional) Remove the background. If the art sits on a solid green, magenta, or other flat backdrop — common with AI-generated sprites and green-screen video frames — open Background removal, hit Auto-detect (or pick the color straight from the image), and the backdrop turns transparent so trimming and alignment have a clean alpha to work with.
3. Set the grid. Enter your columns, rows, and frame size, or hit Auto-fit to estimate them from the image. The blue overlay shows exactly where the cuts land.
4. Normalize. Pick an output size (128 is a common sprite size), turn on transparent trimming, and choose bottom-fixed alignment so the character's feet stay planted across the whole cycle.
5. Export. Save all frames to a folder in Chrome or Edge, or let other browsers download them one by one, named with your prefix and numbering.

Why alignment matters

The single most common reason a sprite animation looks wrong is inconsistent alignment. If each frame is trimmed tight and then centered, the character appears to bob and slide as the silhouette changes size frame to frame — the dreaded foot-slide. Bottom-fixed alignment pins every frame to a shared baseline, so a run cycle reads as a character running in place rather than hovering. Keep the uniform sequence size option on and every exported frame shares one canvas, which is exactly what an engine's animation importer expects.

Remove a solid background, or export one whole image

The slicer does two things beyond cutting a grid. First, background removal: art generated by an AI model or filmed against a green screen usually arrives on a flat color instead of real transparency. Turn on Background removal, let Auto-detect sample the corners (or click the color directly in the preview), and the tool keys that color out to transparency — raise Tolerance if any backdrop survives, lower it if the sprite gets eaten, and set Edge feather to 0 for crisp pixel-art edges.

Second, whole-image export: if you just want a single image with its background removed — not a grid of frames — set Columns and Rows to 0. The slicer skips the grid, trimming, and normalizing, treats the entire picture as one frame, and saves it as a single background-removed PNG named with a _full suffix. It's the quickest way to knock the backdrop off one character sprite or a piece of UI art.

Frequently asked questions