A Gif image can contain a maximum of 256 colors. The more the number of colors in a Gif, the more its complexity, and hence, larger the file size. So it is important to decrease the number of colors in a web gif image to decrease its file size. What we need to do it so remove the information for extra or unwanted colors to decrease the web image size.
The previous article (Optimizing Gifs) discusses the first step in decreasing web Gif image file size by cropping the unwanted areas – reducing the physical dimensions of the image. This article details how we can decrease the number of colors in a Gif which brings about further reduction in file size yielding a better optimized web image.
All popular image manipulation and graphics software have a color reduction feature. With this tool one can reduce the number of colors in a Gif. For example, take a look at the two very similar images below. It will not be surprising if you will find the two images identical… but they are not! The two differ in color information. It is not necessary that all colors need to be present as pixels in the image. The very fact that an image has information on more colors increases its file size.
256 color gif: 998 bytes
4 color gif: 234 bytes – Reducing information on colors, decreases web image file size.
Here is another example.
256 color gif: 1044 bytes
8 color gif: 275 bytes
You will notice that if we reduce the color information or the number of colors that occur in an image as pixels, the decrease in file size is substantial. The images that have more color information are 4 times the size of the reduced images.
An important point to remember is that reducing the color depth involves a trade-off in the quality of the image; however, most of the times, your gifs will look just fine.
Here are a few examples on controlling color depth. Note the difference in file sizes for each image.
4 color gif: 521 bytes
8 color gif: 706 bytes
16 color gif: 907 bytes
256 color gif: 1896 bytes
6 color gif: 879 bytes
16 color gif: 1384 bytes
64 color gif: 3288 bytes
As I mentioned above, decreasing the number of colors in a Gif image reduces the quality – it leads to pixellation. For example, some of you might not like the 6 color Gif (879 bytes) of the blue can (above). You would definitely have noticed the pixellation at the top and botton of the can. However, take a look at the 16 color Gif (1384 bytes). This image is less than half of the original file size (3288 bytes) and the quality difference it hardly noticeable to the human eye… right?
One feature that definitely increases the number of colors in an image is anti-aliasing. You can read more about it in separate articles – Anti-Aliasing and Antialiasing and “Halo” formation. In order to make the edges of objects and text smooth, anti-aliasing algorithms add pixels of additional colors.
Before I continue, let me clarify my stance – I am not against anti-aliasing. In fact I use it all the time – BUT I use it only when it’s required. And this is what is important. Do not use anti-aliasing indiscriminately. First decide if it is really necessary… just because you can do it, doesn’t mean you should! I will let examples speak for themselves.
Here is a typical icon from a standard web site navigation menu.
Anti-aliased image – 16 color Gif: 336 bytes
Non Anti-aliased image – 2 color Gif: 193 bytes
The question is – would you want to use anti-aliasing on this image? If your client insists… maybe!
Here is another example:
Anti-aliased image – 6 color Gif: 589 bytes
Non Anti-aliased image – 2 color gif: 347 bytes
I would have definitely used the anti-aliased image because the non anti-aliased one is so very lame (notice the pixellated or jagged edges). But take a note at how I have decreased the number of colors in the anti-aliased image so that its file size is a minimum.
To save an image in Corel Xara (version 2.0), click on File – Export and select .gif extension from the drop down menu. The Gif export bitmap options dialog box contains several options. You can control Dithering and choose color depth (8 bit, 4 bit or 2 bit). You can also specify the exact number of color you want in the image by clicking on the 256 (8 bit) radio button and entering the value in Number of Colors text box. You can select transparency and interlacing and the final dimensions of the image. Another helpful feature of the software is the preview button.
When you Export a Gif image in Adobe PhotoShop version 5.0, the program provides a drop down menu through which you can select the number of colors in the final image. You can also choose the palette and transparency. Higher versions of the software are more suited for web graphics and have several options.
We have now gone through two steps in decreasing web gif image file size – decreasing the physical dimensions and reducing the number of colors. In the next article we see how complexity of an image affects Gif file size and how we should actually create our web Gif images.
The icon of the "Reading List" on Mac OS and iOS is based on Steve Jobs glasses. It's a kind of tribute to the Apple founder. [more...]