The name CSS Sprite is a little misleading since sprites mean little images but it is actually one big image displayed partly at a time.
Let’s go back a little to the time when we used to play video games. Remember those 2-dimensional graphics where we had few characters and fixed background scenery. That time, hundreds & thousands of these fixed image sprites used to create those graphics. With the advancement of gaming industry and introduction of 3-D games & graphics, the sprites got obsolete.
But they are back again to be used in WEB. This means that instead of using multiple images and rendering those one at a time which is a big overhead for the browser, CSS sprites can be used. Using CSS Sprites, a big master image can be created which can have all these small images. Now to display these images on the page, we just need to adjust the CSS styling such that only the part of image which is required is displayed.
By now, the advantage of using sprite must have been clear. Instead of loading the individual images (could be 30 or 50 in number), just load one master image. Think about the reduction in the number of calls to the server. Also, loading one big image is always better than loading multiple small images.