How to Split a Sprite Sheet into Individual Frames

A sprite sheet is efficient because many frames share one texture, but individual PNG files are often easier to edit, reorder, retouch, or feed into another pipeline. Splitting the sheet correctly means turning grid coordinates into exact crops without scaling the art or losing transparent pixels.

The key word is regular. A regular sheet uses fixed-size cells in rows and columns, with optional outer margin and consistent spacing. A packed texture atlas may rotate sprites, trim transparent edges, and place rectangles at arbitrary coordinates; it needs metadata and is not the same problem.

This guide shows how to identify a regular grid, calculate its measurements, export numbered frames, and verify that the sequence remains pixel-perfect.

Regular sprite sheet or packed atlas?

Before entering any numbers, inspect the image.

A character animation with twelve 64×64 cells arranged in three rows is a regular sheet. A UI atlas where icons fit tightly around each visible shape is likely packed. Transparent areas can make a regular grid look irregular, so turn on a checkerboard or grid overlay before deciding.

The Sprite Sheet Cutter is designed for regular grids. It warns when the image dimensions, outer margin, spacing, and chosen frame size leave remainder pixels instead of silently clipping them.

Two ways to define the grid

You can describe the same regular sheet in two ways:

1. Enter frame width and frame height.
2. Enter the number of columns and rows.

Use frame dimensions when the asset specification says “32×32 tiles” or “64×64 frames.” Use rows and columns when the visible grid is obvious but the cell dimensions are not written down. The tool keeps these representations synchronized so that changing one shows the equivalent values in the other.

The basic calculations are:

Margin and spacing must be removed before division. If the image has an outer margin of 2 pixels, subtract 4 pixels from each dimension. If four columns have 1-pixel gaps, subtract three gaps from the available width.

Step 1: Upload the original sheet

Upload a PNG, JPG, WebP, or BMP file up to 25 MB. PNG is the usual choice for sprites because it preserves alpha and sharp edges. A JPG can be cut, but compression artifacts and the lack of transparency remain in every exported frame.

Use the original-resolution file. Do not measure a screenshot of the sheet or a browser-scaled preview. If a 256-pixel-wide sheet is displayed at 512 CSS pixels, each visible screen pixel does not represent one source pixel, and measurements taken from the screen will be wrong.

The cutter reads the actual image dimensions and performs cropping in source pixels. It does not resample the frame contents, so a correct grid produces exact pixel copies.

Step 2: Measure outer margin and spacing

Outer margin is the blank border between the canvas edge and the first or last cell. Spacing is the gap between adjacent cells. They are not interchangeable.

For a sheet with frame width 32, four columns, 1-pixel spacing, and 2-pixel outer margin, the total width is:

2 + 32 + 1 + 32 + 1 + 32 + 1 + 32 + 2 = 135 pixels

Enter margin as 2 and spacing as 1. If you incorrectly enter all of it as spacing, the first crop begins at the canvas edge and every frame is shifted. A one-pixel error may be hard to notice on the first frame but becomes obvious when an animation jitters.

When the border is transparent, use an editor that shows pixel coordinates or compare several candidate grids in the preview. Look at fixed landmarks such as a character's feet, weapon tip, or baseline. They should occupy consistent positions from frame to frame unless the animation intentionally moves them.

Step 3: Enter frame size or row and column count

Start with the measurement you know with confidence. If the filename says “hero-run-48x48.png,” try 48×48 first, but still verify it—filenames can describe visible art rather than cell size.

If you know the number of poses, count columns and rows visually. Remember that the last row can be partially empty; a regular sheet may include transparent placeholder cells or unused space. The cutter derives cells from the full grid, so confirm that the calculated frame count matches the intended sequence.

The tool supports up to 500 output frames. Very large tile maps and packed world atlases are outside the intended first-use case. Splitting hundreds of meaningful animation frames is possible, but exporting and reviewing smaller action-specific groups is usually easier.

Step 4: Resolve grid remainder warnings

A remainder warning means the available pixels cannot be divided evenly by the requested grid. For example, 130 available pixels cannot form four equal 32-pixel cells with the stated gaps because two pixels remain.

Do not ignore the warning and accept silent cropping. Check these possibilities:

• The frame size is wrong by one or more pixels.
• The sheet has an outer margin you entered as zero.
• There is spacing between cells.
• A border was added during export.
• The image was resized after the sheet was created.
• The asset is not a regular grid.

When using row and column mode, the available width and height after margin and spacing must divide evenly. When using frame-size mode, the calculated rows and columns must consume the available area exactly. The preview should show grid lines on cell boundaries, not through visible pixels.

