Sprites Example

Not using Sprites

This navigation has this image broken link next to the left of each link and when hovered the image changes to the completed chain. They are two separate files, that is key. Watch what happens when you place the mouse over a link for the first time; look closely.

Using Sprites

To remove the load time of secondary and tertiary images we use a sprite. A CSS sprite simply means to take all those supplimentary images and place them in one image. So that while the image size may be larger, it will load all the images only once. So whereas before we had these two images separately now we have one complete image.