Click here to Skip to main content
11,496,146 members (662 online)
Click here to Skip to main content

Tagged as

Optimize your Pages using CSS Sprites

, 2 Jul 2009 CPOL 26.6K 32
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
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.

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 Smile | :) .

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:
final_result.png

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
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
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.

Bye bye.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

emiaj
Web Developer
Peru Peru
No Biography provided

Comments and Discussions

 
QuestionInteresting idea Pin
ed welch17-Dec-11 5:34
membered welch17-Dec-11 5:34 
AnswerRe: Interesting idea Pin
emiaj17-Dec-11 6:20
memberemiaj17-Dec-11 6:20 
GeneralBad news Pin
Pete O'Hanlon2-Jul-09 12:51
mvpPete O'Hanlon2-Jul-09 12:51 
GeneralRe: Bad news Pin
emiaj2-Jul-09 13:06
memberemiaj2-Jul-09 13:06 
GeneralRe: Bad news Pin
Pete O'Hanlon2-Jul-09 22:34
mvpPete O'Hanlon2-Jul-09 22:34 
GeneralRe: Bad news Pin
Budha11112-Jul-09 15:35
memberBudha11112-Jul-09 15:35 
GeneralAnother good article Pin
spoodygoon2-Jul-09 10:42
memberspoodygoon2-Jul-09 10:42 
GeneralRe: Another good article Pin
emiaj2-Jul-09 11:23
memberemiaj2-Jul-09 11:23 
GeneralGood one !!! Pin
Spunky Coder7-Apr-09 21:19
memberSpunky Coder7-Apr-09 21:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 2 Jul 2009
Article Copyright 2009 by emiaj
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid