How to add animated png (apng) support to Google Chrome - gHacks Tech News

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




  • We need your help

    Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

    We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.

    If you like our content, and would like to help, please consider making a contribution:

    Comments

    1. 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…

    2. 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.

    3. 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

    4. 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

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

      It works straight out of the box in Firefox 30.0!

    6. 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.

    7. 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?

    Leave a Reply