Skip to main content

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.

This article was first seen on ComTek's "TekBits" Technology News

HOME