AbleDesign - Tutorials
Web Design Tutorials - Intermediate Design Considerations
Image Optimization
What is the most agonizing experience on the Internet? Most people will tell you it is slow downloads. Although server and connection speeds dictate download time, much of the wait can be eliminated or reduced by properly optimizing images. You can optimize gif's with marginal success by simply reducing the number of colors in your graphics program. However, this gives you very little control over which colors are eliminated and how far to optimize. To do the job right, you really need a program designed for that purpose. A good image optimizer will reduce graphics size by up to 75%, sometimes more.
Ulead makes a great image optimizer:
Smart Saver Pro
- Very powerful and easy to use
- Free downloadable demo
- Includes many other image related tools
- No online version
- Demo expires fairly quickly; must be purchased
SpinWave makes a good optimizer this is also available free for online use, although the online version has been very slow and unreliable in the past:
Gif Cruncher
Jpeg Cruncher
- Free, unlimited use online versions, downloadable demo, and purchasable versions
- Fairly good optimization
- Online version has been very slow due to server load
- Online version has serious cache problems with some computers
- Demo expires fairly quickly
Another good online optimizer is:
Gif Optimizer
- Online version generally moves quite quickly
- Allows you to optimize and resize your images
- Fairly low quality optimizer
- Limited choice of optimized output
Macromedia Fireworks:
Fireworks
- Free downloadable demo
- Variety of viewable options
- Familiar interface to Adobe users
- $199 - not cheap!
- Not the easiest to use
Below is an example of a moderately detailed JPEG, both uncompressed and compressed:
 Uncompressed JPEG (21,997 bytes) |
 Compressed JPEG (8,021 bytes) |
As you can see, very little image quality is lost at a file size reduction of 64%. Any good image optimizer will let you choose the level of optimization you desire. This example went with the best quality possible at a significantly reduced size. Multiply that across several images on a page, and you can see how image optimization can make drastic differences in your sites' download time.
Thumbnails
Thumbnails are miniature (and hopefully, optimized) versions of a full-sized image. Their purpose is to allow multiple image previews on one page without making it dreadfully slow loading or too big to view comfortably.
It is common for thumbnails to be sized to 100x100 pixels, although you could choose whatever size you want. The thumbnail image usually links to the full image, either in the same page, a new page, or a pop-up window (using JavaScript). To make a clickable thumbnail image that opens in a new browser window, you might use the following code:
<a href="http://domainname.com/images/image_a.gif" target="_blank"><img src="http://domainname.com/images/image_b.gif" width="100" height="100" border="0" alt="thumbnail image"></a>
Notice the similarity in names used for the thumbnail and full-sized images (image_b.gif and image_a.gif, respectively)? This is a good technique for keeping some order to your images. The rest is all standard HTML, with target="_blank" opening a new window to load the full-sized image, and the image size tags specified to speed up the page load time. If you wanted to place a thin border around the image to make it clear that it is a link, you could change border="0" to border="1".
One very important reminder: Make sure you resize the image in a graphics program when creating your image! All too often, people simply scale the size of it through the image height and width tags. The result can be an extra 250k per image that must be loaded, completely nullifying the benefits of the thumbnail system and making the page of thumbnails take an eternity to load. First resize, second optimize. Don't get lazy!
