Please Preload Your CSS Images

Please, for your own good, preload your CSS images.

It’s becoming more popular to use the :hover pseudo-class to toggle a background-image in a <div> block to simulate various visual effects, but many developers are making the mistake of not preloading the :hover image. It looks unprofessional when a user hovers over an image and has to wait for a new background-image to download and display.

As you can see above, there is a small, awkward delay, which isn’t always so small, that occurs when a :hover background-image is not properly preloaded.

How To Preload Your Own Images
There are various ways to preload images, but the most efficient and popular way is to use CSS and a sprite, combined image to accomplish the appearance of a preload.

1. Create a single image file with both the normal and the :hover background images. I have included an example, called Example.png, below:
   
2. Specify the image dimensions of the first background-image. The first button’s dimensions start at {0,0} and end at {191,52}, after which the second image button begins. When you specify your image CSS, you need to constrain the background image using the following code — this will only display the top button in the image file:

   #SomeBackgroundImage {
   	background: url('Example.png') 0px 0px no-repeat;
   	width: 191px;
   	height: 52px;
   }
   

3. Specify the image dimensions for the :hover background
   Now that you’ve set up the initial image, you need to set up the dimensions for when the user’s mouse hovers over the image. Once the image hovers, you want the background position to change so that you only see the bottom portion of the image (and exclude the top portion). All we’re really doing is telling CSS that our background image starts 53 pixels below where it normally would. This is achieved by the following code:

   #SomeBackgroundImage:hover {
   	background: url('Example.png') 0px -53px no-repeat;
   	width: 191px;
   	height: 52px;
   }
   

Why is this method so much better?
Many developers make the honest mistake of creating two separate image files — like Example.png and ExampleHover.png. CSS does not preload any images — :hover background-images are not loaded until the pseudo-class is called (i.e. when the user initiates a mouse hover). This lack of preloading creates the awkward delay between the mouse hovering over an object and CSS displaying a new background-image.

In the example above, a single image file contains both forms of the toggled object, which actually creates two beneficial effects. First, our :hover image is preloaded because it is part of the original background-image — CSS only has to move the location of the background image position. Second, it’s more efficient to load one larger image than to load two smaller images because there is a performance penalty each time the browser has to make a new HTTP request to a server. The fewer requests, the better.