CSS Sprite

So what is CSS Sprite?

CSS Srite is a simple technique of combining several small images into one big image and than using CSS background position property to show the specific image part on the webpage.

What’s the advantage of implementing it?

It can improve your overall page loading time by reducing the total number of HTTP requests. If your website or application has too many small images and they are loading on their own, its better to combine them and load them as one image upfront.

I am still not convinced man!. Do you have any proof?

Fair question. Let me share a screen shot from one my experiment I did at Percussion for product I am working on. The below image shows the before and after Image requests made by browser. Hold your breath!

CSS Sprite


That’s Impressive!. So how do you combine images? Looks like tedious job

I am glad you liked it. Coming back to your question – I normally first categorize the images based on their size (usually width) and also make sure that I don’t end up with very giant CSS Sprite Image. After categorizing them I use a tool call CSS Sprite Generator (Project Fondue) to create sprite image as well as related CSS. It’s that simple.