How to add animated png (apng) support to Google Chrome

Animated PNG files work in many regards just like gif files displayed on Internet sites. They offer several advantages over gif files on the other hand including support for 24-bit and 8-bit transparency which gifs do not support.

Transparency and the fact that 24-bit colors are supported are what makes animated PNG files interesting as they look good regardless of the background they are embedded on and thanks to the increased number of colors, usually better than comparable gifs.

The downside to this is that they are usually larger in size because of it.

The format is a extension to the PNG file format that is currently not a standard. What this means is that most browsers don't support the feature yet.

To be precise, only Mozilla Firefox and Firefox-based browsers support animated PNG files at the time of writing. The Opera browser did support it up until version 12.x but the new Opera that is based on Chromium does not support it.

If you open an animated png file using a browser that does not support it, you will see a static image file instead since the first frame of the file always stores the standard PNG stream so that it can be displayed instead of the animation.

APNG example

Animated_PNG_example_bouncing_beach_ball

If your browser does not support animated png files, you will see a static image of a ball. If it does support the format, you will see a bouncing ball instead.

Google Chrome users who want to add animated PNG format support to their browser, for instance because it is a format used on websites they visit, can install the APNG extension for it to do so.

It works out of the box on all websites you visit (whitelist mode) but can be switched over to work only on sites you explicitly permit it to run instead (blacklist mode).

Both modes come with options to allow or block animated png files on select websites.

apng-extension

While I have not tested the extension in Opera or other Chromium-based browsers, it is likely that it will work in those browsers as well.

The support the extension adds to the Chrome browser works well for the most part. According to the author's description, support for CSS images may be incomplete though.

Summary
Please share this article

facebooktwittergoogle_plusredditlinkedinmail


Responses to How to add animated png (apng) support to Google Chrome

  1. T89 June 28, 2014 at 1:35 pm #

    It's a shame that not only Chrome and Chronium-based browsers but also Internet Explorer lack support for APNGs. But users of Chronium-based browsers can now display APNGs with the APNG extension. APNGs have smaller file size than animated GIFs (but not in all cases). It is also a shame that the APNG format is not very widely used in web pages despite its advantages...

  2. Maelish June 28, 2014 at 2:37 pm #

    Doesn't work on my chrome v35 for some reason. The ball appears then disappears.

    • Alex June 28, 2014 at 7:49 pm #

      Chrome canary, doesn't work either.
      Edit: Works if you try to open image in new tab.

      • Maelish July 7, 2014 at 5:34 pm #

        Yea but it's not practical if it doesn't work on page load.

  3. theMike June 28, 2014 at 10:25 pm #

    cool, adblock element hider made the annoying bouncing ball disappear. one less movement on the screen

  4. Ahmad June 29, 2014 at 12:21 am #

    Just so to let you know upcoming Safari 8.0 in Mac OS X 10.10 and iOS does support APNG. You need to update your article to reflect this and I think Chrome should move to add APNG support and soon IE will come to this as well.

    Proof: http://caniuse.com/#feat=apng or http://caniuse.com/apng

  5. Yogiboar June 29, 2014 at 4:49 pm #

    It works straight out of the box in Firefox 30.0!

  6. webfork July 2, 2014 at 3:03 am #

    Note about the size: Generally the files I've converted from GIF to PNG are anywhere from 10-50% smaller. One freeware program I found PNGOptimizer (http://psydk.org/pngoptimizer) does a great job and generally brings down the size without hurting quality.

Leave a Reply