Animated .png images? What!?

In late 2007, PHUG, an open source community had the opportunity to meet Andrew Smith one of the key developers of APNG. Eager to get involved and expand on the open source community, PHUG placed it's initiative into the contribution of the APNG open source project. Our goal is to educate both open source commercial developers and designers on the beneficial aspects of using the APNG specification. As this project evolves, we hope to expand and build on the ever growing open source community, with designers and developers devoted to producing APNGs, tutorials, workshops, and more. Our hopes are to eventually incorporate APNGs into much more than banners and ads, such as menu alternatives!

If you're anything like me, you're absolutely astounded that anyone would create an animated .png right now. Traditionally .gif files are what have been used for animations. Don't fret though. There's actually some good reasons for an animated .png! I'm going to discuss the advantages here.

First, let's discuss the difference between a .png and a .gif

A .gif is typically used for animations, and isn't that great compared to a .jpg for static images due to lower quality. .gif is rather low quality, and an extremely old standard for animations. Though some might say they love the .gif and I agree, it's very nice, an upgrade cannot hurt.

A .png is typically used for static images, and destroys a .jpg in terms of quality typically. From my experience, a .png will give you as near perfect quality as you can get these days out of the common file types.  It also supports transparency, unlike a .jpg. A .png's one weakness is that the file size is often significantly larger than other file type alternatives. It's not unbearable, but nobody likes loading an image with a huge file size.

Now on to why animated .png is an upgrade from animated .gif

Reason #1: Higher Quality
Rather obvious, the higher quality of a .png is a nice boost for making beautiful animations.

Reason #2: .gif actually only supports limited transparency
In a .gif, a pixel is either transparent or not. In a .png, however, a pixel can be, say, orange, and 50% transparent. This makes for far more flexible images and built in image opacity.

What about file size? I'm actually not sure what the relative file size is. I'd assume an animated .png will be larger than an equivelent animated .gif. However, it probably won't be unbearable and will still be an awesome new format for the web.

Did you know?
Firefox already supports animated .png. Unfortunately other browsers such as Chrome and IE do not. Try going to http://animatedpng.com/index.php/category/samples/ with Firefox to see animated .png in action. It will even give you some comparison's to .gif animations.

Here's a filesize of a direct comparison between the first animation comparison on the page.

.gif : 24.33 KB
.png 112.95 KB

As you can see, the png is a lot bigger. But 112.95 KB is still not that bad in today's world unless you're using dialup. This is why I say it will not be unbearable. Note that the .png version looks a LOT better. (Check the site for yourself!)