What is Image Sprite?
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
In other words,sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file.
The term sprites comes from a technique in computer graphics, most often used in video games. 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 big combined graphic.
Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. This reduces the overhead of having to fetch multiple images.
Example image for using Sprite Technique

So instead of loading separate image we will use sprite technique then load as a single image with containing all images.
Video for Image Sprite