I have been a lover of the PNG formate for a very long time, and remember being frustrated working on some early projects with lack of support for the format in many browsers, that was a LONG time ago, and png files are very well supported and often used in web development. Back in 2004, another file format I was excited about was created, APNG or animated PNG files. Just like png was suppose to replace the copyright encumbered GIF format, this was suppose to replace the animated GIF format. Due to company and standards politics, though, only Mozilla , the inventor of the open format, has supported it. Very recently that changed when Apple added support for it in iOS 8 and Safari 7, which is really great news.
So why are animated PNG files so important, and what’s wrong with GIF? Well GIF files have three major issues/disadvantages.
- Copyright encumbered, the format is not open, developed by CompuServe in the 1987 it uses LZW compression, which was patented by Unisys. Those patents have expired, so it is no longer an issue. More importantly, it is not being updated.
- Max of 256 colors, this is ok for lots of things, but it really limits what can be done.
- Only 1 bit for transparency, It lacks a full alpha channel, so unless you are making a transparent image for a solid background, of only one color, it will look very bad.
PNG fixed all of this, it is open, has full color support, and 8bit full alpha transparency that looks great on any background.
So what’s the issue? The png format did not include animation. So if you want to make a AJAX loading spinner, a loading status bar, or just a simple animation to illustrate or draw attention to something, you had to use a GIF. Most of the time I was able overlook the first two issues with GIF animations, but for spinners, or loading indicators, which work on many backgrounds, the poor transparency support drives me crazy. It always leaves you having to put it in its own little container with a solid background. You could also use CSS animations, Canvas animations, something like spinJS (my favorite), CSS sprites or even animated SVG files, but they all are much more complex and don’t fill all the needs of a simple animated raster image file format as much as I may love them.
APNG solves the issue of a simple, easy lossless raster file for me. It has all the benefits of PNG, including full alpha transparency support, in an animated file. The files extension is .png, and if the browser or viewer does not support APNG, it will show only the first frame of the animation. This makes it fail very gracefully on any non supported browser. The standard also supports lossless compression, so in my testing, 4 or 5 frames took up the same or less as just one of the png files straight out of photoshop.
Adoption until Apple included support, as been poor. Only Firefox had supported the great format. It is free, open, fast, and does not take much work to include, so why did no one include it? In short: Politics of the browser wars, and competing standards that might cover the area, like webP and MNG. WebP and MNG have some great possibility also, but APNG should be supported. WebP has lots of promise, but right now only Google supports it. 2007 and 2013 saw the biggest blow to the APNG format when the PNG standards group voted not to include it. One reason was they had backed MNG, the other, they wanted to keep the PNG standard just for png files. I am really hoping that Apple choosing to support APNG will change Google’s and maybe even Microsoft’s option of the format.
You can use them today! Because they work in any browser that supports PNG files, you can use them today if you don’t HAVE to have it animated on every computer. Because they compress so nice, you also don’t have to worry about to large of a file.
So APNG may not be for you, but what are some other options for spinners and the like?
More info on alternative ways to make Spinners
CSSload.net //more css loaders
SpinJS //one of the most compatible ways to make a spinner