Pixel Anatomy 101

Here are some other things you can do to maximize your use of the Gif format.

1) Use colour schemes

One of the best ways to create fast loading pages and get the best results from the Web palette, is to limit your colour schemes to between 3 and 6 colours. When you use every colour in the rainbow for images and page elements, the visitor's browser and operating system will play a larger role in how fast and well your graphics are displayed for them.

Using a specific scheme or theme [colour and layout] will also enhance your pages by giving them a particular look and feel that's cohesive across your entire site. If you need a demonstration of this technique, just have a look at any big corporation site. It's quite common and produces very 'professional' results once you get the hang of it. You'll find that a good understanding of colour theory and the elements of art can be beneficial in this respect.

2) Experiment with dithering and palette size

When you save larger or more complex images as Gifs, keep a close eye on the file size when you apply dithering, and tweak the image's colour palette to remove any unnecessary colours.

Once you've corrected any banding or speckling you should start to reduce the number of colours used in the image's palette. Start by reducing from 256 to 128 colours. If there's little change in your image and it still looks acceptable, reduce again by half, to 64 colours. If 64 isn't enough to maintain the image quality, increase the colours by half of 64 [i.e. add 32]. Continue this method of adding and subtracting colours until you get an image that uses the fewest colours, but simultaneously maintains an acceptable level of quality.

My experience has shown that, usually, a 16 colour adaptive palette with dithering applied will produce satisfactory results for most types of images suited for Gif compression. More complex or larger images, using multiple gradients or subtle blends, may sometimes require a 32 colour palette with dithering applied.

3) Count Your Kilobytes

Knowing some of the contributing factors to larger file sizes can help you use the Gif format more effectively.

Here's a comparison between 6 images. Group (a) was saved using 16 colours from the Web Safe palette, with no dithering. Group (b) contains the exact same images saved using 16 colours from an Adaptive palette, with no dithering. Take note of the increased file sizes in group (b). I've put a 1 pixel html border around the white squares so you know they're there.

An odd thing to note here is how every image in each group has the exact same file size. Gif compression is based more on the number of colours you use, and not which colours you use. That knowledge in itself can help you understand how to create images with smaller file sizes.

Another thing to note is how the file sizes increased in group (b) (even though we used the same number of colours from the Adaptive palette as we did the Web palette), though there is no difference in colour information between the two groups.

Knowing that a Gif stores control data for images in its header, we can only assume that the data for the Adaptive palette takes up more space than does the Web palette. But as I don't have a degree in this particular area, that's simply my best guess. However, you don't have to know why it happens to make good use of the knowledge!

4) Optimise the Most Over-Used Effect on the Web

This is the 3D effect where an imaginary light source shines down from the top left of the page, creating a highlight and shadow effect on buttons, interfaces and other graphic elements. A drop shadow is sometimes used to increase the effect.

Unfortunately the effect isn't the only thing that's increased. This 'diagonal' 3D effect is also the one that creates the larger file sizes of a lot of graphics that use it. This button's file size is 1.74kb.

These two other versions, saved with the exact same palette options as the above image, use a vertical and a horizontal 3D lighting effect instead, and both are smaller in file size than the diagonal effect. I prefer to use the 'top lighting' effect myself. The vertical gradient effect is 1.67kb, and the horizontal gradient button below is 1.66kb, which is the smallest of the 3.

If these were larger images, you'd notice an incremental increase in the file sizes. This doesn't mean you shouldn't use this gradient effect, it just means that you should use it with caution and forethought -- especially on larger images.