CSS इमेज स्प्राइट का लाभ

इमेज स्प्राइट एक ही इमेज फ़ाइल में कई इमेज को जोड़ता है। मुख्य लाभ: HTTP रिक्वेस्ट कम करना (लोड टाइम तेज़), इमेज स्विचिंग स्मूथ होना (होवर/एक्टिव स्टेट के लिए), और कैशिंग दक्षता।

उदाहरण

<!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; }

मुख्य बिंदु

• एक HTTP रिक्वेस्ट - कई इमेज के बजाय एक फ़ाइल
• background-position - स्प्राइट शीट से सही भाग दिखाता है
• नो-रिपीट - पूरी शीट टाइल न हो
• फिक्स्ड डायमेंशन - प्रत्येक आइकन के लिए width/height
• परफॉरमेंस - पेज लोड तेज़, होवर स्मूथ