Blog

CSS Image Sprites: What They Are, How They Work and Why?

by

An image ‘Sprite’, as in the CSS background-position trick (not the transparent lemon-lime flavoured soft drink I have misled you with), is the term used to refer to a very popular front-end coding technique. But why? and how do they work exactly?

The basic idea with using sprites is to reduce the number of HTTP requests to your web server. Why? Because lots of HTTP requests are bad; they can slow down your web server.

Most websites have a fairly large number of graphical elements within the interface (logos, icons, buttons, and image headings for example). When a website is viewed (or more correctly put ‘requested’) the web server has to display (or ‘return’) all these little images. When a website becomes popular (hopefully it does!) and the pages are frequently requested, these little image requests can really add up. This in turn puts the web server under greater load, and slows down the website.

The trick here is to combine all these little graphic elements into one large image sheet, then reposition the sheet to suit; only displaying parts of it as needed. Here is an example of this website’s sprite sheet. Pretty nifty ay!

But isn’t that like replacing lots of tiny ‘near nothing’ file-sized images with a larger cumbersome file-sized image?… I hear you ask. No.

Well not really. Sure, the file-size of the image sheet will be larger, but the important thing here is that the number HTTP requests will be reduced to just one. With this in mind, and the idea that browsers cache images, you can see that once this larger image sheet has been loaded it will not need to be again.

OK, so how does one get Sprite-ing?

Firstly, I’ll show you an example. The following is how I’d display the logo on my website (if I weren’t using sprites).

I could do something like this:

<h1 class="logo"><a href="http://www.jonathanstening.com"><img src="images/logo.png" /></a></h1>

Or probably better; using a sneaky background image (rather than embedded <img>) and including some anchor text:

<h1 class="logo"><a href="http://www.jonathanstening.com">Jonathan Stening</a></h1>

Then, in my CSS stylesheet:

.logo a {
   overflow: hidden;
   text-indent: -9999px; /*Pull the anchor text outside block element, away from view*/
   width: 320px; /*The logo width*/
   height: 95px; /*The logo height*/
   background: transparent url(images/logo.png) no-repeat 0 0;
}

But, say if I have other graphical elements on my website (icons, button images etc.), using either of these two techniques for each element is going to create multiple HTTP requests, which is what we’re trying to avoid here.

So… CSS Image Sprites. Hello.

Firstly, you’re going to have to merge all your graphical elements into one image (a sprite sheet). You will need to keep this sheet fairly tidy (it needs to be pixel perfect). Then, by setting the background image for all your graphical elements to your sprite sheet and repositioning the background position for each element you’re away laughing!

The above CSS becomes something like this (using the ‘background-position’ to located your image on the sheet):

.logo a {
   overflow: hidden;
   text-indent: -9999px; /*Pull the anchor text outside block element, away from view*/
   width: 320px; /*The logo width*/
   height: 95px; /*The logo height*/
   background: transparent url(images/sprite-sheet.png) no-repeat 0 -100px; /*For example*/
}

That’s pretty much it. You can also use the anchor’s hover pseudo-class (‘a:hover’) to swap the background-position when a user hovers their cursor over the logo. For example:

.logo a:hover {
   background-position: -320px -100px; /*Pull the background to the side horizontally (for example)*/
}

For a much more in-depth example check out Chris Coyier’s article on CSS-Tricks.com.

Update

If you find working out the ‘pixel perfect’ location of your sprite image’s position annoying, check out Sprite Cow. Thanks Chris Coyier for bringing this to my attention with your screencast #105: Using Sprite Cow.

Updated: