Image Optimization

August 12, 2004 at 3:53 pm Leave a comment

While reviewing a site of mine, I found that I was guilty of something that I only thought everyone else was guilty of…

Non-optimized images.

There. Now you know.

Image optimization is something that I have suggested to others many times as a way to speed up their website, while conserving bandwidth at the same time. Why not kill two birds with one stone?

Well, while I was doing a bit of fiddling in my favorite image editor tonight, I discovered that I had an image on one of my sites that was not optimal in terms of size. It was a header for a page… Prior to my CSS layout, it was broken into three separate images, each about 9-10K… With CSS, I found that it would be best to have it as a single image, but it was around 40K. (I did it in a bit of hurry, though 40K seems huge in retrospect!) I messed around with various settings, looking at the final filesize and the quality of the image and finally settled on a variation that was about 20K in size. This reduction in size is enough to make a significant improvement in download speed while the image quality was only slightly lower.

The thought then crossed my mind that I should probably check some other image files, as I might be able to shave off a little more. Well, I didn’t keep an exact count, but I’m guessing that I shaved another 15-25K off of the front page of the site alone, as I was able to cut off a few hundred bytes on up to a few thousand bytes on some images.

Here are a few image optimization tips:

1. Try different formats! You may have everything on your site in GIF today, but that might not be best. In my testing, some images looked best and were most efficient in GIF format, but PNG may have an advantage with some image files. JPEG was a big favorite of mine as well. For certain types of images, JPEG is superior to GIF and PNG.

2. For GIF and PNG formats, don’t forget to lower the color depth. I found that in some cases I was able to lower the color depth down to as low as 8 colors. Simply dropping from 256 to 128 colors in many cases resulted in an almost unnoticable reduction in quality, while dropping a significant percentage of the file’s size. Depending on the imdividual image, you might be able to drop down to 64, 32, or even fewer colors.

3. For JPEG formated images, use the quality scale! Again, depending on the image you can get away with a significantly lower quality setting without significantly affecting the actual image quality. This can result in BIG size savings.

4. While some people who offer ready-to-download icons (for their products, etc) are putting out highly optimized images for others to use, not all ready-to-download images are optimized. The result? Image files that are 2-3 times larger than they need to be, if not more. So, before you use that new snazzy version of Tux you found on the web, load it into your favorite optimizer to see if it’s ready for prime time.


Entry filed under: Programming General.

Back to the FAQ The UI Blues

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


August 2004
« Jul   Sep »

Most Recent Posts

%d bloggers like this: