WebDevelopersNotes logo

home-icon Home / Graphics / Decreasing Gif file size – optimized GIFs – 4

Decreasing Gif file size – optimized GIFs – 4

Decreasing Gif file size – optimized GIFs – 4

Having understood the basics of optimizing gifs, let’s take a detailed look at an example.

The image below is of devwebPRO logo and comes along with the newsletter I receive from them. The newsletter is quite informative, but what struck me was the anti-aliased small text and so I decided to take this image and optimize it.

Original image size: 3640 bytes
devwebPRO - Original image

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.

Sponsored Links

What are we going to do?

  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. It is good for text in large font size, 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 that displays the colors that exist in the image. For Gifs, this window contains small squares denoting the colors in the image. (below)

Select color from palette window

You’ll notice that some colors are similar. These can be safely replaced by one color (any color from the set of similar 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 in yellow, cyan, blue, magenta, green and black)

Selecting similar colors

The Paint Shop Pro Color Replacer tool is quite indispensable 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 the 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 or better still double-click. 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 size: 1797 bytes
Image with file size much reduced

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

Image size: 1702 bytes
Final Image

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???

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The ElePHPant is the mascot of PHP. It carries the logo on its side. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy