One of the latest and most well established design practices are CSS sprites. This is the practice of combing multiple images into a larger and single, composite image. By using the CSS background-position property selected portions of that master image (or sprite) are displayed. The main issue here is how can a larger image witha larger file size be beneficial, especially when compared to several smaller images? The answer lies in HTTP requests and Yahoo’s 80/20 rule explains this much better than I could! To summarise, the numbers of HTTP requests to the websites is drastically cut, thus loading the page much faster in single request. Another major beenfit is that not Javascript is required for mouseover code, so you can make image rollovers easily. I have used this technque in the past, but like a lot of people never knew it was called sprites.
In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL, Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):
Youtube, does things slightly different and uses a absolutely very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list:
<ul id="sprites"> <li><a class="exclamation" href="#">Top Product</a></li> <li><a class="hot" href="#">Sizzlin Offers</a></li> <li><a class="offer" href="#">Special Deals</a></li> </ul>
..and the CSS:
#sprites li { list-style-type:none; font-size:1.1em; display: inline; } #sprites li a { background-image:url('yada.png'); background-repeat:no-repeat; padding:5px 35px; line-height:35px; text-decoration: none; color: #333; } #sprites li a:hover { text-decoration: underline } #sprites li a.hot {background-position:0px -165px} #sprites li a.exclamation { background-position: 0px 0px; } #sprites li a.offer { background-position: 0 -82px; }
The final result is a horizontal list, using a single image for the icons – no CSS hacks required for correct display in all the latest browsers! I won’t bother explaing the HTML or CSS as is self explanatory and very simple.
I personally find CSS sprites most useful for application icons as I can easily add a new icon class and set the background position accordingly. For instance, I’m currently working on a project that uses a lot of the fabulous famfamfam silk icons and have used a sprite generator has limited this work load.
Sprites can be used a for avriety of things, including simple image rollovers – see a quick example I put together using a simple hyperlink and a single background image (image from devianrt). When I hover on the logo the background-position property simply shifts the spirite to right. You can view the result right here!
As with everything, you can take this idea a stage further and apply some JQuery to the mix to create an amazing Flash like menu.
One thought on “CSS Sprities and Website Optimization”