May 16, 2008, 9:53 am

Website Design

Gifs and JPEGs

 

There are three standards for compressing image files and displaying them on the Web. Only two of these, GIF and JPEG, need to be considered. The other format, PNG (Portable Network Graphic) has not, as yet, acquired the ubiquity of the other two.

GIF (Graphics Interchange Format)

This is the standard format for displaying graphics. By this I mean labels, logos, diagrams, simple illustrations and any graphic that contains large flat areas of colour. GIF supports only 8-bit colour, that is a maximum of 256 colours. However due to the nature of browsers (IE and Netscape) and platform (PC or Mac) the general "web-safe" palette is considered to be 216 colours. This means that if a gif uses a colour that is not "web-safe", that is from the other 40 colours, then on a 8-bit display that image will be subject to a phenomenon called dithering. Approximations to these unsafe colours are made and consequently certain regions will be dotted with broken colour. This was more of a problem in the early days of the Web. Today most users have 16 or 24-bit colour display settings.

JPEG (Joint Photographic Expert Group)

This format is used to display photographs that often contain millions of colours. JPEG is a "lossy" format, and reduces, or compresses, the file size by removing redundanacy. It achieves this by losing colour without perceptibly losing picture quality. It employs 24-bit colour reproduction (16,777,216 colours) and again an 8-bit display will dither the colour with the 256 colours that it has at its disposal. Monitors with 24-bit "True Colour" definition will display a jpeg a lot better than on an 8-bit system. Whereas a "web-safe" gif will look the same on 8-bit as it will on a 24-bit display

Making the correct choice of format is important, otherwise the results can look dreadful. Two properties need to be considered, the file size and the quality of the image. Balancing these two is sometimes tricky and once again, compromise is required.

Here are two images that have been formatted, first as a gif, and secondly as a jpeg. The gif is a larger file size, 6K as against 4K for the jpeg, but the jpeg is spoiled by some lines and possesses a "halo" effect in certain regions of the image.

The quality of the jpeg could be improved, but this would increase the file size. When formatting a graphic in JPEG, the format has a nasty habit of attaching unwanted information that degrades the image.

Gifs can be animated and with suitable graphics software one can use them in ways not possible for jpegs. Gifs can be interlaced, which means that they are displayed gradually, one line at a time, from top to bottom. Interlaced images are only really useful if one needs to provide users with a preview of an image before it is fully loaded.

More usefully, one colour in a gif can be designated as transparent.
To illustrate this, I have placed two gifs on a pale blue background. Both have a white background. However, the background of the upper gif has been designated as transparent. Its irregular shape has been preserved when viewed against the blue, whereas the background of the lower gif is opaque.

 

Now compare the next two images. The uppermost is a 16K gif, whilst lower one is a 9K jpeg. If you are viewing this on a 16 or 24-bit display, you should see why the correct format needs to be chosen. The gif has a more granular appearance than the crisper jpeg.

 

 

(Yes, these are my children. The wings were made from a cornflakes packet and taped to their skin. They managed to keep still for about 3 seconds. One has to work very fast with kids. I painted the backdrop, shot the whole thing in my living room and stole the idea from Raphael. OK, that's the confession over with, so let's move on to a final point about colour reproduction on the Web.)

The 16-bit Colour Syndrome

I once rued the day when I designed a site for someone on a monitor displaying 24-bit colour without checking it on a 16-bit display. I uploaded the files to the web server and everything looked fine, until sometime later I viewed the site on another machine. I discovered, to my great dismay, that all the pages were covered with patches of blotchy colour. I couldn't figure out what had gone wrong. This was my introduction to the 16-bit colour syndrome.

Until recently, budget systems often incorporated video cards that only supported 16 bit High Colour display. Cheap cards can result in inconsistencies of colour reproduction. Two areas of juxtaposed, supposedly identical colour, are often displayed differently. The results look terrible with gifs, although you are less likely to be aware of the problem with jpegs.

Next page » Introduction to HTML

Previous page « Tables

Copyright © 2008 John McSweeney