When a website is developed common scenario is to put all of your images used in the UI in a .css file. Yes some did not use it, which I think is too much old school, but however maybe 99.9% did make it that way. In fact in nowadays sites we’ve more and more rounded corners, more alpha in our images. But what’s a sprite at all.

Well imagine you’ve 20 of these images requested in you .css file, if we suggest we’ve only one stylesheet file. Than when your page is rendered into a browser there must be 20 requests to the server for those images. And so many requests may really slow down your page load. Using only one image with correct

background-image
background-position

properties in you css make your site load really fast.

What’s website optimization?

Most of the beginners think that a website is always fast. That’s true until you start making really big sites. Like Youtube, Vimeo, Yahoo, etc. Take a look at their css files and the background images in them. Yes, they are using sprites – those big images containing all of the background needed for the page. And than the page load may become much faster.

How a sprite can change my load time?

In my case the site loaded for 4 to 5 seconds on a normal speed connection. Than only by making a sprite from our 10 images in the background, it became between 3 and 4 sec. That’s 20%, and 1 second is not so bad in todays’ web space.

How to make it?

You must make your background images as one sprite. At all that may become good practice for the future where for sure there will be only that way. OK, but how I can make it. Well you can generate it online simply by using something like http://spritegen.website-performance.org/ or you can make it alone with some image manipulation programe as GIMP or Adobe Photoshop, it’s up to you.