Creating and Using CSS Sprites

CSS sprites are a way to combine images to improve our page loading time and reducing the number of requests our server performs. CSS sprites have been routinely used in CSS for a number of years in rollover effects where loading one image that contains both states. The problem with using two images here is when the page loads, the first image is loaded by the browser, the user then moves the cursor over the image and only then does the browser send the request for the second image. By waiting until the user is already hovering over the image to download the second file the user may experience a delay before that image is fully downloaded by which time the user may have already moved the cursor away. Using CSS sprites one images is used but only partially displayed then moved to show the hidden area containing the hover state. An example of this can be seen on this site in the sidebar, hover over the RSS feed and you will see the hover state of the RSS image.

More recently web designers have started to expand the concept combining images into a single file and using the same CSS positioning techniques to reduce server overhead and improving page load times. In a real word example Apple uses CSS sprites in its websites main navigation. The sprite contains the menu as well as rollover and active states for the menu. CSS sprites are not limited to rollover effects either, Google uses CSS sprites to display the ‘o’ repeatedly using a single image in its bottom pagination.

At first glance it might seem that simply adding up the image, sizes may end up being larger than the “compressed” CSS sprite image, especially if the images are not all the same size and the image file is poorly constructed. However, each new image to be loaded has an overhead specifically the HTTP transportation. If you save one single HTTP transport request and have to load a couple of bytes additionally (e.g. parts of the sprite not used), it’s still a good deal. If these unused parts are not used they may be on other pages and as the image is now cached by the browser the benefit is found. There is overhead for initiating an HTTP request, there is also overhead inside of image file formats. Formats like GIF that have colour tables and compression tables that add up when used in many images.

Step 1: Making the Image

First of all we must make our sprite image. Use your favourite graphics package to produce the image, the example here was created in Photoshop. To see the image in use — the final result — have a look at the “20 Handy Apple OSX Keyboard Shortcuts” on this site and you will see the CSS sprite used to display the key symbols.

Simple CSS sprite created in photoshop.

Step 2: Creating our CSS code

First of all, we will create the class ‘sprite’, which will load our sprite image. Here we also set the display property to inline-block so the browsers shows the “empty” span tag we will use later.

.sprite {background:url(images/inline-sprite.gif); display:inline-block;}

After loading our sprite, we must define the height and width of the images inside it.

As all my icon images have the same height we can add the height to the ‘sprite’ class.

.sprite {background:url(images/inline-sprite.gif); display:inline-block; height:14px;}

Now, we must define the width of every image, because they are all different. We will use a class for each one of them.

.command {width:12px;}
.control {width:8px;}
.delete {width:15px;}
.option {width:12px;}
.shift {width:12px;}
.tab {width:11px;}
.direct {width:8px;}
.toggle {width:12px;}
.panel {width:14px;}
.select {width:8px;}

We must define a background-position to every image in order to show correctly. This background-position will have negative values, because our background image must move left, to reveal the different images. We must make every image inside the sprite move to the top left corner, because that is the spot where we begin seeing the image. That corner is equal to 0px in X, 0px in Y.

Note the first value of background-position, is horizontal (x-axis) and the second one is vertical (y-axis).

.command {width:12px; background-position:0px 0px;}
.control {width:8px; background-position:-13px 0px;}
.delete {width:15px; background-position:-22px 0px;}
.option {width:12px; background-position:-38px 0px;}
.shift {width:12px; background-position:-51px 0px;}
.tab {width:11px; background-position:-64px 0px;}
.direct {width:8px; background-position:-76px 0px;}
.toggle {width:12px background-position:-85px 0px;;}
.panel {width:14px; background-position:-98px 0px;}
.select {width:8px; background-position:-113px 0px;}

Step 3: Creating our HTML code

<span class="sprite command" title="Command Key" /></span>

Finally a point to remember is that background images don’t normally get printed by browsers. The solution is to create overriding rules in your print style sheet to sort things out.

This article was posted on 14 August 2009 in CSS, HTML

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.