Click here to Skip to main content
13,803,561 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

30.1K views
32 bookmarked
Posted 7 Apr 2009
Licenced CPOL

Optimize Your Pages using CSS Sprites

, 2 Jul 2009
Rate this:
Please Sign up or sign in to vote.
How to optimize your pages using CSS Sprites

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:

35118/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:

35118/blue.jpg35118/yellow.jpg35118/red.jpg
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:

35118/sprite.jpg
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.

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

You may also be interested in...

Pro

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
protectorPete 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
protectorPete 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    Praise Praise    Rant Rant    Admin Admin   

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.181215.1 | Last Updated 2 Jul 2009
Article Copyright 2009 by emiaj
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid