Why Use CSS Sprites Part 1

You’ve heard the term bouncing around the Internet, but still not sure what, why, or how to use CSS Sprites. I’m here to enlighten you on this neat little feature that is sure to help speed up your site. This is part 1 of a 2 part series blog. Part 2 will entail “How To Use CSS Sprites”.

Why would I want to use a CSS sprite?

CSS sprites reduce the total number of http requests, can reduce the total size of the images, and increase your pages load time.

For example, if you build an unordered list and intend of having four (4) different list item images; that is 8 different HTTP requests, assuming you use a hover and are not using the CSS Sprite technique.

Here is an example of what the CSS might look like without the CSS Sprite technique:

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../images/image1.gif')}
#nav li a:hover.item1 {background-image:url('../images/image1_over.gif')}
#nav li a.item2 {background-image:url('../images/image2.gif')}

#nav li a:hover.item2 {background-image:url('../images/image2_over.gif')}

...

Using the CSS Sprites requires we consolidate all four of our images into one image. I will show you more details on how this is done in part 2. After you have the CSS Sprite image created, you will need to create the new CSS for it. My CSS looked like this:

#nav li a {background-image:url('../images/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -54px}
#nav li a.item2 {background-position:0px -108px;}
#nav li a:hover.item2 {background-position:0px -162px;}

...

Now, using the CSS Sprites, we were able to cut down the HTTP requests to 1 and the total file size of all the images to 26 KB. Imagine multiplying that by all the list items you have. It adds up very quickly.

In the end, this will reduce on your load time and increase the user experience. Don’t forget, in Part 2, I will show you how to make and use CSS Sprites.