Here you're creating variable names for two images: img1 and img2. Then you attach the actual name and path of the image to the variable SRC file. The images will be stored in the browser cache.

Don't get too carried away and try to preload all your site images on one page. That's overkill, and it can significantly affect the total download time of the page. Preload just the next set of images your visitors will need.

Look at your site logs and do some testing to determine how visitors move through your site. If the majority jumps from your home page to your products or catalog page, preload the images for those pages on your home page. Do your best to load images in the order they'll be needed.

Reuse Images

There's another trick to using the browser cache: Use the same images throughout your Web site. This gives your site visual continuity and speeds up the display.

Every time you reuse an image, it's one less request the browser has to make to the server.

The best candidates for reuse are company logos, menu bars and other navigational icons, because they often appear on every page in the site. Depending on your design, you can probably find other images to reuse, too.

Carefully organize your files and directories to make sure you use the same file name and path each time you use the image. Otherwise, you could use corporate//images/logo.gif on the home page and insert office//images/logo.gif on another page. Although the image files have the same name, they're in two different directories. The browser will download both. Preloading and reusing images doesn't change your download time but pages appear to load faster.

To really speed up your page, you have to reduce the size of your graphics files. Several good image optimization tools are available. NetMechanic's GIFBot tool is free. Use it to compress image file size without sacrificing image quality.

Use images wisely. They can add a lot to your site, but they also can drive away your site's most valuable asset: your visitors.