First lets clear up what is a HTTP request. Every time a web browser downloads/fetches a file from the web a new request is made to the server. It can either be an image, a page, CSS or Javascript file etc. This means that for every file the browser has to send a request to the server and the server sends a response in return.

Why should I mess around with reducing the number of HTTP requests?

This is actually the number one thing every webmaster should think about. The less requests the site makes the faster it is. The less files the web browser has to fetch that much faster the site loads. It’s as simple as that. Makes sense right?! So try to keep it as low as possible.

Nowadays website designs use a lot of graphics/images. It’s hard (but not impossible) to find a site that uses only CSS and no graphics. With every graphic a new request is sent to the server upon loading. So optimizing the use of graphics is one of the main things you should do to lower requests. CSS sprites is a technique that does just that!

What the heck is a CSS sprite?

It’s a technique where several graphics/images are put into one and displayed on the website via coordinates. This means that only one request is made to the server thus making it faster to open up the page. Sure the file size might get a bit bigger but the extra size is worth it.

Sprites were already being used back in the days on video games and several computer graphics.

How do I make one and how can I use it on my webpage?

By now we’ve learned what are HTTP requests, what’s the preferred method to reduce them and what is a CSS sprite. All we have left is to learn how to create and use them in our designs.

So lets get our hands dirty and create our first CSS sprite. For this example I’m going to create a small sprite with 4 social stickers (courtesy of Helen Gizi) which you can download here.

First thing is to set up a proper sized canvas. Since my icons sizes are 64×64 px my canvas has to be 128×128 px – a nice square. I positioned them side by side and even gave them a light grey border just to make it a bit easier to understand where one icon ends and another starts – normally you wouldn’t have to do that. But here’s my sprite:

By now we have four separate icons put into one. With this we’ve already reduced the number of HTTP requests by 3. All we have left to do is display them on our site.

First lets create the HTML part:

<a class="sprite twitter" title="Twitter"></a>
<a class="sprite rss" title="RSS"></a>
<a class="sprite delicious" title="Delicious"></a>
<a class="sprite designfloat" title="DesignFloat"></a>

With that we have our HTML part done. As you can see we’ve given every link two classes: sprite and the name of the link. Why two? Don’t worry – I’ll explain it in a little bit. Now onto CSS coding!

PS! Since we’re going to use background and background-position properties you might want to read about them a bit before we go on.

.sprite {
    background: url('images/sprite.jpg') no-repeat;
}
 
.twitter, .rss, .delicious, .designfloat {
    float: left;
    width: 64px;
    height: 64px;
}
 
.twitter {
    background-position: 0 0;
}
 
.rss {
    background-position: -64px 0;
}
 
.delicious {
    background-position: 0 -64px;
}
 
.designfloat {
    background-position: -64px -64px;
}

If you’ve followed everything correctly your result should be like the following screenshot:

If not you might want to check your code for any mistakes. Believe me – I always check my code while doing examples.

And that actually wraps it up. We’ve learned all we need about HTTP requests, how to reduce them, what are CSS sprites and how to use them.

Now to answer your earlier question “Why two classes?”. Well the first class “sprite” marks that this link uses the sprite image so we don’t have to add that line of code for every link we have. That would be pointless! The second class marks the name of the link so we can assign the icons coordinates. And since I know that all of these icons had the same dimensions I simply combined the code to set the width and height of them in one batch.

If you should run into any trouble with CSS sprites let me know in the comments section. I’d also like to head your feedback about this little example. Did you find it useful?