Quantcast

Optimizing Gif images for the web – Part II

Get the WebProNews Newsletter:


[ Technology]

In the previous article on optimizing GIF images for the web, we learned a few basic things about the GIF image format – who developed it, the (Limpel-Ziv and Welch) compression algorithm it uses and how we can decrease the file size of a GIF image by removing unwanted areas and reducing the number of colors.

To recapitulate, the file size of a gif mainly 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

In this second part, we’ll now learn how the complexity of the image determines its file size and thus, learn the correct usage of GIF image files.

Image Complexity – GIF compression algorithm revisited

The LZW algorithm is suited for images with large areas of one color. Such images will be compressed far better than those that do not have such color blocks. 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. It is important to remember these two points when creating or saving gifs.

Images with areas of flat color
Gifs are more suited for images with areas of single colors than JPEGs, the other file format prevalent on the web. This is clearly visible from the images below.

8 color gif with areas of flat color
An 8 color gif: 920 bytes.
Note the clarity of the image and the sharp edges of the colored squares.

Jpg image with areas of flat color
A JPG image: 3174 bytes.
Notice the increase in file size (more than 3 times that of the gif) and the loss in clarity.


Images with gradients
Gifs that involve a vertical color change will be compressed much better than those where the color changes horizontally.

Gif with a gradual vertical color change
Gif with a gradual vertical color change: 1471 bytes

Gif with a gradual horizontal color change
Gif with a gradual horizontal color change: 2297 bytes

Image complexity and limiting dithering
Dithering increases the number of colors in a gif. Also, it makes the gif very complex. LZW algorithm compresses areas of flat color very well but dithered images do not have such areas. Hence, dithering increases the file size considerably.
I’ve found the Replacer tool Paint Shop Pro Color replacer tool in Paint Shop Pro very helpful in removing extra colors introduced by dithering.

Dithered Gif
Dithered Gif image: 4415 bytes

Dithered Gif
Gif image without dithering: 3313 bytes

Photographs
Gifs are not a good choice for photographs because of two main reasons

1). Photographs generally contain more than 256 colors.

2). Photographs are very complex images and the LZW algorithm is not able to do justice to the file size.

256 color Gif image
256 color Gif image
26,779 bytes
Jpg image
Jpg image
6,675 bytes

A detailed example
Having understood the nature of the GIF file format and the factirs that determine its file size, let’s put all these in practice by working on an example.

The image below is of devwebPRO and comes along with this newsletter. We’ll now reduce the image to 1702 bytes using Paint Shop Pro (version 5), which is a great tool for web graphics. Check my brief review on PSP here.

devwebPRO - Original image
Image size: 3640 bytes

What will we work on?

1). Replace anti-aliased small text with clearer text.

2). Reduce the number of colors in the image

3). Reduce image dimensions (You’ll notice that the image has extra width and height)

Replacing anti-aliased small text with clearer text
Open the image in PSP and using the selection tool Paint Shop Pro Selection tool, drag a selection around the anti-aliased small text. Fill the selection with the background color #CC0000 Background color of devwebPRO image
Now, choose a small font (I’ve used Terminal point size 6), uncheck the anti-aliased checkbox in the Add Text window and place the text in the correct position.
Why did we remove anti-aliased text?: Anti-aliasing causes smoothing of text outlines. However, for small text, it makes it hard to read. Also, anti-aliasing increases the number of colors in the image resulting file size increase. Click here to know more about anti-aliasing.

Reduce the number of colors in the image
You can reduce the number of colors in an image using Colors – Decrease Color Depth. Since, this does not do a good job always (how will a program know which color to discard and which to keep?), we’ll take a more intuitive approach by employing the Color Replacer tool Paint Shop Pro Color Replacer tool.
When you click on the foreground color in the Color Palette, PSP opens the Select color from palette window, which contains the colors in the image. For Gifs, this window contains small squares denoting the colors in the image. (below)
[Note: In PSP version 7, the one I use presently, displays the colors in the Color Palette. You can use the Dropper Paint Shop Pro Dropper to select the foreground and background colors.]
Select color from palette window
Whether you are working from the Select color from palette window or the Color Palette, you’ll notice that some colors are quite similar to each other. These can be safely replaced by one color (any color from the set of silimar colors) and the change would not be perceptible to the human eye. (In the image below, I’ve marked similar colors in the image with outlines. Outlines are of yellow, cyan, blue, magenta, green and black)
Selecting similar colors
The Paint Shop Pro Color Replacer tool is quite indespensible for this job. Activate the Color Replacer tool and change the “Tolerance” to 0(zero) in the Control Palette. Then, select the foreground and background colors and double-click over image. All instances of the background color will be replaced by the foreground color. (Note: It is advisable to keep the color replacer brush size at a high value… something like 50)
So, for example, I pick the first color in the palette as the foreground. The third color is selected as background. I then run the Color Replacer over the image. Now, the image will have 19 colors instead of 20. I then select the fifth color as the background and run the Color replacer once again; the image now has 18 colors. The same process is repeated with the 7th, 13th and 14th color in the palette. This results in an image with 15 colors. Hence, 5 colors have been replaced with the instance of the first color and the change is barely perceptible. (The 3rd, 5th, 7th, 13th and 14th colors are a set of similar colors – highlighted by blue outline).

After removing similar shades of a color, we find that our image contains only 8 colors. So we reduce the number of colors in the image to 8. (Click on Colors – Decrease Color Depth – X Colors and then enter “8″ in the Number of colors text field. If the X Colors option is greyed, first increase the number of colors to 16 Million Colors (24 bit) and then decrease the colors).
Here is the resultant image
Image with file size much reduced Image size: 1797 bytes

Reduce image dimensions
By replacing the anti-aliased small text and decreasing the number of colors from 20 to 8, there is a 50.6% reduction in size! Our final step is to crop the image and reduce the extra width and height, which can be done easily using the Crop tool Paint Shop Pro Crop Tool.

Cropping takes out 95 bytes leaving an image of 1702 bytes
Final Image Image size: 1702 bytes


Question revisited – Why should we optimize images?
Just a case in point. Let us assume that devwebPRO sends out 10000 (ten thousand) HTML newsletters. Now, if they use this reduced image it will save the transfer of 19380000 bytes or 19.38 MB… Need more explanations???


I’ve been a fanatical proponent of web graphics optimization. In fact, I truly believe that the skills of a web developer/designer can be judged by the way they create web images (in addition to how they code HTML, JavaScript etc.). If you want to learn more about web images, have a look at my articles in the “Graphics” section of WebDevelopersNotes.com. Finally, if you’ve enjoyed this article write to me with your comments. – ManishSharma.com.

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.

Optimizing Gif images for the web – Part II
Comments Off
About Manish Sharma
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. WebProNews Writer
Top Rated White Papers and Resources

Comments are closed.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom