February 18, 1997
How to Index Your Graphics Correctly

So you choose all your colors for your lovely graphic and then you index them to an adaptive palette... WRONG! The sad thing is, you can choose all the right colors from the safe palette, but if you don't index the graphic correctly, you work is all for naught. "Index" means your graphic software groups all the colors used in the graphic into a palette of its very own. While there are sometimes very good reasons to use a special palette for an image, when you can, you should always try to use the safe palette to avoid the dithers.

Here is the Indexed Color window from Photoshop 4.0. I have selected Custom Palette so that I can index my image to the Safe Palette CLUT.

Note: Generally speaking, Gif Girl chooses the "none" option for dithering when indexing graphics, as it tends to muddy an image. This is usually a matter of trial and error, though, so see what works best for the image.

In 3.0, you'll get a window that asks you to select what kind of palette you want to use. Choose "Custom." This should then ask you to choose the CLUT... once again, you should select the Browser Safe Palette.

In 4.0, Adobe got its head screwed on a bit more correctly and gives you many more options for indexing graphics. You can choose from a number of palettes including one called "Web," which is their version of the Safe Palette.

Here is the Exact Palette window from Photoshop 4.0. I have selected this will remove from this image's palette any unnecessary Safe Palette colors.

Note:Windows machines usually give you a pretty accurate read on file sizes, but Macintoshes are quirky when it comes to this. To get an accurate read on the file size with a Mac, go to your Finder (the desktop) and select the image. Then press Command (Apple key) I... you should get a small window that gives you information about the image. Next to "Size", there are two numbers... the first one is rounded up for some unknown reason and is not an accurate file size. The second, in parentheses, is a more accurate number.

But that's not all, folks. If you've gone through the trouble to use only a few colors in your image, there's no reason to keep all 216 safe colors in a graphic palette. So once you've made the first conversion from RGB to Indexed with the Safe Palette, then convert the graphic back to RGB. That's right, convert it back! Then convert it once again to indexed mode. The second time around, you should automatically get the option of an "Exact Palette." What Photoshop is doing is analyzing the image and keeping only the colors necessary for that particular graphic from the safe palette. This can substantially reduce the size of the file! Test it by saving the image a number of ways with different file names, and see the difference in bytes for yourself.

Now, if you're real lucky, you might have a graphics processing software package like Debabilizer that can strip even more off your file size. Plus, if you are going to make a graphic transparent (which means you remove the background color so that the image appears to float and doesn't have a plain old rectangle outline), the image will be even smaller. Whoopee!

How to Load the Safe Palette CLUT
Back to the Intro