Websites are growing more complex every day. Image quality is increasing, and users are required to download thousands of lines of JavaScript and style sheets. Sure this increases the beauty of a website, but it comes at the expense of users who do not have broadband access. This beauty increases the page size to potentially a few megabytes, and dial-up or ISDN users are simply unable to browse these websites. One technique to reduce the page load time is to minimize the amount of requests a page makes to the server. Thus we will employ the use of sprites.

What is a sprite?

[A sprite] is a two-dimensional/three-dimensional image or animation that is integrated into a larger scene.

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.

How does this apply to websites?
It is quite simple. Rather than requesting several images and displaying them, create a single composite image composed of each individual image and request that one image. I will show you an example of how I employ this technique on my website.

Mouse over effects are quite common common. A few years ago this effect was achieved using onMouseOver/onMouseOut JavaScript. Today we use CSS. However many people still use individual images for each link. For example a navigation with four links might require eight images. Four for the links and another four for the hover effect. That is eight requests to the server! And you can do it in ONE!

First open your navigation bar in Photoshop

Then add the text for your links

Next duplicate this group (once for each effect). I intend on having two effects, a hover effect and an active effect, so I am going to duplicate the group twice.

Now increase your canvass size so all three groups can fit.

Modify each group to reflect your desired effect. I am only going to change the text color.

Save your image. Now we get to the coding. Currently we have:

<div class="navigation"></div>

with the associated style:

.navigation {
background: url('images/navigation_bg.gif');
height: 39px;
}

We are going to insert four links into our HTML.

<div class="navigation"><a class="btn_home" href="/"></a>
<a class="btn_down" href="/downloads"></a>
<a class="btn_tuts" href="/tutorials"></a>
<a class="btn_snip" href="/snippets"></a></div>

Now we are going to style the links.

a.btn_home, a.btn_down, a.btn_tuts, a.btn_snip {
width: 130px;
height: 39px;
display: table-cell;
background: url('images/navigation.gif') no-repeat;
}

This is our result:

Four links labeled “Home” was not our intention. However, we can adjust the background position to show the desired link.

a.btn_down {
background-position: -130px 0px;
}

a.btn_tuts {
background-position: -260px 0px;
}

a.btn_snip {
background-position: -390px 0px;
}

Now all four buttons have the correct label.

Now all we need to do is adjust the background position for the hover property.

a.btn_home:hover {
background-position: 0px -39px;
}

a.btn_down:hover {
background-position: -130px -39px;
}

a.btn_tuts:hover {
background-position: -260px -39px;
}

a.btn_snip:hover {
background-position: -390px -39px;
}

Now you are done! You have a fully functional navigation with hover effects. Moverover, you used a single image and thus a single request to the server.

Note that the two background-position parameters are the x location and the y location of where you want the background to start. Keep in mind, when designing your hover effects, it will make life a lot easier if each button is a uniform size.

I have further optimized the navigation by reducing the size of navigation.gif.

Who uses sprites?
To name a few: Google, Apple, Facebook, and Digg.

Note: The code provided will only work in Firefox due to Internet Explorers failure to support the table-cell display property.