- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Advantage of Using CSS Image Sprite
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
<!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;
}
Updated on 07-May-2020 11:21:01
- Related Questions & Answers
- Display an Icon from Image Sprite using CSS
- Creating a Navigation Menu using CSS Image Sprite
- Vertical alignment of an image using CSS
- Setting Background Image using CSS
- Role of CSS Image Sprites
- Advantage of multiple chip select lines
- Advantage and Disadvantage of Edge Computing
- Usage of background-image property in CSS
- Usage of CSS list-style-image property
- CSS border-image property
- CSS border-image-slice
- CSS border-image-source
- CSS border-image-width
- CSS border-image-repeat
- CSS background-image property
Advertisements