Optimizing animated .png Imagery
If you're like 99 percent of web developers out there, you should be thinking right now: "What are they talking about? There IS no such thing as animated .png files!" Prior to 2004, you would be absolutely correct (although .png also has a sister-file type called .mng which can be utilized to create animations as well). However, in 2004 Stuart Parmenter and Vladimir Vukicevic of the Mozilla Corporation introduced the APNG file format.
One of the primary reasons for the creation of the APNG format was to allow for an animated image format that supported 24-bit color with an 8-bit alpha channels (something that .gif cannot do). APNG is also designed to be backwards-compatible with image viewers that only support PNG. Older image viewers will simply display the first frame of the animation, like a normal, static image. Finally, APNG files require smaller library sizes than their .gif counterparts...making them faster to load and smaller to store.
Fantastic, right? Yes, with only two MAJOR problems:
1. Browser and viewer support. At the current time, very few browsers and image viewers support the APNG format, including KSquirrel (version 0.7.2 and higher), XnView (version 1.92 and higher), Opera (version 9.5 and higher), and Mozilla Firefox (version 3 and higher). For a more complete (and regularly updated) list of programs which will support the APNG format, please visit the animatedpng.com web site.
2. Failure of the PNG Group to formally adopt the APNG format.
To gain a deeper understanding for how the .png imagery you are using works (and how it is put together), you may visit our "Anatomy of PNG Imagery" page on this site for a much more in-depth explanation. If, however, you are simply looking to learn how to optimize the .png imagery on your web site, you can apply a number of techniques in effort to reduce the size of those files:
- Make sure that .png is the appropriate file format for displaying your graphic on the Web.
While the .png file format tends to produce the smallest file sizes, animated .gif is currently a superior format to animated .png when it comes to browser compatibility. Most browsers support the animated .gif format, while very few browsers (and no browsers which were installed before 2007) support the animated .png format. - Pre-size your images to the dimensions you wish to display on your web site.
A common mistake that many web developers will make is to load a graphic on to their web server at very-large dimensions, but then force the display of that graphic into a much smaller area (i.e. 300 pixels high by 200 pixels wide). Failing to re-size one's graphics to the size in which they are being displayed on a web page can result in dramatically larger images for servers and browsers to process, for no good reason. - Remove any excess colors.
When creating animated .png frame/image files for display on the web, many software programs will default to using 8-bit color to display the images. This means that a total of 256 colors (216 on a PC, since Windows reserves 40 colors for other purposes) will be used to create and display the graphics that you see. As is often the case, however, many graphics will not need NEARLY that many colors to be displayed properly on-screen...and reducing the number of colors to 128 (7-bit), 64 (6-bit) or less will typically result in dramatic savings related to file size. - Avoid the use of interlacing.
For very large images within frames, many web developers have employed a tool called interlacing, which downloads a rough whole image and gradually increases the image's clarity, instead of downloading from the top of the image and moving downward as is typically done. While this is effective in letting a site's visitors know that "something is coming," it will typically add to an image's overall size and download/display time, and will only slow your animated .png file displays down.. - Experiment with various compression methods and strategies.
In a process we've affectionately referred to as "defragmenting one's graphics" while presenting workshops across North America, one can often greatly reduce the size of each animated .png frame image simply by experimenting with different methods for storing the image's data, along with concatenating all of an image's IDAT data into a single chunk.
Tools that will allow you to complete create/edit animated .png files:
Justin Dolske's APNG Editor (Firefox extension): Cost: Free | Quality: A | Ease of Use: A | Use With: 1
GifToAPNG Converter (OS Independent): Cost: Free | Quality: A | Ease of Use: A | Use With: 1
SVG2PNG (Firefox extension): Cost: Free | Quality: A | Ease of Use: A | Use With: 1
Note: Excellent optimization tools such as PNGOUT, PNGOUTWin and PNGSlim will not handle your animated .png files properly...and most will remove all but the first frame of any output when saving a newly-optimized file. Please take great care in attempting to optimize any animated .png files and make sure to optimize your 8-bit or 24-bit .png imagery on a frame-by-frame basis prior to using the tools listed above to create your animated .png content.
Other: