Matthew Ammann

Student, Programmer, Flash Enthusiast

How To Make an Animated PNG

What is a PNG? .PNG is a file format for pictures (like JPG). PNGs have good compression and zero loss of image quality. They are the successor to JPGs, and hopefully more and more people will continue to use this format.

You know how .GIF files can be animated so that it looks like the picture is moving? There’s a new format out called APNG (Animated PNG) that will retain the high quality of your images instead of reducing them to a crummy looking 256-color GIF file. Before you get too excited, just keep in mind that it doesn’t have a lot of Application support…yet. As far as Internet browsers are concerned, new versions of Opera and Firefox support it, but Internet Explorer doesn’t. Here’s a more comprehensive list of the applications you can use with APNGs:

You need not worry, however, because APNGs are backwards compatible. If animation is not supported, whatever is on the first frame of your animation will show up as a static PNG image.

What you will need:

1) Mozilla Firefox version 3.0 or higher. Latest version (Currently at version 3.5.2 ) can be found here

2) The APNG Edit addon for Firefox

The editor is a piece of cake to use, and it has all the basic functionality you need to make an APNG. Just add your images one at a time (starting at Frame 1). You can change the amount of time each image displays by clicking on the number near the hourglass at the bottom of each frame. The delay is measured in milliseconds, so a 3 second delay between pictures (i.e. to make a slideshow) would be 3000 milliseconds. Once you’ve finished you animation, click the “Save Animation” button in the top-right, and you’re all done!

Check out the APNG I used as a preview for my Better Kongregate Firefox Addon:

5 responses to “How To Make an Animated PNG

  1. MichaelJW November 24, 2009 at 3:42 pm

    Oh nice! I’ve seen one animated PNG but I assumed it was some sort of hack of a GIF. This is good to know, thanks :)

  2. shifty December 7, 2009 at 10:19 pm

    I want to add that it appears the max size it will allow is 16MB.

  3. shanoboy April 12, 2011 at 2:20 pm

    Aren’t the special logos Google does usually animated PNGs?

  4. Doughboy December 13, 2011 at 8:11 am

    That’s the smart thinking we could all beenift from.

  5. Ugh... January 8, 2013 at 5:57 pm

    M$ and CrApple need to get off their lazy asses and include APNG support in their browsers. It has been years since the format appeared and IE and Safari still can’t render it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: