Pixel Anatomy 101

Make the Most of Both Formats

Knowing What to Expect

Whenever you set out to create a specific type of graphic, it's advantageous to know ahead of time which format the image will be saved as. During the creation process there are certain procedures that can be utilized to help you take full advantage of each format's particular compression abilities.

To understand how to achieve good results using each of the two image formats, we're going to examine some key characteristics of each.

Using the Gif Format

You'll find that in the long run, Gifs have far more capabilities than Jpgs, and as such, they require more time and experience to fully master.

The first step when you set out to create a Gif image is to consider what palette you will use. For Web graphics, there should be no question here: you should always use the 216 Web Safe palette, no matter what program you have. As we mentioned before, this palette's specific set of colours has been designed to allow graphics to be represented equally well on both the PC and Mac platforms without dithering (no random anomalies), and is the industry standard used in Web design. Current tests though have shown that actually are some differences between the two major browsers, and how each renders the Web Safe palette. But we as designers currently have very little, if indeed any control over this problem.

You'll notice that there's a difference of 40 colours between the 256 and 216 palettes. Those 40 extra colours are the ones that are not common to both platforms when using an 8bit system palette (256 colours), and for this reason, they were removed from the Web palette. Although the Web Safe palette does have its own set of limitations, in most cases it works just as well as -- or better than -- a 256 adaptive palette.

Here's an image that was created and saved using colours from the 216 Web palette, with dithering applied to smooth out the gradients: file size = 2.95kb

Now here's the same image created using colours from the 216 Web palette, but saved using only 16 colours from a 256 adaptive palette, also with dithering applied: file size = 1.81kb

You'll notice in the top image that the gradient areas are somewhat blotchy, or pixilated, and the file size is a fair bit more than the adaptive palette version. That's because the intermediate colours that are needed to make the gradient smooth are not found within the 216 Web palette.

Even though dithering was applied to try and smooth out the gradual colour blends, it was only partially effective, and in fact was the cause of the increase in file size. This would be considered a weakness of the 216 Web palette, and if you're really insistent on using this palette, it's a factor worth noting before you create your Web graphics.

What we've just seen here is a good example of how it can sometimes be more beneficial to save images using an adaptive palette than using the Web palette. But it should be used more as a last resort whenever possible. Thankfully, though, it seems that most Web users today use at least a 16bit system palette with an 800x600 screen resolution: that's a plus for designers! So the adaptive palette is quickly becoming more popular.

An important thing to also note here is that, because we used colours from the Web safe palette to create our image, even though we chose to save the image with an Adaptive palette, the rendering of the colours on both platforms and in most browsers should be fairly satisfactory.

Notes on the 216 Colour Web Palette

What you see isn't always what you get

The 216 Web palette has limitations when applied to graphics that use gradients. The main reason is that the creation of gradients in an image, even when you only use 'Web Safe' colours, will create new intermediate colours that aren't contained in the Web palette.

Your graphics program will tend to deceive you here. As far as it's concerned, it doesn't have a problem adding the extra colours to the gradients, and making your image look as good as possible while you're in the program. But when you go to save the image using only colours from the Web safe palette, all the intermediate colours your program added to make the gradient look nice and smooth will be removed.

What you'll then see is a close representation of what the image will really look like in a visitor's browser. If you want to avoid having to repeatedly hit the Cancel button when you go to save an image, try to remember this fact before you start creating your images.

A fix for this Web palette limitation

Because every visitor to a site will have a different system setup, browser specifications, and surfing habits, Web artists should pay close attention to the amount of 'screen real estate' they use for with their graphics. Unless a site is geared specifically toward showing off graphic works, textual content will always be more important than the images that accompany it. But this fact can be used to a designer's advantage in the long run.

Watch how I conserve space on my Web page when I shrink the above 216 Web palette image [the top one] down in dimension, which simultaneously solve the problem of the pixelation anomalies in the gradient areas.

To find out exactly what I changed about the image and why, and how I'm fooling your eyes, go to the "Poking the pixel" section.