Yes, it is a good technique.
You can reduce the number of HTTP requests and it is a page optimization technique.
The first rule in
Best Practices for Speeding Websites by Yahoo
is
Minimize HTTP Requests
80% of the end-user response time is
spent on the front-end. Most of this
time is tied up in downloading all the
components in the page: images,
stylesheets, scripts, Flash, etc.
Reducing the number of components in
turn reduces the number of HTTP
requests required to render the page.
This is the key to faster pages.
CSS Sprites are the preferred method
for reducing the number of image
requests. Combine your background
images into a single image and use the
CSS background-image and
background-position properties to
display the desired image segment.
One way to reduce the number of
components in the page is to simplify
the page's design. But is there a way
to build pages with richer content
while also achieving fast response
times? Here are some techniques for
reducing the number of HTTP requests,
while still supporting rich page
designs.
When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.
It is supported by almost all modern browsers.
This is also a good article on CSS sprites
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
It worked for IE 6 Safari Opera 8+ and FF2+.
You should read this:
Gif Compression
It explains how GIF (and other image files) are compressed.
For example displaying the same data in "rows" instead of "columns" reduces the space usage dramatically.
Furthermore you preload all images and there is no delay if you swap images.
Another plus is that you can use one sprite for a "red" design and another sprite for a "blue" design.
However there is one disadvantage:
Most of the browsers cache the image sprites.
So you might running into troubles when it comes to updating the sprite.
Its a great technique, but you have to be real carefull as how you do it so it works correctly in every browser.
It can be done and is a good optimizing tip, but as always, pay attention as how it works in IE, Firefox and Chrome while you are doing it.
The cons are that it can't be used always, and you have to stick to the least common denominator for cross browser css support.
Done right, it should work fine in all browsers (even IE6).
The biggest con I can think of is that if you have too many images in one sprite, and need to change the dimensions for just one of them, it can cause you to have to change a lot of CSS (since the offsets for other images will probably change as well)
One downside i've run into is that CSS sprites don't seem to print properly in many browsers
Of course, because it saves lot of http request, that very important for your website loading time.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great explanation and everything you need to know about CSS Sprite.
