How does the tool know where each frame starts and ends?

You provide a single frame's width and height; the sheet is then sliced into a grid of that exact cell size, reading left to right and wrapping to a new row, so the sheet's total width and height must divide evenly by the frame size.

What happens if the sheet size doesn't divide evenly by the frame size?

The tool returns a clear error explaining the sheet's dimensions must divide evenly by the given frame width and height, rather than silently cropping or padding a mismatched sheet.

Can every frame have a different display duration?

No, this tool applies one delay value to every sliced frame for simplicity; if you need per-frame timing control, use a frame-by-frame APNG creation tool instead.

Is the resulting APNG a real, playable file?

Yes — it's a genuine PNG chunk stream with acTL/fcTL/fdAT extension chunks, DEFLATE-compressed with the browser's own CompressionStream, so it opens and animates correctly in any APNG-aware viewer or browser.

Sprite Sheet to APNG Converter - Grid PNG to Animated PNG

Overview

Introduction

This tool takes a grid-tiled sprite sheet PNG and turns it back into a genuine, playable Animated PNG (APNG), entirely in your browser.

It's the reverse workflow of exporting an APNG's frames to a sprite sheet: slice the grid apart, then reassemble the frames as a real animation file.

What Is Sprite Sheet to APNG Converter?

A client-side sprite-sheet-to-APNG converter that slices an uploaded, non-animated sprite sheet PNG into a grid of equal-sized frame images (given the size of one frame cell), then encodes that ordered frame sequence as a real APNG using this category's shared APNG encoder.

Every sliced frame is shown for the same duration, and the whole animation loops the number of times you specify (or forever, if set to 0).

How Sprite Sheet to APNG Converter Works

The uploaded sprite sheet is decoded to a plain RGBA pixel buffer, then sliced into a grid of frameWidth x frameHeight cells (left to right, then top to bottom), which requires the sheet's overall dimensions to divide evenly by the given frame size.

Those sliced frames are handed to this category's shared APNG encoder, which DEFLATE-compresses each frame's scanlines (via CompressionStream('deflate')) and wraps them in the acTL/fcTL/fdAT chunk structure the APNG spec defines, using your chosen delay and loop count.

When To Use Sprite Sheet to APNG Converter

Use it when you have a game sprite sheet or CSS animation grid and want to preview or share it as a native, self-playing animated image instead of a static grid.

It's also handy for quickly turning an exported sprite sheet back into an animation to sanity-check frame order and slicing before using it elsewhere.

Often used alongside APNG to Sprite Sheet Converter, APNG Creator and APNG Checker.

Features

Advantages

Runs entirely client-side; the uploaded sprite sheet is never sent to a server.
Produces a real, standards-compliant APNG that plays automatically wherever APNG is supported, with no extra playback code needed.
Gives explicit control over per-frame delay and loop count.

Limitations

The sheet's width and height must divide evenly by the given frame width and height; irregularly-packed or trimmed sprite sheets aren't supported.
Every frame is shown for the same fixed delay; per-frame timing variation isn't supported by this tool.

Examples

3x3 grid sheet, 32px frames

Input

A 96x96 sprite sheet, frame size 32x32, delay 100ms

Output

A 32x32 APNG with 9 frames, each shown for 100ms

The 96x96 sheet divides evenly into a 3x3 grid of 32x32 frames, sliced left-to-right, top-to-bottom.

Mismatched frame size

Input

A 100x100 sprite sheet, frame size 32x32

Output

Error: "The sprite sheet's dimensions must divide evenly by the frame size."

100 isn't evenly divisible by 32, so the grid boundaries would be ambiguous.

Best Practices & Notes

Best Practices

Double check your sprite sheet's exact pixel dimensions and frame size before converting, since a mismatch produces an explicit error rather than a best-guess slice.
Preview the resulting animation to confirm frame order matches the intended left-to-right, top-to-bottom sequence.

Developer Notes

The grid-slicing logic is a pure function operating on a PixelBuffer with no DOM dependency, fully unit-testable under Node; only the async wrapper adds the APNG encoding step, which relies on the browser/runtime's CompressionStream API.

Sprite Sheet to APNG Converter Use Cases

Previewing a game sprite sheet as a self-playing animation
Converting a CSS sprite-sheet animation asset into a native APNG for sharing
Sanity-checking a sprite sheet's frame order and slicing before use elsewhere

Common Mistakes

Entering a frame size that doesn't evenly divide the sheet's dimensions, which the tool rejects rather than guessing.
Expecting per-frame timing control — every frame uses the same delay value in this tool.

Tips

If you need different frame counts per row, pad the sheet with transparent cells to keep a uniform grid.
Set loop count to 0 for infinite looping, matching most game/UI animation use cases.

Sprite Sheet to APNG Converter