Lets say that you boss calls you telling 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...lets say 100 images (pretty large, isn't?).
You check the size of those images and none of them is too large (1kb - 10kb max), then your boss look at you and you simply don't have an answer for such thing... what to do then? start blaming to the user's computers ("is their fault, they should upgrade to a better Internet connection, no less than T1"), or start blaming to the framework? ("is 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 these case the 100 images) and put them all in a big image, and finally, using CSS move the coordinates around this newly image to show the correct image for a given element.
Lets create an small demo showing this technique:
The final result should look like this:
This is our basic markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 just to 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 3 times the server 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 these:
 |
| sprite.jpg |
And here the magic happens, lets 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 div's 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.
Etiquetas de Technorati:
CSS,
HTMLBye bye.
Posts
