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.
<style>
img.facebook {
width: 46px;
height: 44px;
background: url(social-share-icon.gif) 0 0;
}
img.twitter {
width: 43px;
height: 44px;
background: url(social-share-icon.gif) -91px 0;
img.google+ {
width: 43px;
height: 44px;
background: url(social-share-icon.gif) -91px 0;
}
</style>
</head>
<body>
<img class="home" src="(social-share-icon.gif)"><br><br>
<img class="next" src="(social-share-icon.gif)">
</body>
