| |
      
|
|
  
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:
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:
Another good online optimizer is:
Macromedia Fireworks:
Below is an example of a moderately detailed JPEG, both uncompressed and compressed:
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!
Next Tutorial
|
 |
|  |
