CSS Sprites: Speed Up Your Site

In search engine optimisation speed is crucial for the success of a website, your visitors will stay on your site for longer if your web pages load quickly.

As you may be aware the fewer HTTP requests a given page has, the quicker it loads. Performance related research by Yahoo! User Interface has proven this point. The 80/20 performance rule shows that “only 10% of the time is spent […] for the browser to request the HTML page [..]. The other 90% of the time is spent fetching other components in the page including images, scripts and stylesheets.”

CSS Sprites are by far the easiest and most effective way to reduce HTTP requests. A long time ago sprites have been widely used by early video game developers, and now they’re back with the up and coming web pixel art.

How to use CSS Sprites

In this test I’ve created two basic unordered lists, one using multiple images and the other using a CSS sprite.

The HTML code used for both examples is exactly the same:

<ul>
  <li class="ie">Internet Explorer</li>
  <li class="firefox">Firefox</li>
  <li class="safari">Safari</li>
  <li class="opera">Opera</li>
</ul>

The CSS:

For this example I just wanted to add the browser logo’s next it’s respective text. It’s easy enough to achieve this effect with the following CSS code:

* { font-family:Arial, Helvetica, sans-serif}
ul { list-style:none; margin:0; padding:0}
li { height:61px; line-height:61px; padding-left:65px}
li.ie { background:url(ie.gif) no-repeat}
li.firefox { background:url(firefox.gif) no-repeat}
li.safari { background:url(safari.gif) no-repeat}
li.opera { background:url(opera.gif) no-repeat}

My next example uses a sprite image file. All images were merged in a a single file laid out in a column, meaning only a single file and only a single HTTP request. The sprite is positioned using the CSS background property with the following CSS code:

* { font-family:Arial, Helvetica, sans-serif}
ul { list-style:none; margin:0; padding:0}
li { background: url(browsers.gif) no-repeat top left;
 height:61px; line-height:61px; padding-left:65px}
li.ie { background-position: 0 -212px;}
li.firefox { background-position: 0 -121px;}
li.safari { background-position: 0 -30px;}
li.opera { background-position: 0 -303px;}

The sprite image file size is even smaller because the empty space was compressed. We can also verify that the HTML page using CSS sprites loaded faster. In fact 0.4 seconds faster, it may not seem too much but this is just a small example. Using this technique on entire websites for all those icons, menus, headers or footers images could dramtically improve your website’s performance.

Tino
SEO Programmer

Listen to this podcast

1 Comment

1. I’ve never even thought about using sprite image files before so I’ll have to give this a try.

   How well does this work with IE and Firefox showing pixels differently as they do?

   CommentbyKonc February 27, 2008 @ 2:00 pm

RSS feed for comments on this post
TrackBack URI

Leave a comment

You must be logged in to post a comment.