It is basically an image which is a collection of different images put together to form a single image. The use of image sprites is done for two main reasons:
- For faster page loading use only a single image.
- It reduces the bandwidth used to load multiple images. This way less data is consumed.
Image sprites are generally used for designing a graphic social media bar or a navigation bar to make it more attractive and efficient at the same time. It is just a method in HTML and CSS to implement a more efficient way of putting images and designing web pages. Used Image:
Example: This example shows the use of image sprites in CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 100px;
display: block;
}
.gfg {
width: 100px;
left:0px;
background: url(
}
.gfg1 {
width: 100px;
left:120px;
background: url(
}
.gfg2 {
width: 100px;
left:240px;
background: url(
}
</style>
</head>
<body>
<ul id="navlist">
<li class="gfg"><a href="#"></a></li>
<li class="gfg1"><a href="#"></a></li>
<li class="gfg2"><a href="#"></a></li>
</ul>
</body>
</html>
|
Output: 
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!