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

Martin Brinkmann
Jun 28, 2014
Google Chrome
|
12

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

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
software image
Author Rating
1star1star1star1stargray
1 based on 10 votes
Software Name
APNG
Landing Page
Advertisement

Previous Post: «
Next Post: «

Comments

  1. Hugo said on July 19, 2022 at 2:13 am
    Reply

    The image of a ball that you have in this article is not even a PNG file, let alone APNG. It’s using the WEBP format so it will never animate. That’s causing some confusion for readers.

  2. Tom Hawack said on March 23, 2019 at 12:12 pm
    Reply

    APNGs display correctly in Firefox Quantum (animated). I even happen to have replaced an extension’s toolbar button (when specific conditions arise) with an APNG. Strange that Chrome browser poses a problem. The Wikipedia bouncing ball mentioned above bounces correctly here on Firefox 66.0.1 …

    Switch to Firefox :=)

  3. Paul said on March 22, 2019 at 6:10 am
    Reply

    I have found a similar issue uploading an APNG file (with the .png extension) to my website. It works in Chrome when loaded from the HDD but once uploaded to the page it only shows the first image. Server related issue?

  4. fucking comedian said on June 29, 2017 at 10:09 am
    Reply

    Mi Chrome version can display APNG, even I created some, but the example showing in this page, AKA the bouncing ball, do not bounce…
    It appears to be the same bouncing ball as in https://es.wikipedia.org/wiki/Animated_Portable_Network_Graphics and I can see that ball bouncing, what is happening here?
    Maybe a trick to promote the extension?

  5. webfork said on July 2, 2014 at 3:03 am
    Reply

    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.

  6. Yogiboar said on June 29, 2014 at 4:49 pm
    Reply

    It works straight out of the box in Firefox 30.0!

  7. Ahmad said on June 29, 2014 at 12:21 am
    Reply

    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

  8. theMike said on June 28, 2014 at 10:25 pm
    Reply

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

  9. Maelish said on June 28, 2014 at 2:37 pm
    Reply

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

    1. Alex said on June 28, 2014 at 7:49 pm
      Reply

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

      1. Maelish said on July 7, 2014 at 5:34 pm
        Reply

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

  10. T89 said on June 28, 2014 at 1:35 pm
    Reply

    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…

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.