Prior to working for The Creative Momentum, I had never used CSS image sprites. I had heard the term, but always considered it unnecessary and overly difficult for the returns that it brought about. Turns out, I was wrong. Given proper instruction and a few tools, creating and using sprites is so easy, I do not even consider slicing images an option anymore.
A Brief Explainer
A Sprite (not the drink) is basically a group of images usually set in a transparent png. Using CSS classes and positioning, each image within the sprite can be retrieved and used without loading multiple images. Obviously you will not want to do this with every single image. Image rotators and anything you will change on a regular basis probably will not be something that you want to put in the CSS image sprites, but that is a very low percentage of the images on an average page.
Why it is better
Speed - It is that simple. Using CSS image sprites results in faster load times and less requests back and forth to and from the server.
Usability - It makes your code cleaner. You only use one CSS image sprite class for images which results in practically zero images within the HTML. It results in easier cross-browser testing as well.
Security - People cannot just grab your images because they are all in a sprite and in the CSS as background images. If you are worried about your logos or photographs being taken, this is a good option to consider.
Wrapping things up
Make the switch by spending ten minutes learning how to do it and make your clients happier. There really is no reason not to do it for most images, icons, logos, etc... Some complain that it becomes cumbersome to put that many images in a sprite, but you are still reducing load times by only putting icons and logos there. Even a small CSS Image sprite is better than no sprite at all.
Don’t believe me? Check out the resources below:
A List Apart article on using Sprites