One thing that I have had dozens…maybe even hundreds of people ask me over the past several years is: “What is ‘THE’ way to optimize ____?” I have my favorite programs, processes and procedures, of course. However, my response to that question is generally: “It depends upon the image.” That sounds as though I am passing-off the question or giving a politician’s answer to the question of what ‘is’ is! However, it is really true…and depending upon the image you put in front of me, I will generally use different programs and procedures to arrive at the smallest image sizes.

As an example of what I am talking about, I visited dictionary.com today and saved a copy of their “Search” button for this example. One quick look at that image and I knew that it could be saved at a smaller file size using 8-bit .png format. HOWEVER, not being sure at first-blush if that image was using transparency, I decided to avoid the use of xat.com’s Image Optimizer (which doesn’t play-nice related to transparency). That left me with the following quick, easy courses of action:

The above image is the original image on the dictionary.com web site. It is 1,744 bytes in size, and is saved at 240×100 pixels. I’m honestly not sure why it is saved at 240×100 pixels, as it is displayed on the site at a much smaller size. However, for the purposed of this experiment, I decided to leave the image’s pixel dimensions alone.

Optimization Process One: PNGOUTWin –> PNGSlim = 1,086 bytes

I converted the .gif image to .png format using PNGOUTWin in effort to preserve any possible transparency saved within the image, then finished-off the optimization process in PNGSlim. Good results…a 38 percent improvement! However, more can be done.

Optimization Process Two: SuperGIF –> PNGOUTWin –> PNGSlim = 1,002 bytes

On my second attempt at optimizing that graphic, I added a first step of SuperGIF to the mix. Often-times, I will find that optimizing a .gif image BEFORE converting and then optimizing it as a .png will shave a few more bytes off final file size, and it worked well in this case, saving an additional eight percent off the image’s size. What is really interesting though is that the gray color in the Search button is now slightly darker after introducing SuperGIF to the process. I don’t think it detracts from the quality/appearance of the image in any way! However, a good thing to note for future reference.

Optimization Process Three: SuperGIF –> PngOptimizer –> PNGOUTWin –> PNGSlim = 1,001 bytes

One my third attempt at optimizing that Search button, I added in PngOptimizer as an additional step after some quick work in SuperGIF. Those results were negligible…saving only 1 additional byte in image size (something that can occur from time to time when optimizing the same graphic multiple times).

The moral of the story?

1. There is no magic-bullet, one-size-fits-all when it comes to image optimization. Every image and the way it was constructed and saved can benefit from a slightly different optimization procedure…at least if one is concerned with achieving maximum file size savings.

2. If you optimize an image in its original file format BEFORE you convert and then optimize it in its optimal format, you can often-times achieve even smaller file sizes.

A fun little experiment, and one that I hope was useful for anyone out there who is reading this blog.

Posted by datonn on Tuesday, July 8th, 2008 at 11:06 pm.