I haven’t used CSS Sprites a lot in the past, but when I finally started to, the benefits were immediately visible. I won’t go into detail about how to use this technique as it’s been covered in detail. I will, however, try to elaborate on just how much of a benefit CSS Sprites can offer.
Page Load Speed
The first immediately noticeable benefit of CSS Sprite usage is the faster loading time of your page. It may seem counterintuitive, because you would think that the alternative (having many smaller images vs. sometimes extra images for Sprites) would be smaller in total size, but that’s not true. There’s a small amount of extra information in each individual image you use on your site, so depending on the number of images you may end up actually loading less when all is said and done.
Also, one of Yahoo’s best practices for reducing page load time is to minimize HTTP requests. Using the Sprites technique does just that, reduces HTTP requests by combining images in a single file. CSS Sprites are specifically mentioned in the same Yahoo article as a method to reduce image requests.
Accessibility
Depending on your alternative technique, using CSS Sprites could greatly increase the accessibility of your pages. Let’s assume we have the following navigation:
…and we want each element to light up on hover:
You could use individual images for each navigation element, and then switch them out with the latter treatment using JavaScript on hover. Your HTML would look something like this:
...
<img src="nav2.jpg" onmouseover="changeMe(this);" />
<img src="nav3.jpg" onmouseover="changeMe(this);" />
<img src="nav4.jpg" onmouseover="changeMe(this);" />
...
But what happens if a user’s browser doesn’t support JavaScript? Or CSS? Or images? Using CSS Sprites, your HTML code could look like this:
<ul id="navigation">
<li id="nav1"><a href="nav1.html">Nav 1</a></li>
<li id="nav2"><a href="nav2.html">Nav 2</a></li>
<li id="nav3"><a href="nav3.html">Nav 3</a></li>
...
…which would degrade much better in older or alternate browsers.
Time
CSS Sprites are easier than the alternative. Slicing up and dealing with multiple images is time-consuming, as is any necessary JavaScript image manipulation. Plus, there are even several tools that will generate Sprites for you:
And these are just some of the benefits of this technique. If you haven’t at least tried working with CSS Sprites I highly recommend it.
