Using CSS Sprites to Reduce Load Time

I’ve found quite a few articles and tutorials explaining how CSS sprites are basically the be-all end-all of Web development, going on and on about the idea that all of the icons you use on your Web site should be stored in a single file, reducing the amount of time it takes to load them individually and reducing the number of times a browser has to request something from your Web server.

It’s a great idea, in theory, but it’s not always practical. CSS sprites are extremely useful when you are working with fixed-size (height or width) elements on your site. However, they can be extremely tricky to implement (and generally not worth the effort) when you’re dealing with items that have dynamic heights and widths.

When you are dealing with fixed widths or heights, though, CSS sprites can be fantastic, especially if you have a slower Web server or if a large number of your users have slower Internet connections.