The advent of the World Wide Web brought the ability to view images to the Internet. Since then images have become second nature, where would the web be without photographs and graphics. As ever, the use of images correctly adds greatly to a web page, and the wrong use of images can result in a disaster of Titanic proportions.

Lets first look at what graphics formats you can use. Paint packages offer a seemingly endless list of formats when you want to save a photograph or graphic, but the web only supports a few of them. These are the CompuServe GIF format, and the Joint Photographic Experts Group JPEG format and several other like PNG.

JPEG Format

JPEG files were developed to reduce the file sizes of photographic style true colour images as much as possible. This is achieved by converting the colour values in the image into luminance and chrominance values. These values then undergo a series of transformations before which act to compress the image. File size reductions using this method are quite huge, but are reached by the loss of some information. A JPEG compressed image never looks exactly like the original file, and the more compression used, the worse this gets.

Added to this some images suffer more greatly from JPEG compression than others. Images with sharp, contrasting edges suffer quite badly from JPEG compression. So subjects consisting of black lines on a white background degrade rapidly under JPEG compression. Similar image types that also suffer include typefaces and line art images.

This is not the disaster it sounds, as most photographic images look fine with some degree of JPEG compression. The other advantage is that the greatest reduction in file size comes within the first 20% or so of compression. So you can get a file compressed to about 90% of its most reduced file size with only a small amount of JPEG compression applied.

GIF Format

GIF files were developed by CompuServe as a graphic format for its pre-Internet online service. This type of file does not work on true colour images, but was designed to work on 2, 4, 8, 16, 32, 64, 128 and 256 colour images, which were the norm at the time. GIF files work by storing a palette of all the colours in the image along with the image data in the file. The GIF format has access to the 16.8 million colours in the true colour palette, but only uses a maximum of 256 of them at any one time. The final file of image data and colour palette is then compressed using LZW file compression to reduce the stored size of the file. The advantage of LZW compression is that there is no loss of information, so no loss of quality.

The other two major features of the GIF format are interlacing the image, and transparency. Interlaced images store the image data slightly differently to normal images. Normal images store line 1, then line 2, then line 3 until the end of the image. When this is rendered in a browser over a slow connection, the image seems to build from the top. With an interlaced image, the data is stored as line 1, then line 9, then line 17 to the bottom, and then line 2 and so on. Browsers render this as a low quality image, which gradually improves until all of the data is recovered. This idea has been used as a means of displaying something to users while a slow page is loading.

Transparency is a feature which allows one of the colours in the GIF file to be ignored when the browser is rendering the image. When the display is processing the image, it checks against the transparent index, and if that colour appears on the screen it is not processed, and so appears as the background colour. This gives the impression of a non rectangular image, and makes things appear more naturally on the page.

Which format should I use?

This is simple, if the image is true colour i.e. a photograph use a JPEG file. If the image is 256 colours or less use a GIF file.

With all its losses, JPG will still give a better quality photographic reproduction than GIF. Why else would it be the recommended format from a photographic expert group. You just need to work within its strengths.