CSS sprites allow you to decrease the number of individual HTTP requests sent from the client (browser) to your web server when a user visits your web page.
The concept is simple — instead of an individual icon for each rollover state and visual representation, group them all into one image file and then dynamically position it with fixed width/height rules in CSS.
This avoids the annoying “IE flicker” bug that designers have experienced from time to time when using separate images for “on” and “off” states.
Besides combining an “on”, “off”, “active”, “visited” state for an icon, you can also combine all the distinct icons into one image.
Lets look at a simple example that uses on/off states for icons in a navigation menu:
HTML:
<ul id="nav">
<li id="email"><a href="#" title="Email">Email</a></li>
<li id="phone"><a href="#" title="Phone">Phone</a></li>
<li id="sms"><a href="#" title="Short Message Service">SMS</a></li>
</ul>
CSS:
<style type="text/css">
body { font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif; font-size: 76%; margin: 1em auto; }
#shell { border: 1px solid #ccc; }
#nav { list-style-type: none; color: blue; }
#nav li { margin-bottom: .5em; }
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
outline: none;
background: url('/demo/images/sprite_nav.png') no-repeat left top;
display: block;
height: 32px;
width: 32px;
border: 1px solid #7faacc;
text-indent: -9999px;
}
#nav a:hover { border-color: #4d8aba; }
/* email background sprite */
#email a:link { background-position: 0 0; }
#email a:hover { background-position: -32px 0; }
/* phone background sprite */
#phone a:link { background-position: 0 -32px; }
#phone a:hover { background-position: -32px -32px; }
/* sms background sprite */
#sms a:link { background-position: 0 -64px; }
#sms a:hover { background-position: -32px -64px; }
</style>
An example sprite_nav.png sprite image:
Working demonstration:
CSS Sprite Demo
The sprite image will be a 2×3 matrix of 32px by 32px icons (one column for each state — hover, link) and one row for each navigation item (phone, email, sms).
Further reading: Website Optimization: CSS Sprites, MezzoBlue: Sprite Optimization.