CSS Sprities and Website Optimization

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):

Google CSS Sprite

Google CSS Sprite

Youtube, does things slightly different and uses a absolutely massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.

The CSS is relatively simple. Take the example of a simple unordered list with a different image for each item. I made a 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 similar to that on their site. While this is a lot of work initially, my recent discovery the 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

  1. Pingback: Image Masking using Only CSS, HTML and a Transparent PNG Image | Web Design & Development Talk

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>