Advantage of Using CSS Image Sprite

CSSWeb DevelopmentFront End Technology

The main advantage of using image sprite is to reduce the number of http requests that makes our site’s load time faster. The images also load faster making switching from one image to another on some event much smoother. Image Sprite are a collection of images placed into a single image.

Following is the code showing the image sprite advantage using CSS −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

Output

The above code will produce the following output −

Above, we have set image sprite using the following −

.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
raja
Published on 07-May-2020 10:16:26
Advertisements