The PNG alternative

by Joe Gillespie — Jun 1, 2002

The PNG (Portable Network Graphics) file format has not been as ubiquitous as GIF and JPEG mainly because it is a relative newcomer and support for it in older browsers has been poor. Recent browsers have good PNG support if not 100%. If you haven't explored the possibilities you could be missing out.

There are two flavours of PNG, 8-bit and a 24-bit roughly corresponding in usage terms to their GIF and JPEG counterparts but with reservations. The 8-bit version is very similar to GIF. You can choose your colour depth from 8-bit (256 colours) down to 1-bit (2 colours) and you have the option of making one colour transparent. Where you will notice a difference is in the file sizes. The examples below show that the PNG images are considerably smaller than their GIF counterparts although I must point out, this isn't always so, it depends on the image.

Below, the same 256-colour image is saved in GIF and PNG-8 formats with and without transparency.

GIF

GIF - 256 colours

For this image, the difference in file size is quite significant, the GIF is about four times the size as the PNG-8 for the non-transparent version and the PNG gets slightly larger when transparency is on.

256-colour GIF image, 8759 bytes.

PNG-8

PNG - 256 colours

This identical 256 PNG image is only 1950 bytes, quite a saving over the GIF version. Compression in PNG is more efficient than GIF in most instances - but not always.

GIF (transparent)

Transparent GIF

A 256-colour transparent GIF is the same size as a non-transparent one - this is 8759 bytes. Black has been made the transparent colour so the last swatch and the dividing grid is transparent.

PNG (transparent)

Transparent PNG

The transparent version of the PNG-8 is slightly larger than its non-transparent counterpart at 2144 bytes but still much smaller than the transparent GIF. Again, black is transparent here but PNG-8 is not limited to one transparent colour like GIFs.

PNG-24

PNG 24

Going up to a 24-bit PNG, you find that for this image, the size has only increased slightly over the 8-bit version - 2864 bytes. PNG-24 compresses flat colours efficiently too.

JPEG

For comparison, a JPEG of the same image with 50% compression is over 12K and looks awful. A JPEG should never be used for such an image.

For photographic images, PNG-24 gives excellent results, but at a price. This small JPEG image is just over 12K and has been saved at 50% compression. There are compression artefacts but because of the nature of the image, they are not very noticeable. Saved in PNG-24 format (not shown for obvious reasons), this image is a whopping 78K. No compression artefacts, but much too big for a Web image.

PNG-24 (8-bit transparency)

Where PNG-24 images really score on a Web page is when you combine a low colour graphic image (that you would normally save as a GIF) with an 8-bit mask. You can get a nice smooth fade into the background - provided that the browser supports 8-bit masks.

Most browsers of version 4 or above will display PNG images at a basic level but you will find that transparency, especially the 8-bit mask, can be unreliable in some.

In most instances, you can now use a PNG instead of a GIF and benefit from smaller file sizes. If your site gets a lot of visitors with older browsers, stick to GIFs.

When you want small file sizes, PNG-24 is not really an alternative for JPEGs for the Web.

There are no multi-frame PNGs that can substitute for animated GIFs at the moment.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float