by Mark Larmand

The first thing we'll do here is to explain about the 'Sample #3' graphic we saw in the previous section. If you remember, we were having a problem saving that image using the Web-safe palette.
May 1999

The main concern was that because our image contained gradient areas the 216 Web palette caused some blotching or pixelation to occur in those areas, even after dithering was applied. That was because those intermediate colours in the gradient were not found in the Web palette. To help remedy that limitation I created a new version of the original 216 palette version that didn't convert well. Here is the original problem version again. And to the right of it is the new version I created with some alterations done to work around the 216 palette's limitations in this case.

The first and most obvious thing I did was to shrink the image's dimensions. One reason for that was because it didn't 'need' to be as big as it was. The second reason was because by reducing its size I thereby reduced the visible amount of 'problem' areas in the image. Thus the pixelation was minimized. And at the same time I reduced its file size. Which is a good thing.

Here is a list of the other alterations I performed and why:

1. Further reduced the amount of pixelation by creating a brighter gradient area. Done by simply increasing the amount of light colour used, and moving the shadowed area closer to the bottom of the image. I then replaced the black in the gradient with the darkest red in the Web-safe palette (51,0,0). The reason for this was because there are more shades of red in the 216 palette than black. Thus making the image more Web-compatible. A similar result could also be achieved by using the darkest blue in the 216 palette (0,0,51). This step also added more of the solid yellow Web safe colour to the image, and removed some of the intermediate non Web safe colours used originally.
2. Changed the colour of the word 'Example'. Done because as I moved the shadow closer to the bottom of the image it became darker behind the text, blocking out the bottom of the word. I used a dark red, (one shade lighter than for the gradient shadow - 102,0,0), because it contrasted just enough with the yellow to be legible. If I was to use any equally dark colours containing blue for the text, it would appear more as a black against that yellow and not have resolved the legibility problem.
3. I completely removed the largest gradient area, in the circle. Even after sizing the image down, this area was still too big to correct fully without having to add more colour to the image, thus increasing its file size. I chose an earth-tone colour that complimented the pale yellow of the number as well as the bolder yellow in the gradient. Another option here would have been to use black. But that tended to wash out the bottom of the circle where the gradient fades to the dark red.
4. The last thing I did was to use the same pale yellow in the number (the lightest yellow in the 216 palette - FFFFCC), to create the illusion of a hard plastic surface on the handle part of the image. All I did was create a 2-pixel straight line with the pale yellow and position it 1/4 of the way down from the top of the handle. This 'colour trick' can be a valuable one for creating such effects, but will keep file sizes to a minimum while retaining the image's original quality, because the line is a solid colour and not another gradient laid on top of the first one. More important though, no blurring has to be applied to it, so no intermediate colours are introduced into the image that will later create blotches or pixelated artifacts when we save the image.

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

Use Colour Schemes

One of the best ways to create fast-loading pages and get the best results from using the Web palette is to limit your colour schemes to somewhere between 3 and 6 colours. When you use every colour in the rainbow for the 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. Plus, using a specific scheme or theme (colour and layout) will enhance your pages by giving them a particular look and feel that is cohesive across your entire site. If you need a demonstration of this technique, just have a look at any big corporate sites. 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.

Experiment with Dithering and Palette Size

When saving larger or more complex images as Gifs, keep a close eye on the file size when applying dithering. And tweak the image's colour palette to remove any unneeded colours.

Once you've corrected any banding or speckling you should then start reducing the amount 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 is not enough to maintain the quality, increase the colours by half of 64 (i.e. add 32). Continue this method of adding and subtracting colours until you get the fewest amount of colours used while maintaining an acceptable 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.

Every Kilobyte Counts

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

Here is a comparison between 6 images. Group (a) was saved using 16 colours from the Web-safe palette, with no dithering. Group (b) is the exact same images, but 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.

Group (a)	131 bytes	131 bytes	131 bytes	131 bytes	131 bytes	131 bytes
Group (b)	878 bytes	878 bytes	878 bytes	878 bytes	878 bytes	878 bytes

An odd thing to note here is how every image in each group is the exact same file size. Gif compression is based more on how many colours you use, and not which colours you use. That knowledge in itself can help you to 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 amount of colours from the Adaptive palette as we did the Web palette, and 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 the Web palette does. But since I don't have a degree in this particular area, that is simply my best guess. Although, you don't have to know why it happens to make good use of the knowledge.

The Most Over-used Effect on the Web

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

These two other versions, saved with the exact same palette options as the above image, are using 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.67 kb, and the horizontal gradient button below is 1.66 kb, which is the smallest of the three.

If these were larger images, you would notice an incremental increase in the difference of their file sizes. This doesn't mean you shouldn't use this gradient effect. By all means, it's a pleasant effect. It just means you should use it with caution, especially on larger images.

When Good Jpgs Go Bad

You might be wondering if it would be a good idea to save those above 3D buttons as Jpgs instead of Gifs, since Jpg compression works better on images with subtle colour blends, right? Well, that is a viable option indeed. However, it has been my experience to notice that with certain types of gradient effects, Gif is the right choice to make.

Here is a Jpg version of the above diagonal gradient effect. The quality is not only a little better than the above Gif version, but the file size is a lot smaller also - only 99 bytes (less than 1 kb). So in this case, yes, Jpg worked better. Why? Because in this case the gradient effect is continuous throughout the image. There are no real solid, flat areas of colour, other than the drop shadow. Jpgs can handle that well.

What Jpgs do not handle well are when images contain areas of both flat, solid colour and subtle gradients only in certain areas. We'll refer back to the this 216 Web palette image from a previous section: this is the original Gif version.

Here you'll notice that this particular image has both solid areas of colour and a subtle gradient effect as well. It is in this instance that using Jpg as your format choice would not yield the best results. The image below is a 'zoomed in' example of how Jpg compression handles images containing both solid and graduated colour schemes combined. I compressed this Jpg to be almost the exact same file size as the Gif version, and this is what happened.

See how Jpg compression created blurred anomalies around the red letters? And also in the flat-coloured area behind the number? The gradient areas look okay, but we need the entire image to remain clean and sharp, not just the colour blends. So in this case, Gif wins for quality, even if the file size had to be a little bigger it would still be the better choice.

Jpgs are not forever - Gifs on the other hand are recyclable.

Jpg uses a compression format known as 'lossy'. Gif uses what's called 'lossless' compression, and no data is removed from the original image palette once its saved. Lossy compression means that every time you save an image or photo as a Jpg, the compression method removes certain data from the image. What it removes are details that it believes the human eye will not miss if taken out. And for the most part, it's true. That's why Jpgs look as good as they do when used for photographs and complex art work.

Once you've saved an image as a Jpg however, you can not open it up in your graphics program again and expect to get the same quality results as the first time it was saved. And each consecutive time it's re-opened and saved it only gets worse; until it's no longer savable. So make sure if you plan to re-edit anything you've saved as a Jpg, that you've saved a copy of the original photo or art work. That way you'll have the best possible graphic quality to start over with. I've noticed that highlights are removed first before darker tones. That can result in a loss of clarity or sharpness in a photo, as well as a subtle overall darkening of a photo if compressed too much. This effect is also what produces blurred anomalies in gradients.

• Which format should I use?
  
  
• Making the Best of Both Formats
  
  
• Poking the Pixel