The CSS Approach: Preload Images without JavaScript

Yesterday, we demonstrated a well-known technique to preload images using JavaScript. But as we mentioned, JavaScript is not often the best approach. First, for example, many users often disable JavaScript in their browsers. And second, by using another approach, namely CSS, you can achieve greater accessibility and a faster overall page load.

Below, we demonstrate two different techniques for preloading images.

The Typical CSS/XHTML Approach

Probably the most common approach for preloading images using CSS is to reference all images on a page, but use some technique to hide them from visitors until they are needed. We cover two of these methods below.

Hide Images Using Position

This approach requires creating a special div element to contain all images that you want to preload. The sample element containing four images is shown below.

<div id="preloader">
<img src="image1.jpg" width="1" height="1" alt="Image 1" />
<img src="image2.jpg" width="1" height="1" alt="Image 2" />
<img src="image3.jpg" width="1" height="1" alt="Image 3" />
<img src="image4.jpg" width="1" height="1" alt="Image 4" />
</div>

Next, CSS is used to position the images far off screen, as shown in the code sample below:

div#preloader{
   position: absolute;
   top:-9999px;
   left:-9999px;
   height:1px;
   width:1px;
   overflow:hidden;
}

The problem with this approach is that there is quite a bit of extra code added both to the CSS file and the HTML markup.

Hide Images Using CSS Display Property

To simplify the CSS code, the display:none property can be used instead, as shown below.

div#preloader{display:none;}

And while you can leave your code like this, to further simplify the HTML code, you can avoid creating a new div element. Instead, you can set background images for containing elements to avoid inflating your HTML code. Alternatively, images can be directly referenced in the HTML code, and then given an id or class which sets their display property to none.

CSS Sprites for Rollovers

Another common technique for preloading images is by using CSS sprites. A sprite is a large image composed of smaller images. And it is most often used when creating rollovers for website navigation. Instead of creating different images for each state, one image containing all states is created.

We use this technique for our own main navigation. The image which includes all states — on, off, and over — is shown below. And by using CSS, we selectively show a portion of the image and change the background position based on the :hover property and a class called .on.

This technique successfully solves the problem of preloading because even though most of the image is hidden at any given time, all states are loaded when the page loads, and are available on demand.

Doesn’t a large image take longer to load than several smaller images?

In the past, web developers incorrectly believed that several smaller images loaded faster than one large image. However, this is just not true. First, when comparing the file sizes of composite images and the smaller images (from which it is made), you will notice that the larger image is likely smaller. Second, by limiting the number of images per page you decrease HTTP Requests.So this can dramatically increase load time.

Stay tuned for our full tutorial on creating a CSS navigation using the CSS sprite technique mentioned above.