बैच सीएसएस स्प्राइट्स जनरेटर
कई आइकन या छवियों को एक ही फ़ाइल में संयोजित करें ताकि HTTP अनुरोध कम हों और आपकी वेबसाइट की गति बढ़े। स्वचालित रूप से परफेक्ट CSS कोड जनरेट करें।
स्प्राइट्स उत्पन्न करने के लिए यहां आइकन छोड़ें
PNG, JPG, WebP, AVIF का समर्थन करता है। कई छवियों को एक CSS स्प्राइट शीट में संयोजित करें।
उदाहरणों के साथ आज़माएं
लोड की गई गैलरी
स्प्राइट स्टूडियो
स्प्राइट शीट पूर्वावलोकन
व्यक्तिगत आइकन
| आइकन | क्लास नाम | स्थिति | आकार | कार्रवाई |
|---|
स्प्राइट विकल्प
बैच लागू करें
परिवर्तन पर स्वतः पुनर्जनन
पेशेवर CSS स्प्राइट्स जनरेशन
अपने वेब संसाधनों को अनुकूलित करें, कई छोटी छवियों को एक स्प्राइट शीट में संयोजित करके। विलंबता कम करें, बैंडविड्थ बचाएं और अपने CSS वर्कफ़्लो को सरल बनाएं।
साइट स्पीड बढ़ाएं
कम HTTP अनुरोधों का मतलब है तेज़ पेज लोड। 50 आइकनों को 1 स्प्राइट शीट में मिलाकर, आप सर्वर के लिए 49 राउंड-ट्रिप्स को समाप्त कर देते हैं।
स्वतः जनरेटेड CSS
अब मैन्युअल पिक्सेल गिनने की जरूरत नहीं। हमारा टूल आपकी शीट में हर आइकन के लिए बैकग्राउंड पोजीशन और डाइमेंशन स्वचालित रूप से कैलकुलेट करता है।
स्मार्ट लेआउट्स
लंबवत, क्षैतिज या अनुकूलित ग्रिड लेआउट के बीच चुनें। स्केलिंग के दौरान आइकनों के बीच "ब्लीडिंग" को रोकने के लिए पैडिंग समायोजित करें।
सीएसएस स्प्राइट शीट कैसे बनाएं
अपने आइकन अपलोड करें
वे सभी छोटी छवियाँ या आइकन्स ड्रैग और ड्रॉप करें जिन्हें आप मर्ज करना चाहते हैं। हम PNG, JPG, WebP, और AVIF सपोर्ट करते हैं।
स्प्राइट सेटिंग्स कॉन्फ़िगर करें
लेआउट शैली चुनें, पैडिंग समायोजित करें, और अपना CSS क्लास प्रीफ़िक्स सेट करें। पूर्वावलोकन तुरंत अपडेट हो जाता है।
स्प्राइट और सीएसएस निर्यात करें
अंतिम स्प्राइट शीट और संबंधित CSS कोड को ZIP फ़ाइल के रूप में डाउनलोड करें। बस इसे अपने प्रोजेक्ट में कॉपी और पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
मुझे CSS स्प्राइट्स का उपयोग क्यों करना चाहिए?
CSS स्प्राइट्स एक क्लासिक परफॉर्मेंस तकनीक है। यह HTTP अनुरोधों की संख्या कम करती है, जो धीमे कनेक्शन या आइकन या UI तत्वों जैसी कई छोटी संपत्तियों वाली साइटों पर विशेष रूप से फायदेमंद है।
मुझे कौन सा लेआउट चुनना चाहिए?
लंबवत और क्षैतिज लेआउट डीबग करने में सबसे आसान हैं। अंतिम छवि क्षेत्र और फ़ाइल आकार को कम करने के लिए ग्रिड लेआउट सबसे कुशल है।
उच्च-डीपीआई (रेटिना) स्क्रीन के बारे में क्या?
आप डबल-साइज़ आइकन के साथ एक स्प्राइट शीट जनरेट कर सकते हैं और अपने CSS में "background-size" का उपयोग करके इसे हाई-डीपीआई डिस्प्ले पर तीखी रेंडरिंग के लिए स्केल डाउन कर सकते हैं।