A CSS sprite is a group of images combined into one image. CSS sprites allow you to reduce file size and load time on the page. For example, I’m sure you have seen a graphic that changes when you roll over it. Of course, these graphics are created using separate images for the normal state and the rollover state, but the savvy programmer will combine the two images to create a CSS sprite. Facebook, for example, uses sprites for all of their icons.

The best part about a sprite is that you can combine an unlimited number of images into one. The term “sprite” comes from computer graphics and the video game industry. It was used to describe graphics that were “grabbed” by computer memory and then only displayed one part at a time. This provided faster load time than continually having to grab new images.

How can you create a CSS sprite? (more…)