GIF Reference Article
This article is reprinted in full from
without permission. Please read the web version of this document if possible. Unfortunately web
Pages disapear with great frequency and I feel the following article is of great merit.
Creating a GIF file could hardly be more different than creating a JPG. To begin with rather
than simply scanning a photograph the illustrative image has to be originated from scratch.
To create a typical test GIF, I created a similar 300 x 400 blank image with a solid green
background. I then added some simple blue text which thanks to Photoshop 5’s new type
layers remains editable. I than wanted to add a triangular red flash effect behind the
text but above the background. As Photoshop doesn’t offer any shape handling beyond the
basic rectangle and circle tools this is actually quite difficult and eventually
involved adding a new layer, creating a path with the pen tool and applying a fill
to that. For serious logo work I would soon have had to turn to importing files
from a drawing program like Illustrator.
Theoretically I could then use Photoshop’s Save As Copy command to save the
image directly to GIF, but the options provided here are virtually useless
as they give no feedback. Essentially GIF compression works by cutting down
the 16 million potential colours in an RGB image to a palette of 256 or less.
As such it immediately cuts the size of the file by a third from 24-bit to 8-bit.
Moreover it then enables high levels of compression of the resulting areas of flat
colour by enabling sequences of the same colour to be abbreviated so that,
for example, a 100 green pixels in a row can be stored in just two bytes as
Green(100). As such successful GIF handling is all about choosing the right
palette and ensuring that the original colours are converted to this palette
exactly as you want them to be.
To be able to do this it’s essential that you can see what’s happening and in
Photoshop the only dialog that offers the necessary control with a live preview
is the Image>Mode>Indexed command. As we don’t want to lose our original RGB
image it’s first necessary to Save As a new file, which makes the fact that
Photoshop insists on flattening all layers before changing to indexed mode
slightly less irritating. Because we designed our image with only three
colours it’s not surprising to find that the preview of the indexed image
with the default Exact palette option is identical. What is surprising is
that the number of colours reported in the image is 139! This is because
Photoshop automatically "anti-aliases" text, mixing the edge pixels of
the text with the background colour to create a much smoother and more readable effect.
Even so 139 colours is still well within GIF’s 256 limit and so saving
our file as a GIF is lossless in terms of quality. Moreover thanks to
GIF’s compression scheme it produces a file of only 10k, a compression
ratio of 35. For our simple test file, the GIF format has matched the
best compression ratio that JPEG could offer and with no loss of quality.
More interesting, however, is what happens with original images containing
more than 256 colours. To test this I replaced the solid background in
the original test file with two rainbow gradients, one horizontal and the
other vertical, and went through the same procedure.
This time rather than an Exact palette, Photoshop creates an Adaptive palette
based on the frequency with which each colour appears in the image. It then
has to map those colours that it is discarding to the colours it is keeping.
The default solution to this is to apply "dithering" which attempts to
simulate missing colours by creating a pattern of available colours to
fool the eye. Because the palette is adaptive our main colours for the
text and triangular flash are unaffected, but the background gradient
appears very different depending on which of the three main dithering
options is selected. "None" simply maps each pixel to the nearest
available colour which results in very noticeable bands. "Pattern"
creates less obvious banding but with a clearly discernible halftone grid
effect. Finally, "Diffusion" creates a much smoother though still clearly
In terms of appearance there’s no question that the diffusion dithering is
closest to our original image, but we also have to take file size into
account. For the image with the vertical gradient the option with no
dithering is 17k, but dithering pushes this up to 22k. Even worse, for
the image with a horizontal gradient the sizes are 28k and 32k respectively.
In fact this shouldn’t really be surprising. Dithering works by deliberately
mixing up pixels so that it inevitably breaks up the long sequences of a
single colour which is how the GIF compression scheme works its magic. This
also explains why the horizontal gradient is such a disaster as it virtually
guarantees that every pixel in its line is different to its neighbour. The clear
moral is to avoid GIF dithering and gradients if you can and as such I’m
happy to return to the simpler three colour image.
Copyright 1995-2002, Tom Arah, Designer-Info.com
Next -----> 7. File compression and Winzip