CSS Sprites: How Improve Web Performance

CSS Sprites is a technique by which we can combine multiple images in a single big image and position the various parts of this big image with our elements using pure CSS attributes. The primary objective behind using CSS Sprites is to decrease the number of HTTP requests and thus decreasing the request stress on server. The idea behind CSS Sprites is to consolidate multiple images into one sprite and then 

selectively display portions of this sprite with positioning. It starts by creating a larger CSS Sprite by grouping more than one images (usually icons) together and aligning them in proper grid style to aid the positioning. Then it is aligning used a proper positioning values on the webpages to show their respective images. This way it decreases the number of HTTP requests and thus increases the overall speed of webpages.

CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests. In this article we’ll expand on our mini-CSS sprite example to show how Yahoo! and AOL use sprites to improve performance.

A Brief CSS Sprite How-To

The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. The steps are as follows:

  • Group multiple images together (usually icons or decorative images) into one sprite
  • Evenly space these images, aligned into one or more lines
  • Set this sprite to the background image of an element (usually a list)
  • Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing
  • Enjoy the increased speed and reduced HTTP requests

Maximizing Web Performance at Yahoo! and AOL

With millions of users, Yahoo! and AOL do everything they can to improve the user experience. Both AOL.com and Yahoo.com use CSS sprites to save numerous HTTP requests for their intricate interfaces. Both sites use CSS sprites to selectively display icons within their directories of services, and Yahoo! uses sprites elsewhere as well. Yahoo! and AOL use similar techniques, but implement sprites in different ways. First we’ll look at AOL.com’s implementation, to show a more flexible, but slightly less efficient approach. Next we’ll look at Yahoo! to see how their inline style positioning works.

AOL.com CSS Sprites

AOL.com uses CSS sprites on their home page to improve performance. AOL uses a CSS sprite for the icons in their main directory navigation bar (autos, finance, food, etc.) on the left side of their home page (see Figure 1).

Figure 1: AOL.com Home Page uses CSS Sprites

Their main CSS file sets up the directory navigation bar list:

<link rel="stylesheet" type="text/css" href="http://www.aolcdn.com/_media/aolp_v23.1/main.css" />

#sm_col .dir ul li a, #sm_col .nav2 li a, #sm_col .nav3 li a {
	padding:.28em 0 .28em 2.3em;
	border-bottom:1px solid #fff;
#sm_col .dir ul li a, #aiw, #sm_col .nav2 li a, #sm_col .nav3 li a {
#sm_col ul.serv li a:hover, #sm_col .nav2 li a:hover, #sm_col .nav3 li a:hover, .eight .dir ul li a:hover {

This CSS sets the styles for the height of the directory menu, padding (with plenty of room for the background icon, 2.3em, on the left), a white border on the bottom and any overflow to be hidden. They display the anchor as a block to make it clickable and set the width to 10.28em, and set the rollover color to white. Note that AOL could use background: instead of background-color: here to save six bytes.

Then AOL sets the background of each directory class (as well as some other IDs) to “dir_sprite.png” (see Figure 2).

.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14, .d15, .d16, .d17, .d18, .d19, .d20, .d21,.d22, .d23, .d24, .d25, .d26, .d27, .d28, .d29, .d30, .d31, #aim_sprTbEdt, #games_sprTbEdt, #sports_sprTbEdt, #weather_sprTbEdt, #radio_sprTbEdt, #horoscopes_sprTbEdt, #video_sprTbEdt {
	background:transparent url("dir_sprite.png") no-repeat 4px 0;

Figure 2: AOL.com dir_sprite.png (truncated) CSS Sprite

For the subsequent directory menu items, it is just a matter of shifting the background image down 36 or 38 pixels to show each subsequent icon.

.d2 {
	background-position:4px -36px;
.d3 {
	background-position:4px -74px;
.d4 {
	background-position:4px -112px;

The HTML code looks like this for the directory.

<div id="cols">
<div id="sm_col"><a name="dir"><h6>Directory</h6></a><div class="dir">
<ul id="om_dir_col1_" class="serv c">
<li><a id="d1" class="d1" href="http://autos.aol.com/?ncid=AOLCOMMautoNAVIdira0001">Autos</a></li>
<li><a id="d2" class="d2" href="http://money.aol.com">Finance</a></li>
<li><a id="d3" class="d31" href="http://food.aol.com">Food</a></li>
<li><a id="d4" class="d3" href="http://games.aol.com">Games</a></li>
<li><a id="d5" class="d4" href="http://body.aol.com">Health & Diet</a></li>…</ul>

AOL uses classes and IDs to label their menu items, while Yahoo embeds the style directly into the list items. AOL’s version uses slightly more code, but is more flexible. Next let’s look at Yahoo!’s implementation of CSS sprites.

Caveats to CSS Sprites

AOL engineers found that one downside with image sprites is that some devices seem to handle sprites in a memory-intensive manner. On the iPhone for example, AOL.com freezes the device, due to sprites. They found similar problems with the Sony Playstation. Presumably browser sniffing to deliver a non-sprite version of the page to sprite-challenged devices would be the cure.

Yahoo.com! and CSS Sprites

Yahoo uses CSS sprites on its home page to improve performance. The first set of icons is displayed in the “Check your mail status” section on the right of Yahoo.com! (see Figure 3).

Figure 3: Yahoo.com Home Page uses CSS Sprites

Yahoo sets up the “patabs” section with contextual selectors specifying the width of the li items, as well as setting the ul to relative positioning.

#patabs ul.patabs li{
#patabs ul.patabs{

The #patabs li .icon rule loads the composite background sprite pa-icons2.gif (see Figure 4).

#patabs li .icon{
padding:8px 0 9px 40px;
background:url(http://us.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif) 5px 3px no-repeat;

Figure 4: Yahoo.com pa-icons.gif CSS Sprite (truncated)

Next they change the background position to show only the icon that matches the tab ID (in this case #messenger and #music).

#patabs #messenger .icon{
background-position:2px -497px;
#patabs #music .icon{
background-position:5px -197px;

The background-position: 5px -XYZpx shifts the background loaded in the #patabs li .icon rule to display the appropriate icon. Next, all Yahoo has to do to show these icons is class the div with an ID of patabs, the ul with a class of patabs, the li span with a class of icon, and set the id of each li to the name that matches. Yahoo saves five HTTP requests by loading one composite CSS sprite for this section, rather than six separate images. Note that Yahoo automatically expands the tab on rollover with JavaScript.

<div id="patabs">
<ul id="tabs1" class="patabs first">
<li id="mail" class="first">
<a id="pamail" accesskey="m" href="r/m2"><span class="icon">Mail</span></a></h4>
<li id="messenger">
<a id="pamsgr" href="r/p1"><span class="icon">Messenger</span></a>
<li id="music" class="last">
<a id="pamusic" href="r/uf"><span class="icon">Radio</span></a>

Yahoo! Directory CSS Sprite

For the main set of icons on the left side of Yahoo, they use a multiple column composite sprite (see Figure 5).

Figure 5: Yahoo.com trough.gif CSS Sprite (truncated)

The first two rules set up the list and the background image for the anchor within each li.

#trough li{
padding:3px 0 3px 5px;
p\adding:3px 0;
#trough li a{
padding:3px 0 3px 25px;
margin:-1px 0 -2px;
background:url(http://us.i1.yimg.com/us.yimg.com/i/ww/sp/trough_1.4.gif) 0 0 no-repeat;
font:bold 84% verdana;

You may also like...