इस लेख में
CSS स्प्राइट शीट क्या हैं
एक स्प्राइट शीट कई छोटी छवियों को एक ही बड़ी छवि फ़ाइल में जोड़ देती है। हर अलग छवि शीट के भीतर एक निर्धारित क्षेत्र घेरती है। वेब डेवलपमेंट में, हर तत्व के लिए ज़रूरी स्प्राइट शीट के केवल उतने ही भाग को दिखाने के लिए CSS background-position का उपयोग किया जाता है, जिससे HTTP अनुरोध कम होते हैं और पृष्ठ लोड प्रदर्शन बेहतर होता है।
शुरुआती वेब प्रदर्शन अनुकूलन में स्प्राइट शीट अनिवार्य थीं, जब हर छवि के लिए एक अलग HTTP अनुरोध की ज़रूरत होती थी। आधुनिक HTTP/2 मल्टीप्लेक्सिंग के साथ भी, स्प्राइट शीट आइकन सेट, UI तत्वों और गेम एनिमेशन के लिए मूल्यवान बनी हुई हैं, जहाँ दर्जनों छोटी छवियाँ एक साथ उपयोग होती हैं और उन्हें एक ही कैश की गई फ़ाइल के रूप में लोड करने से लाभ मिलता है।
स्प्राइट शीट टूल कैसे काम करता है
कई छवियाँ अपलोड करें, एक लेआउट दिशा चुनें, और स्प्राइट शीट छवि तथा उपयोग के लिए तैयार CSS कोड दोनों प्राप्त करें।
- अपनी छवियाँ अपलोड करें — आइकन, बटन या एनिमेशन फ़्रेम जैसी कई छोटी छवियाँ चुनें
- लेआउट चुनें — क्षैतिज पट्टी, ऊर्ध्वाधर पट्टी या ग्रिड व्यवस्था चुनें, और स्प्राइट्स के बीच की दूरी कॉन्फ़िगर करें
- स्प्राइट शीट और CSS डाउनलोड करें — संयुक्त छवि निर्यात करें और हर स्प्राइट के लिए सटीक background-position मानों वाला स्वतः-उत्पन्न CSS कोड कॉपी करें
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
स्प्राइट शीट टूल खोलें →स्प्राइट शीट का उपयोग कब करें
स्प्राइट शीट एसेट डिलीवरी को अनुकूलित करती हैं और एनिमेशन कार्यप्रवाहों को सरल बनाती हैं।
- वेब प्रदर्शन — छवि अनुरोधों की संख्या घटाने के लिए आइकन सेट और UI तत्वों को एक ही स्प्राइट शीट में जोड़ें, जो विशेष रूप से कई छोटे आइकन वाली साइटों के लिए लाभदायक है
- गेम डेवलपमेंट — कैनवास-आधारित या CSS-एनिमेटेड गेम में कुशल रेंडरिंग के लिए एनिमेशन फ़्रेम को स्प्राइट शीट में पैक करें, जहाँ बैकग्राउंड पोज़िशन को ऑफ़सेट करके क्रमिक फ़्रेम तक पहुँचा जाता है
- ईमेल और लीगेसी समर्थन — HTML ईमेल और उन लीगेसी परिवेशों के लिए स्प्राइट शीट बनाएँ जहाँ आधुनिक छवि लोडिंग तकनीकें उपलब्ध नहीं हैं
अक्सर पूछे जाने वाले प्रश्न
मुझे कौन-सा लेआउट चुनना चाहिए?
क्षैतिज पट्टियाँ क्रम में चलने वाले एनिमेशन फ़्रेम के लिए अच्छी तरह काम करती हैं। ऊर्ध्वाधर पट्टियाँ मेनू और नेविगेशन आइकन के लिए उपयुक्त हैं। बड़े आइकन सेट के लिए ग्रिड लेआउट सबसे अधिक स्थान-कुशल है। आप जो भी लेआउट चुनें, टूल उसके लिए सही CSS background-position मान उत्पन्न कर देता है।
क्या यह टूल CSS कोड उत्पन्न करता है?
हाँ। यह टूल शीट में हर स्प्राइट के लिए सटीक background-position ऑफ़सेट के साथ CSS कोड स्वचालित रूप से उत्पन्न करता है। आप CSS को सीधे अपनी स्टाइलशीट में कॉपी कर सकते हैं और अलग-अलग स्प्राइट दिखाने के लिए दिए गए क्लास नामों का उपयोग कर सकते हैं।
स्प्राइट्स के लिए कौन-से छवि प्रारूप सबसे अच्छे हैं?
PNG आदर्श है क्योंकि यह पारदर्शिता का समर्थन करता है, जो ग़ैर-आयताकार आकृतियों वाले आइकन और UI तत्वों के लिए ज़रूरी है। स्प्राइट शीट को PNG के रूप में निर्यात किया जाता है ताकि आपकी स्रोत छवियों में मौजूद किसी भी पारदर्शी क्षेत्र को बनाए रखा जा सके।