इमेज स्प्राइट का उपयोग करने का मुख्य लाभ 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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
