GIF. stands for Graphical Interchange Format. This is a picture made
up of 256 colours or less. Since photographs usually have many more
colours in them than that, the GIF format is not quite so suitable
for them. Photographs can be saved and look reasonably good as GIFs
but they may have a bit of a 'flat' look because of the 256 colour
limitation. However, it is a good file format for computer
graphics. Images saved in this format can be animated and/or be
given transparent areas.
Although GIF graphics have a range of 256 colours in them, it is
possible to further reduce that number to just those needed for its
proper display. This is relevant to keeping file sizes down and is
called optimising a graphic.
Why optimise? Optimising graphics
means smaller file sizes. Smaller the file sizes means faster
loading graphics. A web page containing optimised GIFs will display
more quickly than those where the graphics are put in regardless.
Quite often, the reason why many web sites take ages to display is
because little consideration has been given to the photo and
graphic file sizes that go to make up a page. Such pages are said
to be 'graphically heavy'. This might be acceptable for those with
fast Internet connections but is bad news for those still
connecting via a 56k modem.
Taking the trouble to optimise graphics means that people don't
get impatient with waiting for web pages to open. There have even
been one or two compliments regarding this from those who have
stumbled across our site, so it appears that fussiness in this
respect makes a difference.
How's it done? The number of colours
in a GIF image can be reduced using a good art program. In Corel
Photo-Paint a preview Window shows the original picture quality of
an image compared to the effect that reducing the number of colours
would have on it. You cannot choose or see which colours are
removed. There are just up and down arrows for adjusting the number
of colours. The procedure is to gradually reduce the number from
256 until the graphic's quality begins to deteriorate. When this
starts to happen the number of colours should be increased by one
or two until the graphic looks OK again.
The effect of colour reduction.
This graphic has 256 colours in it.
This is the same one with the colours reduced down to 9.
Obviously, the reduction was far too much and the number of colours
would need increasing again to make it look better.
Many GIF images can have the number of
colours reduced without any effect on how the graphic looks.
A good way to think of it is as though a GIF image has a 'library'
of 256 colours. However, it might only need 20 of those for proper
display, so there would be no point in keeping the other 236 of
them on the shelves. They just increase the file size of the
graphic. There are graphics 'L&Ms Pastimes
Website' that have as little as 4 colours in them, so there
would be no reason to save them with a colour range numbering 256.
If they had been, 252 of the colours would have been dead weight
and only served to increase file size.
The 'Computers' button to the right has 20 colours in it. On the
face of it one would think there are only two there, i.e. green and white. In
fact, as well as white, it has 19 shades of green around the
perimeter of the button. This gives it a smooth appearance and
blends it into the background. If the shape had been a rectangle
with clean square edges then two colours would have been enough
since there would have been no transitional colours needed between
the button and the background.
The graphic on the right below is an animated
gif. It is not one single picture but two. One 'TW' has a star added to it and the other 'TW' doesn't. Both graphics have been combined to form
a two frame 'animated gif'. Of course, having two frames doubles
the file size. Three would have tripled it ...and so on.
Why the green bits? The flashing
TW image above is a transparent animated gif. A transparent gif
(animated or not) is a graphic where
one colour can be made 'invisible'. This is
useful when it is desired that only a particular part of an image
is displayed on a web page. For instance, perhaps just a shape of
some kind is required to show on the page but not the background it
sits on. It is possible, with a GIF graphic, to make a background
invisible so that the page shows through it. This is done by
filling the image background with a colour totally different from
any in the foreground.
In the above image, the colour chosen is bright green since
nowhere in the TW part of the graphic has
this colour. An option is given to make the green transparent when
saving the GIF image to disk. These bits are not seen in the final
image because they become invisible when they are viewed in a web
page. Any picture that moves about on a web page without any
visible background other than the page is likely to be a
transparent animated gif.
Animated gifs The file sizes of
animated gifs, depending on detail, can be quite large. The 'atom'
(left) consists of 21 separate images
combined to make a single animated gif. Needless to say I didn't
create it! As may be imagined, the 21 images give a fairly large
file size of 33Kb (kilobytes). If the image were a stationary one
it would only be 1.57Kb. It is usually possible to find out how
large any graphic or photograph is by right clicking on the image
and then choosing 'Properties'.
JPEG stands for Joint
Photographic Experts Group. This is a '24 bit colour'
format, which amounts to it being millions of colours.The 80x80
pixel photograph of 'yours truly' (right)
is saved as a JPEG (.jpg). This is better
for photographs because all of the various shades and colours are
preserved. JPEGS should also be optimised but this is achieved in a
different way to reducing the number of colours.
A JPEG file uses a compression method for file size
optimisation. However, if it is compressed too much then picture
quality will suffer. Therefore a balance between file size and
quality must be struck. An
exact amount of compression can be specified using a good art/photo editing program.
Less expensive photo editing programs will just give the option
of saving the photograph at low, medium, or high quality. This is
where fixed amounts of compression can be applied to the image.
Medium quality is perfectly adequate for web display. High quality
would be best only if you want to print a photograph. There's no
reason why you can't save two copies of a photograph under slightly
different file names, one copy for web display the other for
Printing is where another file format comes
into play. Although high quality jpegs will give give a good
quality print the .TIFF file format is
better. It remains the same quality no matter how much it is edited
and saved. Jpegs can deteriorate if they are altered in any way and
the re-saved. TIFF's have a much larger file size but this is not
important for photographs or graphics that are only to be saved on
the computer hard disk for printing or viewing. However, if you
want to share a picture with a friend by sending it in an e-mail
attachment it is normally best to send it in the jpeg file format.
This has a greatly reduced the file size compared to a TIFF. Less
file size means faster upload and download times. Sometimes, there
is nothing worse than downloading a photograph with a large file
size that takes about 20 minutes to complete. There is no way the
recipient knows what they are downloading until the download is
complete. All they are aware of is that something with a very large
file size is slowing down their e-mail program. This is why, when
it comes to transferring photographs via e-mail attachment, it is
perhaps best to open the TIFF photograph and then save it as a
D.P.I. Another factor relating to
picture quality and file size in both GIF and JPEG
formats are the 'dots per inch'
(d.p.i.) that an image is made up of. The
more dots per inch a GIF or JPEG has means better image quality
but, unfortunately, the trade off is a larger file size. Dots per
inch can be specified within a photo/image editing program.
For picture being processed for viewing in a
web page or on the computer. The process might typically
involve setting the image to a d.p.i figure
of 72 or 96 and then reducing the picture size to something like 3x2
inches. When saving the image, an amount of compression can be
applied to it (less compression means better
quality but larger file size).
If only part of the
photograph is needed for display, cut (or
'crop') it to the required section first and then carry out
the size, d.p.i and compression procedure.
If the image is for printing set the
size to anything that will fit onto the paper and set the d.p.i to
something like 200 or 300. Don't worry the size it appears on the
screen. It's what the size figures say that matters.
All the same rules apply when scanning a graphic or photo into
A properly processed jpeg photo can
look like the one above of the author (but, of
course, the subject will probably be better!). This was
cropped from part of a larger photo using an art/photo program and
then processed to bring it to the required size and picture
With a little experience such things as removing the original
background and putting in a different one can be achieved. The
photograph originally had a window and the odd bit of furniture in
the background but, as can be seen, all that has been removed.
Graphics work can be an interesting and
involved subject. It is also a little difficult to put into
words. Experimentation is the only way to get to grips with
creating good images. There is much juggling of image quality,
d.p.i setting, colour reduction and a whole host of other things to
consider when presenting images for computer display or printing. I
hope this has been a little help in understanding some of it.
If you read all this, you are even more of a hero than I am for