Advantage of Using CSS Image Sprite

CSS Web Development Front 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;
}

AmitDiwan

Published on 07-May-2020 10:16:26

Previous Page Print Page