I also like CSS Sprites. So much so, that I put them in Chapter 14 of my book, Pro CSS and HTML Design
Patterns. As you pointed out, the main benefit of a CSS Sprite is to increase the download speed of a website. This works because each file a browser has to download takes time because of latency.
For example, I did some
testing and found out that it is typically not the number of bytes that slows the rendering of a web page (unless the user uses a dialup connection or you include huge image files on your page), it is the number of files. This is because it takes 0.1 to 0.5 seconds per file for a browser to talk to a DNS server to translate a URL into the IP address of the web server and to send an HTTP request to the web server to get the file. Even if a browser caches all the files in a web page, it still takes 0.1 to 0.5 seconds per file just to ask the web server if the file is stale and needs to be updated.
MSN is much slower than Google mainly because each page has so many files to download � a page from MSN takes 6 to 8 seconds on my broadband connection and Google takes 0.5 seconds.
Thus, the best way you can increase the performance of web pages by limiting the number of files the page needs to download. You can put all the images in one CSS sprite, and embed all your CSS and JavaScript in the header of the web page. This will give you maximum performance.
If you are interested in other ways to improve your web pages and dramatically speed your web development, check out my book, Pro CSS and HTML Design patterns. You can view its examples at
http://cssdesignpatterns.com
