इमेज स्प्राइट का उपयोग करने का मुख्य लाभ 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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
ऊपर, हमने निम्नलिखित का उपयोग करके इमेज स्प्राइट सेट किया है -
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}