CSS taken to extreme - The sprite

No, not the drink nor a fairy. I talk about a CSS technique which has been borrowed from the game developers if I’m not mistaken, but correct me if I’m wrong; since games appeared first and not CSS I guess this is the situation. The sprites in computer graphics are images which are moved across the screen to form a larger scale image. Uhh, I don’t understand! Read further and I explain.

In short, what’s this all about: I’m almost sure everybody realizes that nowadays every website has in its structure some kind of image, either for navigation, for background, for borders, anything, but today a website can’t look like back in ‘95, so the images has been brought on the scene to make the websites look better. The images which appear in the layout of a website are controlled by CSS. So, let’s say you have a website which has a cool background, every link has its own background image, you have cool borders, rounded corners. How would you do that in CSS? Somehow like this:

#bg{
background:url(bg_img.jpg) repeat-y center;
}

#wrap{
margin: 0 auto;
width:700px;
background:url(wrap_bg_img.jpg) repeat-y center;
}

.home a{
display:block;
width:25px;
height:25px;
background:url(home_bg_img.jpg) no-repeat center;
}

.about a{
display:block;
width:25px;
height:25px;
background:url(about_bg_img.jpg) no-repeat center;
}

As you see above, each element has its own image. Each image is, let’s say 3kb. So what happens when someone loads this page? The end-users’ browser will open 4 connections to the webserver, and will request each image one-by-one. So, there is time spent to open and close these connections. In addition, there is 12kb of data requested.
What if I say, you can resolve all this by opening one single connection and transfer only 6kb of data, and every image will be transferred to the browser so your page will look like you’d have transferred all the images separately?

Follow please this link: Ask.com’s sprites.
What do you see? A bigger image which contains all the images which are used on Ask.com. In one single file they transferred all the images, thus minimizing server impact and minimizing the amount of transferred data. These are the sprites has been invented for. Cool, isn’t it?

So, how to use these sprites in our own life? It’s extremely simple: you dump all the images you want to use in one single image file, then you move that image as you want, using CSS.
Using an example is easier to explain, so let’s see that example.

The image file I will use is the one you see on the left. I will create a link and if you hover over it you will see another image as the link’s background, same applies if you click it.

So, a live example:

Try to click it, hover over it. You will notice a nice, smooth transition between the images, no waiting between the image loads.
The style used which manages to make use of the sprite is this:

.sprite a{
display:block;width:25px;height:25px;background:url(http://devoracles.com/images/sprite.png) no-repeat;
}
.sprite a:hover{
background-position: -27px 0;
}
.sprite a:active{
background-position:-54px 0;
}

How can sprites be in your favor? Well, they will speed up your website, considerably because of two factors: less time spent with opening/closing connections, then a single file will be much smaller than many small files. So you will save bandwidth.

Have questions? I’m here to answer them.