GIFs JPEGs and PNGs

There are three main file types used to build websites and to display images. The JPEG, the GIF and the PNG. Each has it's pros and cons. Knowing which type to use and when is vital in creating a professional looking web site.

The traditional advice is to use JPEG for photos and GIF files for graphics. This is true in most cases:

Flat Graphics

Logo in Gif Format

The above GIF weighs in at a paulty 7K and is clear as a bell.

Logo in Jpeg Format

This JPEG verion on the other hand is nearly 3 x the file size at 19K and, as you can see, is displaying obvious artefacts due to the JPEG's lossy compression.

Logo in PNG format

The PNG matches the GIF for clarity but at 14K is double the file size.

The winner here is clearly the GIF.

Photographic image

Photograph of a Toucan in Gif Format

Again we start with the GIF. This time the file size is fairly significant at 80K. The image quality is poor, pay particular attention to the beak. The GIF file format is restricted to displaying only 256 colours in any given image which is causing problems here.

Photograph of a Toucan in Jpeg Format

At a fraction of the file size (30K) this JPEG looks fine.

There's no point in me showing a PNG here given that the source image was a JPEG. Although the PNG may offer a very slight advantage over the JPEG for quality when displaying photos, this slight advantage is more than negated by the much larger file size - a massive 176K in this instance.

Enter the PNG!

There are occasions when both the GIF and the JPEG fall short. Generally this is when we encounter a graphic image that has gradients or multiple blended colours.

Gif Graphic

The GIF. File size: 24.8K. 256 colours simply isn't enough here. Notice the banding within the gradients and the noise around the text.

Jpeg Graphic

The JPEG. File size: 26.1K. Artefacts let the jpeg down again. Particularly in areas of high contrast such as around the text. The result is perhaps acceptable in a one off situation but would look amateurish if used as part of a web template

Graphic in Png Format

The solution is to use a PNG image in occasions such as these. PNGs support 16 Million colours with lossless compression (no artefacts), and at only 22.8K the png is also the most lightweight solution to this problem.

Conclusion

GIF Files

Use for flat graphics or graphics with a limited colour palette

JPEG Files

Use only for displaying photographs

PNG Files

Use for displaying graphics with a broad spectrum of colours or for graphics that feature a long gradient.

A Word of Caution

Be careful to account for Internet Explorer 6 when deploying PNG files to a web layout. Aside from not being able to handle transparency in PNGs, IE6 also renders them in a slightly different shade. Weird, I know, but it can cause problems if you're looking to use both PNG and GIF files to contruct your page.

Post a Comment