Pixel Anatomy 101

Footnote for the 256 Adaptive Palette: Be Picky

If you're creating an image that uses only a few colours, then choosing a 4bit [16 colour] palette will most often do the trick. And if there are no gradients in the image, don't bother using dithering unless the image contains curved lines. But even then, check how it looks without dithering first before adding it. Dithering can help to smooth out the edges of curved lines in flat two dimensional graphics, but will increase the file size a bit when doing so. One common anomaly created by dithering is speckling around the edges of your solid coloured shapes.

That can indicate two things:

1. dithering should not be used.
   
2. you need to add more colours to the image's palette.

NOTE: some graphics programs do not provide such control over the final image palette while in the Saving mode. In that case, do the best with the options you do have. If your program is Photoshop Plugin compatible, a good inexpensive investment would be Ulead's Gif/Jpg SmartSaver.

Here's an example of when and when not to apply dithering, and why you should experiment with it before saving your final image.

On the left is a gradient ball image 30x30 pixels in size. This image was saved using a 4bit [16 colour] Adaptive palette, and with NO dithering applied. Most images that are 40 pixels or less in size and use gradients will usually not require dithering. Instead, use dithering sparingly for larger images, such as the one below.

And this is the same image but 15 pixels larger, so 45x45 pixels [640 bytes]. It was also saved with a 4bit [16 colour] Adaptive palette, and with NO dithering applied. Note how the gradient begins to show banding between the shading from light to dark? That could be fixed by applying dithering to the image, with an increase in file size [708 bytes]. Or, you could also increase the number of colours in the images palette to 32 instead of 16, and that would also smooth the gradient, but with a slightly larger increase in file size [1.65kb].

Saving larger or more complex images as Gifs

If you're creating an image that uses a large amount of different colours, including gradients, don't be afraid to use the Adaptive palette when saving. The method used by this form of compression to determine colours is fairly simple to understand. Basically put, when choosing Adaptive as your palette option you're asking your program to save your image using only the best and most important colours that are in the image. The rest will be removed. That does not always mean it will use all the original colours that your image started with, but it will most often make the right choice when it does choose which ones to use.

When you first choose to use the Adaptive palette, use all 256 colours with dithering. After your program has made it's choice of which 256 colours to use, [from the thousands or millions that may be in the original], look at the preview of your image if you have one and see how close it looks to the original. If you still notice any blotching or colour banding, then that would be a good indication that Jpg compression might be the better way to go.

To find out more about the differences between the Web Safe and Adaptive palettes, and how they behave, see the section Poking the pixel.

Using the Jpg format

When talking about using the Jpg format for Web graphics, there's not really a whole lot to say. Most often Jpg is the format of choice for photos or graphics containing complex graduations. Basically anything non-illustrative in nature.

A couple of key things to remember about using photos on the Web is that you should try to keep their dimensional size within reason. In other words, if it's only purpose is to catch a reader's eye, or show a graphic example of the subject matter within a paragraph of text, shrink it down to the point where it's almost indiscernible, increase it by 5 to 10 pixels and save it. After down sizing a photo, it can tend to get a little blurred due to anti-aliasing. Applying a sharpening filter can usually bring out the detail that anti-aliasing removed. This method can be applicable to most situations.

Another thing about saving photos for the Web is that using a medium compression ratio will usually suffice. Sometimes this is dependant on the size and content of the photo. Your own eyes will be the best judge.

To see a comparison of how Gifs and Jpgs each handle gradients, go to the Poking the pixel section.