Animated PNG

The Animated PNG is the cousin of the MNG and the second cousin of the Static PNG. You might be telling yourself, whaaa? Now this is interesting, not to mention what is an animated PNG anyways? The developers who came up with the original PNG(Portable Network Graphics) decided not to add support for animation. So began work on another format MNG (Multiple-image Network Graphics). This format never really caught on so much as the static PNG did so developers decided to come up with a new, or not so new format, the Animated PNG.

Animation on the Web

First there was the ancient era of the epic Animated GIF which ruled the web with often laggy yet sometimes humorous-like animations. Then came the great renaissance / pre-modern period. Introducing the almighty Adobe Flash Movie (Macromedia at the time) that was allowing web designers to build not only simple animations, but complete animations from beginning to end experiences never seen before on the interwebs. (A series of tubes connecting people through computers.) Currently, modern day, we all know how Adobe Flash has evolved and are witness to the herculean JavaScript libraries that has revolutionized the speed in which we can develop pure HTML/CSS animations.

As you know, companies such as Apple, Inc. have refused to allow the Adobe Flash Player plug-in to be used in any of its phone’s. Many of you are probably reading up on all the latest buzz surrounding HTML 5 and CSS 3 and all that it promises. Now, I am not one to say that Adobe Flash will ever die out in lieu of the newly adopted HTML 5 Canvas this simply just will not happen. Market share and development time are huge factors when it comes to web designers with large audiences. Adobe Flash and its market saturation, file compression, vector scalability, and development framework are clear winners going against pure html mixed in with a little 8-bit transparent lossless bitmap controlled from JavaScript commands, I do believe though that in the future HTML 5 , CSS 3, Animated PNG’s, and Adobe Flash will co-exist together harmoniously. Now the real question is… what does all this mean for Flash Banner Advertising?

Animated PNG
Perhaps Animated PNG’s can help the supplement the load of Flash banners for non-Flash platforms. PNG (Portable Network Graphics) is an awesome format when it comes to a solution for raw transparency on the web static or not. Many 3D authoring tools have taken advantage of PNG animation for years, Adobe Fireworks has native support for PNG, and the Animated PNG format is completely backwards compatible. If modern browsers are going to support the HTML 5 and CSS 3 standards why not Animated PNG’s?

One major drawback is the compression. File sizes are very large in comparison to Flash movies and even though the future outlook of bandwidth looks amazing we still have to cater to the lesser. Can we find a way to compress these PNG’s, and be a little less CPU-bound? If we can, the sky is the limit! In today’s modern-era static transparent PNG’s are commonly used in conjunction with JavaScript/HTML/CSS to create stunning animations (Check this out!), why not 100% pure Animated PNG’s too?

Animated GIF versus Animated PNG

Animated GIF Animated PNG

Supported browsers

Firefox 3 +
Opera 9.5 +

Sources

Development
http://wiki.mozilla.org/APNG_Specification
http://en.wikipedia.org/wiki/APNG
http://littlesvr.ca/apng/
http://philip.html5.org/tests/apng/tests.html
http://eligrey.com/blog/post/apng-feature-detection
http://labs.mozilla.com/2007/08/better-animations-in-firefox-3/
http://animatedpng.com

Other Links
PNG image file format
W3C PNG Specification – Second Edition
PNG (Portable Network Graphics) Specification, Version 1.2
W3C GIF specification
GIF image file format



  1. Niemen on Tuesday 22, 2010

    I stumbled across your blog and the post about animated png is fantastic, keep on posting!

  2. DeeDee on Tuesday 22, 2010

    I was a Web designer back in the early days of Flash. Back when job specs would not Flash for most commercial & government Web work. It seemed to face many of the same hurdles that animated png usage faces now. I hear the same arguments against the use of apng that I used to hear about using Flash. Time will tell – if not apng, then something similar will in time be standard. Thankfully Flash content became OK to use – remember back in the stone-age of the Web pre-Flash, when you has to do 640 x 480? No, you’re probably to young to remember those not so “good” old days. Have patience, animated png’s day will come.

  3. Mo DeJong on Tuesday 22, 2010

    There is an iPhone/iOS implementation of APNG decoding available via the AVAnimator library.

    http://www.modejong.com/AVAnimator/

  4. Mo on Tuesday 22, 2010

    APNG for iOS apps ( iPhone and iPad) has also been implemented. The URL is:

    http://www.modejong.com/AVAnimator/

    Animation with support for a full alpha channel is just so useful.

  5. Mabuntu on Tuesday 22, 2010

    Wow This PNG just awesome , thumbs up….

  6. Olly on Tuesday 22, 2010

    Some good APNG editors:
    Japng (Java app): https://www.reto-hoehener.ch/japng/
    APNG Anime Maker (MS Windows): http://sites.google.com/site/cphktool/apng-anime-maker

    (A)PNG is beautiful, no quality loss, can have very high compression and far better than Flash for so many things.
    Frames have regions so sizes can be small. APNG Anime Maker can define them automatically – see the videos at that link.


Spam Protection by WP-SpamFree


Copyright © 2010 Bradford Sherrill "Detroit Web Design Blog" All Rights Reserved.
Contents under Creative Commons License.
version 2 "black honey"
View More Work:
Bradford Sherrill at Coroflot Bradford Sherrill at Behance Network Bradford Sherrill at Krop Bradford Sherrill on Deviant Art