When to use GIF and/or JPEG files

As a rule, web browsers such as Microsoft Internet Explorer and Netscape Navigator/Communicator can view images in one of two forms:

• GIF files, which can contain a maximum of 256 colours. GIF stands for Graphics Interchange Format.
• JPEG files, which contain millions of colours. JPEG stands for Joint Photographic Experts Group.

When to use which format?

Here are the broad rules:

• If the image you are displaying is a map, or a line drawing, or any other image with only a few different colours such as a logo, use a GIF file.
• If the image you are displaying is a photograph, or a complex image containing many colours then use a JPEG file.

Here are two sample images:

A map in GIF format	A photograph in JPEG format
mapgif.gif - 4Kb in size	carjpeg.jpg - 5Kb in size

The map works best in GIF format because it has large areas of colours which are very similar. The photograph works best in JPEG became it has thousands if not millions of colours (don't worry, you can't see them all) which are very variable.

Let's see the effect of displaying the map in JPEG format and the car in GIF format...

A map in JPEG format	A photograph in GIF format
mapjpeg.jpg - 19Kb in size	cargif.gif - 13Kb in size

Both images are significantly larger in size - and therefore slower to download. If we were to look closely at each image we would also see that the quality of the images has decreased. This is more noticeable for the map where the lines have become smudged due to the way a JPEG file is saved - this effect is almost unnoticeable in photographs.

Notes about JPEG files

Many graphics programs allow you to save a JPEG file with varying levels of compression. In general, the higher the compression, the lower the quality of the resulting file and the quicker it will download into a user's browser. Thus saving a JPEG is a trade-off between quality, file size and speed. Here are some examples:

Image	Quality (out of 100)	File Size (kilobytes)
	90 low compression	4.85k
	70	3.65k
	50 medium compression	2.40k
	30	1.88k
	10 high compression	1.17k

Looking at the images, there is no noticeable difference between the appearance of the 90, 70 and even the 50 quality images. The final two images show a deterioration in image quality and although they would be faster to download (and upload) they do not help the user to get an accurate impression of the car. Multiply the numbers in the 'File Size' column above by ten or even a hundred and you can start to see the difference that JPEG compression and quality can make to file sizes and hence speed of downloading.

An important thing to remember about saving JPEG files is that the compression which makes JPEG files so small for the number of colours they display is known as 'lossy' - this means every time the file is saved, some information is lost as the file is compressed. Save a JPEG file several times and the effect is very noticeable. Save a file once with a quality of 50, then save the resulting file again with a quality of 50 and the resulting file will be compressed again to something approaching a quality of 25 - see the images above for what this may look like!