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