There's been a lot lately of talk in web development circles about CSS sprites lately. Using them dramatically increases the speed of downloading a webpage with several background images by reducing the amount of HTTP requests the client browser has to make. This is accomplished by consolidating each individual image into a single image. Once consolidated the background-position, height and width CSS properties are tweaked to show only the appropriate part of image. Check out articles from A List Apart and Smashing Magazine for more information and tutorials.
The fun was testing the before and after using YSlow in Firebug. The test subject was a client's website where there were four tabs with different images for three states. The CSS Sprite Generator from Project Fondue can help with the tedious task of making the sprite. The original cluster of transparent pings totaled 6.77 KB which consolidated to 3.83 KB. Combine that with the reduced HTTP requests and that's quite a savings.
Before making the sprite Yslow reports a score of 83. After making the sprite bumped that score up to 88. The total page size was reduced by 43K. This test seems to indicate it'll be worthwhile to make more sprites on this site.
The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.
Example of CSS Minification