Images are an integral part of the “web experience”. Without them a web page looks really dull; however, I have frequently come across web sites where the images take such a long time to load that I either go off to sleep or employ the most frequently used button of the browser – “Back”!
Optimized images are a hallmark of a good web site and they are the first indicators of the skill of the web developer. This is a two part article in which we’ll take a closer look at Gifs and how to optimize them for the web.
We’ll begin with two simple questions:
What is image optimization?
Optimization is the process by which the file size of an image is reduced to a minimum without changing (much!) the look of the graphic.
Why do we need to optimize web graphics?
Smaller file sizes result in faster downloads and presents the material on the web page quickly to the user.
Gifs – a little theory
The GIF file format was developed by Compuserve and is, sometimes, still refered to as Compuserve Gif. It uses the LZW (Limpel-Ziv and Welch) compression algorithm for 8-bit color images. It is the only image format supported by all graphical browsers.
The LZW compression algorithm contructs a color table for an image wherein each color value is matched to a pixel. Thus, images with large areas of one color will be compressed far better than those that do not have such color blocks. Hence, GIFs are more suited for line art and logos than other file formats.
Also, the algorithm counts the pixel change horizontally. Therefore, images that involve horizontal color changes will be larger than those that have vertical color changes.
The GIF compression algorithm is lossless, which means that no information is lost from the original image when its converted to a gif. (Note: If your original image contains more than 256 colors, then some information will be lost. However, once converted to a gif there will not be any further loss).
Gif Optimization
The file size of a gif depends on
1). The physical dimensions (width and height) of the image
2). The number of colors the image contains
3). The complexity of the image
Let us now look at each point individually and see how we can perform the optimization process.
Physical dimensions
All standard image editing programs come with a ‘Crop’ tool to remove any unwanted areas of an image. Using the Crop tool is quite simple.
In PaintShop Pro, click on the Crop tool icon 
. Left-click on the image and drag a selection. You can also fine tune the selection by dragging the outline. When done, click on “Crop Image” button in the Control Palette.
In PhotoShop, click the Selection tool 
. Left-click on the image and drag to select the region of interest. Click on the Crop button 
or click Image – Crop.
The number of colors
Gifs can contain a maximum of 256 colors. The more the number of colors, larger the image size taking longer time to load. Reducing the color depth obviously involves a tradeoff in the presentation 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.
6 color gif: 879 bytes
16 color gif: 1384 bytes
64 color gif: 3288 bytes
Reducing the number of colors with Paint Shop Pro (version 5)
- Open an image or create a new one.
- Click Colors – Count Colors Used to get an idea of the number of colors in the image. Note: Be sure to flatten the image else Paint Shop Pro will count the color in the active layer only.
- Click on Colors – Decrease Color Depth. Paint Shop Pro offers, 2 color (1 bit), 16 color (4 bit), 256 color (8 bit), 32K color (24 bit), 64K color (24 bit) and X color (4/8 bit) in the menu. the 32K color and 64K color have no use when it comes to Gifs since the gif file format can be a maximum of 8 bit. Hence, you should select 2, 16 or 256 color for your image.
- The X-color dialog lets you fine tune the image color depth. I’ve found it the very helpful. It lets you specify the exact number of colors in the image. You would have to play around a little, that is, decrease the number of color, then increase to 16 million colors and then decrease again to get a satisfactory image. All this might seem tedious but it would reduce the image size drastically. (Reducing image size gives me a sort of a kick, I love it!)
- Another tool I’ve found indispensible is the Color Replacer
. It lets me remove similar colors. For example, the image of a hand holding a blue can was initially a JPEG image that I had downloaded from the Web. It’s file size was 3179 bytes. Decreasing the color depth and employing the color replacer intelligently, I was able to reduce it to a 6 color 879 bytes gif image. That’s almost a 75% reduction in file size!
Reducing the number of colors with Corel Xara
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.
Reducing the number of colors with Adobe PhotoShop
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.
In the second part of this article, I’ll describe how the complexity of the image determines its size. We will also probe deeper in GIF image optimization process by working on an example.
Manish Sharma has been involved in web development since 1996. He heads
SimplyGraphix.com, a web development and advertising company in India, which
has successfully developed and promoted sites in real estate, insurance,
biotechnology/pharmaceutical, medical, software, medical, education, online
gaming/contests, financial and web portal industries.
He also runs Fontmagic.com, one of the largest font archives in the world,
and Webdevelopersnotes.com, an online resource for web developers.
