CodesBeautify

APNG to Base64 Converter

Encode an animated PNG as Base64 and see how many frames it actually contains.

APNG file

Drop a file here, paste from the clipboard, or choose one

APNG, PNG, processed in this tab

Base64
Runs locally in your browser

About the APNG to Base64 Converter

APNG is an animated PNG. It keeps the full alpha channel and the twenty four bit colour that GIF cannot manage, and it degrades gracefully: a viewer that does not understand the animation chunks simply shows the first frame. That makes it a good fit for small looping UI details, and small looping details are exactly the assets worth inlining.

The encoder reads the chunk structure before it encodes anything. It looks for the acTL control chunk that marks a file as animated, pulls the frame count and the play count out of it, and reports both in the status line. A play count of zero means the animation loops forever, which is the usual setting. If the chunk is missing, the tool says so plainly, which saves you from shipping a still image where an animation was expected.

A real APNG is labelled image/apng in the data URI, and anything else falls back to the type detected from the file signature so the result still renders. The output can be a bare data URI, a CSS background declaration, an img tag with the file name as alt text, a JSON object carrying the metadata, or raw Base64 for a field of your own.

Watch the character count: animation multiplies the frames and therefore the size, so an APNG that is comfortable as a file can be far too heavy to inline. For still images use PNG to Base64, and decode with Base64 to Image.

How to use

  1. Drop an APNG onto the panel, paste one, or click to choose a file.
  2. Read the status line for the frame count and the loop setting.
  3. Choose the Output as shape your destination expects.
  4. Copy the result, or download it as a text file.

Common questions

How do I know my file is really animated?
The status line reports the frame count from the acTL chunk, and says explicitly when the chunk is absent.
What does a play count of zero mean?
It means the animation repeats indefinitely, which is what most authoring tools write by default.
Why is my data URI labelled image/apng?
Because the animation chunk was found. Browsers that do not support APNG fall back to showing the first frame.
Is an animated PNG worth inlining?
Rarely. Frames stack up quickly, and a file over about ten kilobytes is better served from a URL the browser can cache.