Tutorial – How to Make CSS Sprites for Images Overview- Part 1

You’ve heard a lot about it, but what is it exactly?

The name “Sprites” might be misleading, its not a cool drink anyway. As you know  a every image in the page is a HTTP-server request, the more of them on a page makes it less efficient, resulting in a much slower load time. So what you understood is : more images => more HTTP requests (links) => more work for the server.

CSS Sprites is a technique use to append multiple images in to a single one and display parts of this sprite wherever necessary with positioning. This helps reducing the number of HTTP-requests and hence saves the overhead of having to fetch multiple images. Which is faster than having to continually fetch new images. Every single image, whether it’s an <img> tag or an background-image from your “style.css” page is a separate HTTP-Request to the server, so you can imagine how quickly those requests can wrack up.

Using CSS sprites technique can help save bandwidth, make your site load much faster. Hope you all know that site speed is one of Google’s ranking factors.

Still Confused? Check the below example:

[Sprite Image]

[CSS coding]

[Hover over to see it in action]

I hope the above example is well understood by all. Most of internet giants like YouTube, AOL, Yahoo have saved million in bandwidth cost and improved the performance of their site. The below is the Yahoo home page where you can see the CSS Sprites usage.

How to Create CSS Sprites and implement them on the page?

Until few years, it used to be much more intensive since you have to manually combine images and then position the background, finally do the tweaking necessary to make everything work. Fortunately, now there are many online tools that can help you create a CSS sprite with least effort.

However, I realized that many bloggers especially webmasters with little CSS knowledge, are not aware of this technique or don’t really know how to use and implement it on the page. For beginners who don’t understand CSS, it might take some time to learn the basics and get going with it.  Anyway, its not a big thing to learn, most of you should be able to understand it with some basic logic. So, how to use CSS Sprites doesn’t have to be problem.

This was an introduction post to CSS Sprites to give you a better understanding of exactly what they are, what they do, and the benefits that they can provide. Since I have to cut short the length of the page, I will be writing Step by Step CSS Sprites tutorial in the follow up post.

In the follow up post (PART 2) I will be explaining detailed steps including a video tutorial for using CSS Sprites of your own and implementing them on your page to improve performance and ranking.

Wait for the FOLLOW UP post to learn how to use CSS Sprites. You can subscribe to our email to receive the next post in your inbox or  follow us on twitter and Facebook fan page to get updated when we publish the Follow up post with the step by step instructions for creating CSS Sprites.