The PNG alternative
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
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
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)
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)
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
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
Articles Feed