CSS image sprite is a single image like a image-sheet with all
the images needed for your website.
Image sprites is having all the
images needed at one place in a
single image to it makes the browser
work easy while the browser try to
find the image path and hence the
image get loaded easily.
It lowers the number of HTTP
requests needed in a webpage to the
server which makes the page to be
Actually HTTP requests are done in
sequence i.e one request will not
start until the previous one is
completed,due to which opening a
connection to do a request is
expensive. So to reduce the amount
of requests made on the server and
increase the speed of the elements
to be loaded we use sprite image.
Image sprites can also makes images
It can be coded inline via style
It gives image roll over effect a
faster transition because the Hover
image is already loaded into the
browser it only needs to be shifted
Please see the example below to know about the implementation of image sprite.