When to save images in GIF format

Wondering why your website logo looks a little dirty around the text? Or perhaps it's a little blocky and you don't know how to make it nice and smooth like most logos you see? When creating logos for your website you really need to utilize the GIF format wherever possible, rather than JPEG. Take a look at the following examples. The one on the left is a JPEG image, while the one on the right is a GIF...

The image on the left is a fairly common example of a logo saved in the wrong format. See the "dirtiness" around the lettering? That's what happens when a perfectly good image is saved as a JPEG at its standard compression factor (see my article about JPEGs for more on this). Also, note how the colors are "muddied"? The original image is much cleaner and brighter than this – much closer to the GIF on the right.

For images with very few colors and large solid areas, GIF is always a better, cleaner format to use. GIFs can have up to 256 colors – but if you're thinking of being restricted to a standard web palette of 256 predefined shades, then think again. I'm talking about 256 colors of your choice. Whatever colors your logo needs to look good, those are the colors you can have in your custom palette. Look at Google's familiar logo:

There are 256 colors in this logo. How do I know that for sure? Because any logo that uses subtle color variations to give the effect of rounded lettering is going to need the maximum number of colors available. This is a GIF, so its maximum is 256 colors.

When this logo was first created in a paint program it probably used thousands of colors – many different shades of yellow, red, blue, green, etc. But let's face it, the human eye can't distinguish between 200 shades of yellow, so why not just 20 instead? Heck, even 10 might be enough. Paint programs are very good at reducing the color depth to an acceptable "human" level, and in this way "true color" images can be reduced to a mere 256 color palette with hardly any discernible difference.

More about color palettes

When you create a logo in your paint program, you most likely do so with the full spectrum of colors available on your computer screen – over 16 million of them on modern monitors. The image on the right is a common mini-palette in paint programs, but this one only shows 7,130 different colors. However, clicking on one of those pixels will make available a load more similar shades. In the RGB (Red, Green, Blue) mode you have 256 variations of each channel; that's 256 x 256 x 256 = 16,777,216 available combinations.

So, with all these colors at your disposal, you can create your logo exactly as want. But when you're finished you should think about reducing the color depth to 256 and saving the image as a GIF. This is best for simple logos with just a few obvious colors like the examples on this page, or the Google logo, or even our own White Oak Design logo. For more complex, colorful logos using hundreds of thousands of colors (especially those with smooth, gentle gradients between light and dark), you might find it necessary to save the logo as a JPEG. But if you do, make sure you save it at "best quality" or "least compression" – again, see my article about JPEGs for more on this.

On the left is a typical GIF palette – 256 colors that are used in the logo below. Remember, this palette is the result of reducing the color depth after creating the logo with a full range of 16 million available colors...

If I'd been fool enough to create a logo using a standard predefined 256 color palette, my logo wouldn't have all the necessary colors to smooth the edges of the letters. For instance, suppose I picked a single shade of blue and a single shade of yellow. Then the logo might look something like this:

See how blocky it is? This is why you MUST start off with a full color palette – so that you can create text with smooth edges (known as antialias in paint programs).

Up close you can see why you need a proper full-depth palette to create your logo. To smooth the edge of the lettering you need lots of varying shades of the chosen colors, and you don't get this amount of variation if you start out with a 256 color palette. This smoothing process is fully automated as long as you start out with the full range of colors in the first place, and as long as your text tool has "antialias" enabled. The rest is simple – just write your text and it will automatically be smoothed around the edges. This applies not only to text but to other blocks and shapes in your logo. Then, when you've finished creating, reduce the color depth to 256 colors and the paint program will do its best to comply. It does this by sorting all the different shades and putting them into groups so that there are maybe ten or twenty very similar shades in each group. Then, one shade is picked from each group to represent the rest, and all the redundant colors are dropped.

Most of the time this method works well. You wouldn't think it possible for such a simple logo as the one above to need so many colors, but you can see for yourself the 256 color palette it uses. This logo works so well because it only uses two basic colors, blue and yellow, so can share the remaining 254 available colors between all those varying shades of blue and yellow. But other logos use more basic colors, thus reducing the amount of available colors for smoothing.
Most of the time the GIF palette is perfectly adequate. For proof, look again at the Google logo, which uses red, green, blue, yellow, and a small area of grey for the TM mark – not to mention the grey used in the shadowing, which itself needs smoothing around the edges.

Still not convinced? Wondering why you should bother reducing to 256 colors when you could just use a full palette and save it as a "best quality" JPEG, even though the filesize will be bigger? Let's move onto transparency...

Making the background of your GIF transparent

What if your website has a nice repeating background tile or image, and you want your logo to be placed over the top? This is where the GIF format really comes in useful. It allows you to choose any one of the 256 colors in your palette and make that color transparent. Here's what happens if I place my logo on a website that uses a background tile...

On the left is the logo with no transparent color selected, so the white background is plain to see. On the right I chose the white to be transparent, so that the website's background tile shows through. You can't do that when using JPEG format, only with GIF.

All articles:

Other subjects we're often asked about: Website optimization study: