Optimize your Pages using CSS Sprites

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

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<span class="code-none">: 1px solid<span class="code-none">;
            float<span class="code-none">: left<span class="code-none">;
            height<span class="code-none">: 100px<span class="code-none">;
            left<span class="code-none">: 20px<span class="code-none">;
            margin-left<span class="code-none">: 12px<span class="code-none">;
            margin-top<span class="code-none">: 50px<span class="code-none">;
            position<span class="code-none">: relative<span class="code-none">;
            width<span class="code-none">: 100px<span class="code-none">;
        <span class="code-none">}
        .blue
        <span class="code-none">{
        <span class="code-none">}
        .red
        <span class="code-none">{
        <span class="code-none">}
        .yellow
        <span class="code-none">{
        <span class="code-none">}
    </style>
</head>
<body>
    <div class="container">
        <div class="blue">
        </</span>div>
        <div class="red">
        </</span>div>
        <div class="yellow">
        </</span>div>
    </

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<span class="code-none">:url('blue.jpg')<span class="code-none">;
        <span class="code-none">}
        .red
        <span class="code-none">{
        background-image<span class="code-none">:url('red.jpg')<span class="code-none">;
        <span class="code-none">}
        .yellow
        <span class="code-none">{
        background-image<span class="code-none">:url('yellow.jpg')<span class="code-none">;
        <span class="code-none">}</span></span></span></span></span></span></

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<span class="code-none">: 1px solid<span class="code-none">;
            float<span class="code-none">: left<span class="code-none">;
            height<span class="code-none">: 100px<span class="code-none">;
            left<span class="code-none">: 20px<span class="code-none">;
            margin-left<span class="code-none">: 12px<span class="code-none">;
            margin-top<span class="code-none">: 50px<span class="code-none">;
            position<span class="code-none">: relative<span class="code-none">;
            width<span class="code-none">: 100px<span class="code-none">;
            background-image<span class="code-none">: url('sprite.jpg')<span class="code-none">;
        <span class="code-none">}
        .blue
        <span class="code-none">{
            background-position<span class="code-none">: -100px 0px<span class="code-none">;
        <span class="code-none">}
        .red
        <span class="code-none">{
            background-position<span class="code-none">: -200px 0px<span class="code-none">;
        <span class="code-none">}
        .yellow
        <span class="code-none">{
            background-position<span class="code-none">: -0px 0px<span class="code-none">;
        <span class="code-none">}</span></span></span></span></span></span></span></span></

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.

Bye bye.

Shameless plug: You can check this article on my blog here.