CSS Sprites

Using CSS sprites is a technique that can reduce the number of HTTP requests needed to display images on a page by combining multiple images into a single file, and then using CSS to display only the 'piece' of the image you are want.

Say you have an application that displays 4 separate images. Each of the following images requires the Web rendering engine to perform a separate HTTP request to download them:

All of the image assets for your application can be combined into a single image. The following is a single image that contains 4 separate colors:

Using CSS the above image can be divided into pieces and each piece can be used as its own image. The result is one HTTP request for all visual assets instead of four:

blue

red

purple

green