To Png Or Not To Png

LibPNG.org is a good place to go for an intro to PNG. In short, PNG was designed to replace GIF as the standard image format for lossless compression on the internet. It claims better compression than GIF, full alpha transparency, and gamma correction. All common browsers today support PNG, and all except Internet Explorer for Windows claim to support PNG's killer feature -- full Alpha transparency. PNG is royalty free, unlike GIF, and is a recommendation of the W3C.

Given that IE for Windows does support PNG in all other ways other than full alpha transparency, and that GIF and PNG both do binary transparency equally well, isn't it time to switch to PNG in order to take advantage of all PNG's other benefits? I tested out all the various claims of PNGs superiority, with mixed results.

Compression

In the first test, I created three simple graphics -- one with a palate of 64 colours, with two colours, and one with 128 colours -- and compressed them three different ways -- Photoshop GIF, Photoshop PNG, and GIMP PNG. In Photoshop the image is consistently larger as a PNG than as GIF, but the opposite is true of the GIMP. Obviously Photoshop's PNG support is not up to snuff. I had no success with either the Photoshop plug-in, Superpng or the command-line (Windows and Unix) utility Pngcrush but that doesn't mean they won't work for you.

gif, 64 colours: 1,945 byes	png (GIMP), 64 colours: 1,690 bytes	png (Photoshop), 64 colours: 2,237 bytes
gif, 2 colours: 547 bytes	png (GIMP), 2 colours: 483 bytes	png (Photoshop), 2 colours: 915 bytes
gif, 128 colours: 10,029 bytes	png (GIMP), 128 colours: 8,889 bytes	png (Photoshop), 128 colours: 10,430 bytes

LibPNG.org claims "[a realistic]example is the oceanography data at NASA's Ocean ESIP site. Digital maps displaying various physical measurements can be generated dynamically in either GIF or PNG format; the PNG versions are invariably one-fifth the size of the GIFs, thanks to PNG's compression filters.". My results weren't quite as conclusive, but regardless, on a project where bandwidth concerns are paramount you may find it useful to switch to PNG.

Photoshop's poor PNG support is a major problem. The GIMP is an excellent program, and free, but ubiquity of Photoshop, and the GIMP's unintuitive interface and lack of native ports in operating systems other than Linux will be a major barrier to its adoption.

Gamma Correction

From the LibPNG site: "Gamma correction basically refers to the ability to correct for differences in how computers (and especially computer monitors) interpret color values." There are two factors here: the ability to predict what an image, say a photograph, will look like on another monitor; and the ability to match the colours from different sources on a single page. Predicting what an image will look like is a laudable goal, but unrealistic for me to explore here since it requires seeing the same image on two different computers side-by-side. I can, however, compare html/css colours to image colours. Ideally, a colour which Photoshop (or your graphics application of choice) calls BF2026 should be indistiguishable from the same colour embedded in a web page.

For this test I cut the same graphic down the middle and placed bars of the same colour (by hex code) beside the image for comparison. I tested on graphics created in both the GIMP and in Photoshop with upredicatable results.

The GIFs matched the html colours on all machines and browsers that I tested. There were only two cases that I found where the PNGs matched the html colours -- the Photoshop PNG in Apple's new Safari browser, and the GIMP PNG in Mozilla.

Below are screen captures of the PNG created in Photoshop from major browsers to illustrate the wide disparity in gamma correction for PNG. This is, as far as I know, a problem without a solution. The best a person can do is avoid placing equivalent HTML and PNG colours side-by-side.

Mozilla Mac OS X	Internet Explorer 5, Mac OS X	Internet Explorer 5, Windows

Full Alpha Transparency

One of the biggest advantages that PNG has over GIF is PNG's ability to support full alpha transparency. This would allow you, among other things to create antialiased text or logos and re-use them in different contexts (different background colours and images) without re-cutting the graphics thus reducing bandwidth and labour.

It is a well-known fact that Internet Explorer for Windows doesn't support full alpha transparecy. Less well-known, perhaps, is that there is a non-standard Internet Explorer html extension that can be used to force alpha transparency to work. The two configureations on the left, below, use the same image against different backgrounds.

The first configuration will appear similar to the second in browsers that support PNG transparency properly, but will display as a solid colour box in Internet Explorer for Windows.

The second one uses the hack illustrated here to achieve full alpha transparency in Internet Explorer. This second example should work in all major browsers.

The third in the row of images illustrates the fact that binary transparency works in all browsers that also support PNG including Internet Explorer without resorting to any hack.

As far as transparency goes, then, PNGs work as well as GIFs or better depending on how much effort you're willing to put out.

Summary

The decision to use PNG or not is yours to make. Ultimately you'll have to weigh the marginally smaller file size and arguably better transparency against lack of consistent gamma correction and the extra work that may be involved in achieving the desired results. Based on my results I don't expect PNGs to enter widespread use mainly because among the worst support is given in the most common applications: Photoshop doesn't compress PNGs as well as it compress GIFs; and Internet Explorer for Windows doesn't do full alpha transparency in an intuitive way.