среда, 1 февраля 2012 г.

Image optimization

Why image optimization is important for web site performance?

The HttpArchive statistics can give you an answer to this question. According to it, an average image size on the page is constantly growing, as well as the amount of images on the page.

For example, images already on average take more than 62% of page size.

That is why I think image optimization is important, and that is why I want to share with you results of my research of PNG optimization tools. I selected five top rated tools for comparison:

I took 3 PNG images to compare optimization results of these five tools. I took one small icon, one sprite and one screenshot of HttpArchive, which I presented in the beginning of this post.

PNG Optimizer

This tool is an .exe file, which replaces original PNG file with optimized one and keeps original under the same name but with underscore in front of it. I personally would prefer to keep my original file under original name, but us be thankful that this tool keeps it at all, many others don’t.

We got the following optimization results:

- Small icon kept pretty good quality and size decreased almost 5 times.

Sprite kept the same pretty good quality, size became 2 times smaller, but both images turn out to have the slightly lighter colors.

On the chart screenshot difference in colors was not so important and was not visible for me, but size was reduced only by 4%.

Dynamic Drive

This is online tool, optimizing images, offers you several levels of optimization, which makes sense, because everyone can decide for himself which quality is acceptable and which is not.

Optimization results were following:

- 4 colors; - 8 colors; - 16 colors;

Image quality is very good; starting from 16 colors I cannot tell the difference between original and optimized images. So I decided that for me quality with 16 colors is acceptable and size of this image is 4 times smaller than size of original one.

- 4 colors; - 8 colors; - 16 colors;

Here we can see the same situation as in case with small icon, image with 16 colors quality is good enough for me. Image with 8 colors quality has ragged edges of buttons. The size of 16 colors image is reduced by 61% comparing with the original image.

4 Colors

8 Colors

16 Colors

The optimized chart’s screenshots starting from 16 colors quality in my opinion cannot be distinguished from the original one. However, the quality acceptable for me is the one with 8 colors. Since “not so smooth characters are not crucial in the case of that type of information. The 8 colors image is 19% smaller than the original one, but the 16 colors image is only 12.5 % smaller.

Smush It

It is an online tool that provides results in only one quality level.

Here are the optimization results:
- An optimized image looks the same as the original one, but size is 5 times smaller.
The sprite also looks like the original, and size is 43% smaller comparing with the original image size.Unfortunately, “Smush It” could not optimize chart’s screenshot at all.


An online tool which in the same way as “Smush it” provides only one level of optimization.

Optimization results:

- Colors are slightly lighter, but the size is nearly the same as size of original image.
The same situation as in case of small icon, colors are different, but size reduced by 32%.

Chart’s screenshot looks good, size reduced by 9%.


An online tool that provides several optimization levels, so you can choose which level is suitable for you.
Optimization results:
- 2 colors; - 4 colors; - 8 colors; - 16 colors;
As we can see, starting from 4 colors quality of the images looks almost the same as of the original. Nevertheless on 4 and 8 colors quality images I can see little ragged edges of the tone icon. So 16 colors quality image is acceptable for me and size of this image is reduced by 60% comparing with size of original one.
- 2 color; - 4 colors; - 8 colors; - 16 colors; - 32 colors;
For some reason tool decided that background color my sprite is dark instead of gray, so we can say that with the optimization was unsuccessful.

2 colors

4 colors

8 colors

The chart’s screenshot was optimized well enough with 8 colors quality and size was reduced by 26% comparing with the original image size.

Consolidated results


From all these tools there was only one that was able to provide good image quality and significant size level reduction of all 3 image types. In addition, this tool was able to provide choice between different optimization quality levels and didn’t change image colors, as well as is available online and can be used on both Mac and Linux. The winner and my personal choice is - Dynamic Drive.

2 комментария: