Make Images Spritely

Why is that some pages loading with lightning speed and others are stuck with a “Waiting for….” in the bottom status bar? One reason is the number of file calls– CSS stylesheets, Javascript, images and the content. Browsers bring down these files in pairs and have to often wait until some of them are down before they get pointers as to what comes next. This boils down into what is called “hang time.” CMSes and style heavy sites can take an eternity to come down. The good news: you can make even a feature rich and complex layout come through at lightning speed. The answer: CSS Sprites.

Back in the old days, programmers built video games with image files called “sprites.” A sprite would hold multiple instances of the same icon in different positions. To see Mario run away from Donkey Kong, the program would show a small segment, offset by so many pixels this way or that to make it appear animated when the little segments were run in quick succession like film frames.

The CSS Sprite uses the offsetting trick. It calls for one big image that all of these elements. Then, each segment on the page loads this one big image into its background and shows off just a small part of that image. If a page would otherwise load 20 to 40 images, a CSS sprite driven page loads a single image. The relative size of the one image may be much bigger than the same multiple images, but that one big file amounts to one moment of hang time instead of 20 to 40 moments of hang time. The net effect is a much faster apparent download for your users.

First off– plan! Every web page has elements that are finite (like headers and footer) and parts that are open ended (like the middle body). Because you are dropping multiple elements onto the same page, you have to make sure they don’t collide with one another. Look at Figure 1: there are multiple elements. For sidebar elements (the three rounded boxes to lower right), the header, middle and footer are together in each case.

Fig 1.

What I’ve done is use a div box with a set width and height of what I want to see. Then, use the background position to get a segment. For example, I got the the header and footer from the rounded box I created (see Fig. 2 and the red dotted regions).

Fig 2.

div.sprite {

	background-color: transparent;

	background-image: url(../images/fg.png);

	background-repeat: repeat;

	background-attachment: scroll;

	background-position: 0% 0%;

}



#inner-wrap #heading {

	background-repeat: no-repeat;

	width: 950px;

	height: 106px;

	background-position: -1595px 0px;

}

The div.sprite is the catch-all for the style to establish the page’s background images.

#inner-wrap #heading are two CSS IDs that have to be satisified to display the heading. The means that the #heading, #body and #footing can all exist inside of #inner-wrap, but only the #heading get the background from 1595px by 0 that is 950 pixels wide and 106 pixels tall.

The footer gets a similar treatment:

#inner-wrap #footing {

	width: 950px;

	height: 120px;

	background-position: -1595px -360px;

}

In the HTML, the heading div looks like this:

(the inner-wrap div keeps going for most of the page)

The #inner-wrap id is the big overarching container for most of the page. The #header div is more finite. Because divs natively line break before and after, the heading, body and footing stack on top of each other down the page.