इमेज स्प्राइट का उपयोग करने का मुख्य लाभ http अनुरोधों की संख्या को कम करना है जो हमारी साइट के लोड समय को तेज करता है।
CSS का उपयोग करके इमेज स्प्राइट से एक आइकन प्रदर्शित करने के लिए कोड निम्नलिखित है -
उदाहरण
<!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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
