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 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
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 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
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.