Let's say that your boss calls you saying that the shiny new page of the company in the production server is having a very bad user experience, the load process takes a lot of time and the users have to wait to start using it.
You, as a good developer/designer found after a trace of the web requests/responses that the main issue is related to the downloading process of the images that are being used for several elements in the main page screen... let's say 100 images (pretty large, isn't it?).
You check the size of those images and none of them is too large (1kb - 10kb max), then your boss looks at you and you simply don't have an answer for such a thing... what to do then? Start blaming the user's computers ("it's their fault, they should upgrade to a better Internet connection, no less than T1"), or start blaming the framework? ("is it a PHP/.NET/Java fault, I told you so, the decision to go with PHP/.NET/Java was a really bad idea"), or something else that saves your soul from hell :) .
Here is when a technique named CSS Sprites comes to the rescue. This is an idea ported from the gaming industry and it can be applied to the web too. The main idea is to take all your images (in this case, the 100 images) and put them all in a big image, and finally, using CSS move the coordinates around this newly created image to show the correct image for a given element.
Let's create a small demo showing this technique:
The final result should look like this:
This is our basic markup:
<!DOCTYPE html PUBLIC "-
"http:
<html xmlns="http:
<head>
<style type="text/css">
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
}
.blue
{
}
.red
{
}
.yellow
{
}
</style>
</head>
<body>
<div class="container">
<div class="blue">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>
</body>
</html>
And these are our images:
 |  |  |
| blue.jpg
| yellow.jpg
| red.jpg
|
Now, the traditional way to do this is to just set the background-image for each selector to target the correct image, something like:
.blue
{
background-image:url('blue.jpg');
}
.red
{
background-image:url('red.jpg');
}
.yellow
{
background-image:url('yellow.jpg');
}
And effectively, it does work. But the problem is that you are hitting the server 3 times to retrieve those images. You can get the same result using CSS Sprites, first using your favorite image editing software (Photoshop), we are going to merge those images, the end result should be something like this:
 |
| sprite.jpg
|
And here the magic happens, let's change our selectors to use this big image and move the coordinates for each square until we get the desired result:
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
background-image: url('sprite.jpg');
}
.blue
{
background-position: -100px 0px;
}
.red
{
background-position: -200px 0px;
}
.yellow
{
background-position: -0px 0px;
}
And that is all, what I'm doing there is assigning the background-image attribute of all the divs inside the container to our sprite.jpg image. Later, I'm assigning a background-position to display the correct portion of the whole image. Furthermore, you are getting the same result but saving some hits to your server, isn't that cool enough?
Well, that is all folks, hope you like my first article.
You can download the sample code from here.
Bye bye!
Shameless plug: You can check this article on my blog here.
