Sprite Image - A bite on CSS

In my recent task related to application themes I came across a term - "sprite image". In my limited vocabulary and literacy of css it was challenging to interpret what an image with blocks of multiple images meant,was it a doodle by user experience team?

This is how a sample sprite image looks like (apple's sprite):


After some discussions I figured out the image was production ready and should be used by the theme css!With some reading/google it actually turned out to be an interesting concept to club all image in one and make them visible in parts in css using background positioning. Let me dig in more details - with a disclaimer that this post would be very basic introduction, not for pros.

Per w3school.com definition-

"An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth."

If you look at css examples using the sprite image, you would find code like -

.app-nav ul li a:hover {
background: transparent url('sprites-img.png') -3px -597px no-repeat;
}

Where '-3px -597px' is position of the image that should be extracted.

So the next challenge is how to interpret the background position?
If you have paid tools like Photoshop or Adobe firework, the task gets quite simple. Being a newbie to CSS and no access to these paid tool I was looking for something more handy(free?) to do this work for me.
Thanks to few conversations in stackoverflow.com, I came across this online graphics tool - spritecow.com which would tell you the exact position of the image needed. It's slow but its online and its free so I am not complaining! You need to be on latest browser versions to use this tool but its quite useful.
So once the position of images are known its time to get on css skills and use the sprite image.

Other online tool is spriteme.com which I discovered from this very detailed blog. Haven't used it much as I didn't really need to create sprite image, but it can be helpful if you plan to build your own sprite image.

Happy coding!