CSS Tip:
Preloading Images With CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Web site visitors hate to wait, so many Web designers preload images to speed up page display. Although JavaScript is the most common way to preload images, it isn't your only option. Consider using the CSS DISPLAY property instead. It may be more reliable and it requires less complex code.

New Issues With JavaScript

Our June 2000 article discusses (in detail) how to preload images using JavaScript.

Preloading with JavaScript is a valuable technique! However, the main problem with using it is that browsers must be JavaScript-enabled and have JavaScript turned on. Without JavaScript, the images won't preload.

Your main problem used to be dealing with old browsers that didn't support JavaScript. Not many of those are still around, but now you face a new problem: some visitors deliberately turn off JavaScript because they don't want to deal with its more unsavory uses:

Disabling JavaScript does protect users from the bad aspects, but it also deprives them (and you) of the benefits. Without JavaScript, the browser can't request the images needed on subsequent pages, so visitors wait longer for pages to load completely. That's wasted time for them and lost visitors for you.

Identify Slow Or Problem Pages

Fortunately, Cascading Style Sheets (CSS) offer you an easy and reliable option. Using the DISPLAY property, you can tell the browser to request an image, but NOT to display it on the page. The browser just requests the image from the server and caches it for future use.

Consider this scenario:

You run your own Web site that advertises your Poodle breeding and boarding service. Your home page contains a basic description of your business and the services you offer.

After studying your server log data, you find that most visitors enter your site via the home page. Their next stop is usually the page that contains pictures of the puppies you have for sale. After that page, they leave the site entirely.

Why? Maybe they don't like the looks of your puppies, but more likely, they just got bored waiting for the page to load!

Check your page download time first using HTML Toolbox. It alerts you to slow-loading pages, broken links, and HTML code errors. Then, use GIFBot to decrease image file size without reducing the display quality of images.

Finally, refer to your server logs to identify problem pages that turn visitors away.

Now, let's go back to the poodle example. The puppy page is full of images of adorable puppies, but maybe visitors don't wait to see all of them.

So let's use CSS to preload some of the puppy images on the home page.

Preloading With The DISPLAY Property

First, let's create a class with display set to none and add it to the HEAD section of the home page:

<style type="text/css">
.hiddenPic {display:none;}
</style>

Next, we'll add image tags for our puppy pictures to the bottom of the home page. Always place them at the bottom of the page! If the visitor is at the home page, you certainly want it to display as quickly as possible. Let the browser display the home page and its images before it starts trying to retrieve the images for the next page.

<img src="poodle-puppy-Clara.jpg" 
  alt="Clara at 8 weeks" title="Clara at 8 weeks" 
    height="350" width="350" class="hiddenPic">

<img src="poodle-puppy-Kenny.jpg"
  alt="Kenny at 10 weeks" title="Kenny at 10 weeks"
     height="350" width="350" class="hiddenPic">

<img src="poodle-puppy-Aiko.jpg" 
  alt="Aiko at 6 weeks" title="Aiko at 6 weeks"
     height="350" width="350" class="hiddenPic">

Note that we used the "hidden" class name for each image. Again, the browser will request the image files and save them locally, but will not display them on the home page as long as the DISPLAY property is set to none. Don't use that class for every image on your home page or none will display!

You also don't have to preload every image on the puppy page. If several attractive, important images load immediately, visitors have something to look at while they wait for the others to load. The important thing is to avoid making visitors stare at a blank page!

Keep Visitors' Interest With Content

It's hard to place too much emphasis on page download time. Up to 1/3 of visitors may leave pages that take more than 8 seconds to load! But once the page does load, make sure you give the visitors something valuable.

Visitors come to your site looking for information - and that means you need text on the page that's well-organized and easy to scan. Without good content, visitors won't stay at your home page (or whatever page contains the preloading code) long enough for the images to download and get saved in the browser cache!

Good information, attractive images, and fast-loading pages will keep visitors at your site and give you a chance to turn them into repeat customers.