CSS Sprites

CSS sprites are a technique that has become very popular in recent years. It has been used a lot in many high-traffic websites like Amazon, Apple and Yahoo.

The origin of the term “sprites” comes from the vintage computer graphics industry.

The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the outcome of combining all those layers.

CSS Sprites are pretty much the exact same theory: get the image once, shift it around and only display parts of it. Saves the overhead of having to fetch multiple images.

Benefits

CSS Sprites could reduce the server load by minimizing the number of HTTP Requests and also reducing page load time. 

It is commonly used for navigation, icons and buttons.

Take a three state button for example (a button with hover, active & focus state), if it uses the JavaScript-based method, it requires three HTTP requests for every state change, so it takes time and creates an unpleasant “flickering” of images.

If you use the CSS Sprite method, it loads the page only once without additional HTTP requests.

But is it good to use sprites for all of your images online? If you place all sliced images as background images, it will cause issues for accessibility. The images which convey important information should still use inline html image.