You’ve probably heard about CSS sprites, but do you know what they really are and why you should use them?

A simple answer is that a CSS sprite is a composition of multiple smaller images into one large image. See the examples below for further understanding.

It might sound a little counterproductive to create a larger image, because it might take longer to download it right? Well, that’s not exactly true. Please read this article to understand this concept in detail.

CSS sprites are mostly used in navigation bars and for strategically hiding some part of the image for web design. This is a storytelling technique being used in web design.

CSS Sprites – How They Works


Image Courtesy: Image Shack

Whenever a user comes to your site, the browser has to load each and single one of the images, unless they are already downloaded. Each of those images will take some time to download (regardless of its size) because of the internet connection latency.

If you’re sitting on a low latency network, say 50ms, and the web page has 20 images and other external files, it will take a minimum of 20*50*2 = 2 seconds of additional time to load the page, not counting the image size.

Most browsers are capable of downloading multiple resources at a time. The maximum number is different for every browser, but it is somewhere between 2 and 8 connections, so at best the 2 seconds get reduced to 1/8 of the time, which is 1/4 of a second.

That’s not much, but when you include the download speed, it goes up to at least half a second. Now think about all the server optimization you’re doing on the server side to reduce the page generation time from 50 to 20ms, and here you can save half a second on something really simple.

You’d think 20 images is a lot, but is it really? Think about a simple button with hover effect. That’s two images. Does it have “visited” state when you’ve already clicked it? Make it three, or sometimes even four.

How to Use it

This is an example of CSS Sprite for the login button here on Designzzz:

Both the hover and normal states are in one image. When the user puts his mouse over the button, all that happens is that the position of the background changes instead of the image itself.

.login-pad {
    background: url("") no-repeat top center;

.login-pad:hover {
    background-position: bottom center;

That’s all you need to do, it wasn’t that hard right?

Another important thing to note is that JavaScript and CSS files suffer from the same issue. Regardless of their size, the browser has to download them separately, i. e. there is one additional request for each file you have on your page.

It is not uncommon to have 50 or more external resources on a page. This is why most websites are loading slowly, not because they are large, but because they have too many external resources and high latency connection.

Most of the shared hosting companies don’t provide high speed connection, so you can expect something like 150-250ms latency. Now let’s calculate that … 50 * 250ms = 12.5 seconds. Scary, isn’t it?


What I’m trying to point out here is that many people focus on optimizing the wrong thing. You might spend days or even weeks trying to figure out how to make your script run faster from 100ms to 50ms, but you miss the point that the website is slow because it keeps on loading 50 different resources.

Below are some examples for your inspiration to see how the major companies of internet are using this technique.



Example of CSS


CSS Sprite Tutorial

Dragon Interactive

CSS Tutorial and Tips

Pin It