Step 5: Preview frame order and alpha

Frames are read left to right and then top to bottom. Check the first several crops and the transition between the end of one row and the start of the next. A sequence that looks correct within each row can still be wrong at row boundaries if the source used a different ordering convention.

Inspect transparent edges at high zoom. Exact cropping preserves alpha, but an incorrect cell boundary can include a sliver of the neighboring sprite. View frames on both dark and light backgrounds to reveal faint pixels. For pixel art, keep the preview nearest-neighbor so one source pixel appears as a crisp block.

If the visible character is centered differently in each frame, that may be intentional animation motion or a pivot problem. The cutter does not normalize alignment or trim transparent borders. It preserves the original cell exactly, which is the safest default for maintaining consistent pivots.

Step 6: Download one PNG or the complete ZIP

Download an individual frame when you need to inspect or edit a specific pose. Download all frames as a ZIP when the grid is correct. Files are numbered in sequence so natural sorting preserves animation order.

Keep the ZIP and original sheet together until the downstream workflow is verified. If you rename frames, use zero-padded numbers such as “run-001.png,” “run-002.png,” and “run-010.png”; this prevents tools that sort text rather than numbers from placing frame 10 before frame 2.

The PNG crops keep their cell dimensions and transparency. They do not include engine metadata such as pivots, collision shapes, animation names, frame duration, or nine-slice borders. Record those separately or keep the original atlas metadata when it exists.

What to do with the extracted frames

For retouching, edit one or more PNGs without resizing the canvas. Changing canvas size can shift the pivot when frames are rebuilt. To remove a solid or complex background, process representative frames first and verify edges before running the entire sequence.

To rearrange or combine frames, use the Sprite Sheet Maker. Upload the numbered PNGs, confirm natural filename order, drag any exceptions into place, and use a cell size equal to the extracted dimensions. Keeping the same dimensions produces a reversible split-and-rebuild workflow.

For an animated GIF source, it is usually cleaner to use the GIF converter first, because it understands GIF partial frames and disposal. The cutter only sees the final pixels in a sheet; it does not decode animation files.

Import checks for game engines

If you extracted frames to edit and plan to return to a sprite sheet, compare a rebuilt sheet pixel by pixel with the original before changing art. Any mismatch indicates order, padding, background, or alignment changed.

If the engine accepts individual images, import the numbered set and confirm:

• Texture filtering is appropriate for pixel art.
• Compression does not introduce halos.
• Every frame uses the intended pivot.
• The playback order crosses row boundaries correctly.
• Empty placeholder cells are not treated as frames.

Unity, Godot, and other engines can also slice the original sheet directly. Use the online cutter when you specifically need separate files, want to validate grid measurements, or need to feed frames into another image-processing step.

Troubleshooting

Every frame is shifted

Recheck outer margin first. A missing margin shifts all crops by the same amount. If the shift grows from frame to frame, spacing or frame width is wrong.

A thin line from the next frame appears

The frame width or spacing is off, or the source was resized with interpolation. Measure source pixels and correct the grid; do not erase the line independently from hundreds of frames.

The last row exports blank frames

The source grid includes unused cells. Download only meaningful frames individually or remove empty files after export. Confirm that blank-looking frames are truly empty and not intentional hold frames with subtle pixels.

The grid will not divide evenly

Test margin and spacing, inspect actual image dimensions, and determine whether the file is a packed atlas. Arbitrary packed rectangles cannot be recovered reliably from row and column counts alone.

A reliable checklist

Use an original-resolution image, classify the layout, enter known measurements, resolve every remainder warning, inspect row transitions and alpha, then export. Keep the source and settings until the animation works in its destination.

This discipline takes a few minutes and prevents the common one-pixel errors that make an otherwise correct animation wobble or bleed.

Split a sprite sheet into PNG frames

FAQ

Can the cutter split an irregular texture atlas?

No. It is designed for regular grids with fixed frame dimensions, margin, and spacing. Use atlas metadata for packed or rotated sprites.

Does cutting resize or blur the sprites?

No. The operation crops exact source-pixel rectangles. A correct grid keeps pixels and alpha unchanged.

What is the difference between margin and spacing?

Margin is the border around the outside of the grid. Spacing is the repeated gap between neighboring cells.

Why does the tool report remainder pixels?

The selected grid does not consume the available width or height exactly. Correct the dimensions, margin, or spacing instead of accepting an ambiguous crop.

How are files named in the ZIP?

Frames receive sequential numbered PNG filenames so their normal sorted order follows left-to-right, top-to-bottom extraction.