PNG Optimization (and IE6)

posted by Kravimir at 4:22 PM on Feb. 21st, 2010

Categories: CSS, Browsers, Old MS Edge & IE, Bugs, Optimization, Web Images 0 comments

Lately web page total size optimization strategies and how to make pages degrade gracefully in IE6 have been on my mind. Recently I've started using a few great programs for optimizing PNG files. Among other things, they can in many cases (depending on the number of colors used in the image and the number of opacity levels) convert PNG-24 format images with alpha-transparency to PNG-8 format with alpha-transparency — a feature that PhotoShop doesn't support (but Fireworks does). The program that actually does that is called pngout. It's a command line utility though, so I've been using PNGGauntlet and PNG Monster which are also free and provide a GUI to use pngout (and in the case of PNG Monster, other PNG optimizer utilites as well). I like PNGGauntlet's interface better, but in some cases it outputs files that are larger than the originals, which is not helpful. Also, probably due to it being a .Net app, PNGGauntlet is rather slow to start up.

Besides the smaller file size, another benefit of using images in PNG-8 format with alpha-transparency is that IE6 will render regions with alpha-transparency as fully transparent instead of the ugly grey that it shows by default with PNG-24 images that use alpha-transparency. Watch out for greyscale PNGs though. Just like with PNG-24s, IE6 doesn't natively support transparency in greyscale PNGs either. I've been using TweakPNG to remove unnecessary data chunks (e.g. file creation date) from PNGs for a while, and it's also great for seeing which format a PNG image is actually using.

If you want a tool that will convert a PNG-24 with alpha-transparency to PNG-8 when pngout won't, then check out pngquant, especially the improved version of pngquant by Kornel Lesinski

These tools have been available for a while (it seems both pngout and pngquant were first publicly available in 2002), but don't seem to have gotten the attention they deserve. Look for a future blog entry on partial transparency in IE.

Related Articles

There aren't any comments on this blog entry yet.

Comment Form: