मुफ़्त CSS स्प्राइट जनरेटर
कई छवियों को एक ही स्प्राइट शीट में संयोजित करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
Image Sprite Generator
Combine multiple images into a single sprite sheet with CSS, SCSS, LESS output, retina support, and JSON manifest.
Settings
Images (0)
Click to upload or drag and drop images
PNG, JPG, WebP, GIF supported -- batch upload supported
About Image Sprite Generator
Combine multiple images into a single sprite sheet to reduce HTTP requests and improve web page loading performance. Get CSS, SCSS, or LESS code ready to use, plus JSON manifests for game engines.
- Fewer HTTP requests (faster page loads)
- Better caching (single file to cache)
- Reduced bandwidth (less overhead)
- Smoother hover effects (no image flicker)
- Horizontal: Images side by side
- Vertical: Images stacked vertically
- Grid: Fixed columns, uniform cells
- Packed: Bin packing for smallest size
- Retina @2x and @3x support
- CSS, SCSS mixins, and LESS variables
- JSON sprite manifest for game engines
- Custom sprite naming and batch upload
- Save and restore configurations
Usage: Upload your images, choose a layout and options, then click Generate. Click any sprite in the list to see its CSS position. Download the sprite sheet and code files together, or copy individual snippets.
अक्सर पूछे जाने वाले प्रश्न
स्प्राइट जेनरेटर क्या है?
स्प्राइट जेनरेटर एक मुफ़्त ऑनलाइन टूल है जो वेब अनुकूलन के लिए कई इमेज को एक ही स्प्राइट शीट में संबंधित CSS कोड के साथ जोड़ता है।
क्या स्प्राइट जेनरेटर मुफ़्त है?
हाँ, यह पूरी तरह से मुफ़्त है और इसके लिए किसी रजिस्ट्रेशन की ज़रूरत नहीं है। सारी स्प्राइट जेनरेशन आपके ब्राउज़र में क्लाइंट-साइड पर होती है।
CSS स्प्राइट का उपयोग क्यों करें?
CSS स्प्राइट कई इमेज को एक फ़ाइल में जोड़कर HTTP अनुरोधों को कम करते हैं, जिससे पेज लोड स्पीड और वेबसाइट का समग्र प्रदर्शन बेहतर होता है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। CSS स्प्राइट जेनरेटर सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या CSS स्प्राइट जेनरेटर मोबाइल डिवाइस पर काम करता है?
हाँ, CSS स्प्राइट जेनरेटर पूरी तरह से रिस्पॉन्सिव है और स्मार्टफ़ोन तथा टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर उपयोग कर सकते हैं, किसी ऐप डाउनलोड की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या रजिस्ट्रेशन की ज़रूरत नहीं है। बस अपने ब्राउज़र में CSS स्प्राइट जेनरेटर खोलें और तुरंत इसका उपयोग शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।
कौन-कौन से इमेज फ़ॉर्मैट समर्थित हैं?
CSS स्प्राइट जेनरेटर PNG, JPG/JPEG, WebP और GIF सहित सामान्य इमेज फ़ॉर्मैट का समर्थन करता है। विशिष्ट टूल के आधार पर कुछ सुविधाएँ SVG और BMP का भी समर्थन कर सकती हैं।
मैं CSS स्प्राइट जेनरेटर का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार कोई भी सेटिंग समायोजित करें, और टूल इसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को अपने क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
कौन-कौन से ब्राउज़र समर्थित हैं?
CSS स्प्राइट जेनरेटर Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़रों में काम करता है। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
Horizontal, vertical, grid और packed स्प्राइट लेआउट में क्या फर्क है?
लेआउट यह तय करता है कि आपकी इमेज शीट पर कैसे व्यवस्थित होंगी, और यह उसके फाइनल साइज़ को प्रभावित करता है। Horizontal हर इमेज को एक पंक्ति में लाइन करता है, और vertical उन्हें एक कॉलम में स्टैक करता है — दोनों सरल और अनुमानित (predictable) हैं लेकिन जब इमेज साइज़ अलग-अलग हों तो जगह बर्बाद कर सकते हैं। Grid इमेज को आपकी चुनी हुई कॉलम संख्या के साथ बराबर आकार के सेल्स में रखता है, इसलिए जब आइकन एक-जैसे साइज़ के हों तो यह साफ-सुथरा दिखता है। Packed सबसे स्मार्ट विकल्प है: यह शेल्फ-आधारित बिन पैकिंग का इस्तेमाल करता है, इमेज को ऊंचाई के हिसाब से सॉर्ट करके उन्हें सबसे छोटे संभव आयत में फिट करता है, जिससे आमतौर पर सबसे कॉम्पैक्ट शीट और सबसे छोटी फाइल मिलती है। अगर आपके आइकन मिले-जुले साइज़ के हैं, तो packed से शुरू करें; अगर आपको एक साफ-सुथरा, समान दूरी वाला सेट चाहिए, तो grid इस्तेमाल करें। तय करने से पहले ऊपर कुछ लेआउट आज़माकर जनरेट हुई शीट के आयामों की तुलना करें।
स्प्राइट शीट से एक ही आइकन दिखाने के लिए background-position कैसे काम करता है?
एक स्प्राइट शीट एक ही इमेज होती है जिसमें कई छोटी-छोटी ग्राफिक्स होती हैं, और CSS का background-position उस इमेज को एक फिक्स्ड-साइज़ बॉक्स के पीछे शिफ्ट कर देता है ताकि सिर्फ वही हिस्सा दिखे जो आपको चाहिए। हर जनरेट की गई क्लास शीट को बैकग्राउंड के रूप में सेट करती है, एलिमेंट की चौड़ाई और ऊंचाई को आइकन के आयामों के बराबर तय करती है, फिर नेगेटिव कोऑर्डिनेट्स से इमेज को ऑफसेट करती है — उदाहरण के लिए, background-position: -48px -16px शीट को ऊपर और बाएं खींचता है ताकि उस जगह का आइकन बॉक्स के अंदर आ जाए। ब्राउज़र पूरी शीट को एक ही बार लोड करता है और हर आइकन के लिए उसे दोबारा इस्तेमाल करता है, यही वजह है कि एक ही रिक्वेस्ट से दर्जनों ग्राफिक्स मिल जाती हैं। यह टूल वे सटीक ऑफसेट आपके लिए लिख देता है, हर सोर्स फाइल के लिए एक क्लास बनाकर, ताकि आप बस उस क्लास को किसी एलिमेंट में जोड़ दें। रेडी-टू-पेस्ट पोज़िशनिंग कोड पाने के लिए ऊपर अपनी शीट जनरेट करें।
रेटिना स्प्राइट शीट क्या है और मुझे @2x और @3x आउटपुट कब इनेबल करना चाहिए?
रेटिना, यानी हाई-DPI स्क्रीन, हर CSS पिक्सेल में दो या तीन डिवाइस पिक्सेल पैक कर देती हैं, इसलिए एक स्टैंडर्ड स्प्राइट इन पर धुंधला दिख सकता है। रेटिना इनेबल करने पर सामान्य शीट के साथ-साथ आपकी शीट के @2x और @3x वर्जन दोगुने और तिगुने रिज़ॉल्यूशन पर रेंडर होते हैं, और साथ ही मिलती-जुलती min-resolution मीडिया क्वेरीज़ CSS में लिख दी जाती हैं ताकि हर डिवाइस अपने आप सबसे शार्प शीट लोड करे। इसे तब इनेबल करें जब आपके आइकन को मॉडर्न फोन, टैबलेट और हाई-DPI लैपटॉप पर शार्प बने रहना जरूरी हो — जो कि आज ज़्यादातर प्रोडक्शन साइट्स के लिए सच है। इसका ट्रेड-ऑफ बड़ी फाइलें हैं, क्योंकि @3x एसेट्स का पिक्सेल एरिया नौ गुना होता है, इसलिए सिर्फ डेकोरेटिव या कम दिखने वाली ग्राफिक्स के लिए अक्सर स्टैंडर्ड शीट ही काफी होती है। ऊपर रेटिना विकल्प चेक करें और यह टूल एक्स्ट्रा शीट्स और मीडिया क्वेरीज़ खुद संभाल लेगा।
JSON मैनिफेस्ट क्या है, और क्या मैं इन स्प्राइट्स को Phaser या PixiJS में इस्तेमाल कर सकता हूं?
CSS के साथ-साथ, यह जेनरेटर TexturePacker हैश फॉर्मेट में एक JSON मैनिफेस्ट भी बनाता है, जो हर फ्रेम का नाम, पोज़िशन और साइज़ शीट पर रिकॉर्ड करता है। गेम और कैनवास इंजन इस एटलस को पढ़कर रनटाइम पर एक ही टेक्सचर से अलग-अलग फ्रेम काटते हैं, बजाय कई अलग-अलग इमेज लोड करने के। यह फॉर्मेट Phaser, PixiJS, और JSON स्प्राइट एटलस स्वीकार करने वाली दूसरी लाइब्रेरीज़ के साथ कम्पैटिबल है, इसलिए आप शीट और मैनिफेस्ट को एक साथ लोड करके फ्रेम को उनके मूल फाइलनेम से रेफर कर सकते हैं। इससे यह टूल सिर्फ वेब CSS तक सीमित नहीं रहता — यह HTML5 गेम आर्ट, एनिमेशन और टाइल सेट्स के लिए भी काम आता है, न सिर्फ इंटरफेस आइकन के लिए। ऊपर Download All इस्तेमाल करके स्प्राइट शीट, आपकी स्टाइलशीट, और JSON मैनिफेस्ट को एक ही स्टेप में पाएं ताकि एटलस और इमेज हमेशा सिंक में रहें।
मुझे अपनी स्प्राइट शीट के लिए PNG, WebP या JPEG में से क्या इस्तेमाल करना चाहिए?
फॉर्मेट का चुनाव इस बात पर करें कि आपके स्प्राइट में क्या है। PNG लॉसलेस है और पूरी ट्रांसपेरेंसी बनाए रखता है, जिससे यह उन आइकन, लोगो और UI ग्राफिक्स के लिए सुरक्षित डिफ़ॉल्ट है जिन्हें साफ किनारों या अल्फा की जरूरत होती है। WebP आमतौर पर उसी विज़ुअल क्वालिटी पर सबसे छोटी फाइल देता है और फिर भी ट्रांसपेरेंसी सपोर्ट करता है, इसलिए जब आपको बहुत पुराने ब्राउज़र सपोर्ट करने की जरूरत न हो तो परफॉर्मेंस के लिए यह सबसे अच्छा विकल्प है। JPEG फोटोग्राफिक कंटेंट के लिए उपयुक्त है लेकिन इसमें ट्रांसपेरेंसी नहीं होती और तीखी लाइनों पर आर्टिफैक्ट्स दिख सकते हैं, इसलिए फ्लैट आइकन के लिए इससे बचें। WebP और JPEG के लिए यह टूल 10 से 100 प्रतिशत तक की क्वालिटी स्लाइडर देता है, जिससे आप फाइल साइज़ और फिडेलिटी के बीच संतुलन बना सकते हैं। ज़्यादातर आइकन सेट्स के लिए, हाई क्वालिटी सेटिंग पर WebP शार्प नतीजे और सबसे हल्की शीट देता है — ऊपर अपना फॉर्मेट चुनें और आउटपुट साइज़ की तुलना करें।
संबंधित टूल
मुफ़्त ऑनलाइन इमेज रिसाइज़र
छवियों का आकार किसी भी आयाम में बदलें। आस्पेक्ट रेशियो बनाए रखें या कस्टम आकार सेट करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त ऑनलाइन इमेज कंप्रेसर
गुणवत्ता खोए बिना फ़ाइल का आकार कम करने के लिए छवियों को कंप्रेस करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त ऑनलाइन इमेज क्रॉपर
विज़ुअल एडिटर से छवियों को किसी भी आकार या आस्पेक्ट रेशियो में क्रॉप करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
मुफ़्त Favicon जनरेटर
एक ही छवि से सभी आकारों में favicon बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में, बिना साइन-अप के।
CSS स्प्राइट जेनरेटर के बारे में
CSS स्प्राइट जेनरेटर कई अलग-अलग इमेज — आइकन, बटन, फ्लैग, UI स्टेट्स — को मिलाकर एक ही पैक्ड इमेज बनाता है जिसे स्प्राइट शीट कहते हैं, और साथ ही वह स्टाइलशीट कोड भी लिखता है जो हर एलिमेंट को शीट के सही हिस्से की ओर पॉइंट करता है। आप अपनी इमेज अपलोड करते हैं, यह चुनते हैं कि उन्हें कैसे व्यवस्थित किया जाए, और यह टूल ब्राउज़र में ही कॉम्बाइंड शीट और उससे मेल खाता CSS तैयार कर देता है। यह उन फ्रंट-एंड डेवलपर्स, वेब डिज़ाइनर्स और गेम डेवलपर्स के लिए बनाया गया है जो कम नेटवर्क राउंड-ट्रिप और साफ-सुथरे एसेट फोल्डर चाहते हैं — बिना किसी साइन-अप और बिना किसी सर्वर पर अपलोड के।
स्प्राइट शीट एक सीधे-से आइडिया पर काम करती है: बीस अलग-अलग छोटी आइकन फाइलें लाने के बजाय, ब्राउज़र सिर्फ एक इमेज लाता है और background-position का इस्तेमाल करके सिर्फ उतना ही हिस्सा दिखाता है जितनी जरूरत है। यह तकनीक हर मॉडर्न ब्राउज़र में सपोर्ट होती है।
आप क्या-क्या कॉन्फ़िगर कर सकते हैं
- लेआउट — चार तरह की व्यवस्थाएं उपलब्ध हैं। Horizontal इमेज को एक पंक्ति में लाइन करता है, vertical उन्हें एक कॉलम में स्टैक करता है, grid उन्हें आपकी चुनी हुई कॉलम संख्या के साथ बराबर आकार के सेल्स में रखता है, और packed शेल्फ-आधारित बिन पैकिंग का इस्तेमाल करके इमेज को ऊंचाई के हिसाब से सॉर्ट करके सबसे कॉम्पैक्ट संभव शीट में फिट करता है।
- पैडिंग — सब-पिक्सल स्केलिंग पर ब्लीड से बचने के लिए स्प्राइट्स के बीच 0 से 100 पिक्सेल तक का गैप सेट करें।
- आउटपुट फॉर्मेट — लॉसलेस ट्रांसपेरेंसी के लिए PNG, हाई क्वालिटी पर सबसे छोटी फाइल के लिए WebP, या फोटोग्राफिक कंटेंट के लिए JPEG। WebP और JPEG में 10 से 100 प्रतिशत तक की क्वालिटी स्लाइडर मिलती है।
- अधिकतम आयाम (Maximum dimensions) — शीट की चौड़ाई और ऊंचाई को सीमित करें (डिफ़ॉल्ट 4096px, अधिकतम 16384px तक) ताकि नतीजा टेक्सचर या मेमोरी बजट के भीतर रहे।
- रेटिना शीट्स — चाहें तो स्टैंडर्ड शीट के साथ-साथ @2x और @3x वर्जन भी बना सकते हैं, जिनके लिए मिलते-जुलते
min-resolutionमीडिया क्वेरीज़ खुद-ब-खुद CSS में लिख दी जाती हैं।
जेनरेटर क्या तैयार करता है
जनरेट पर क्लिक करते ही आपको एक डाउनलोड करने लायक स्प्राइट शीट के साथ-साथ तीन तरह का रेडी-टू-पेस्ट कोड मिलता है। CSS आउटपुट एक बेस .sprite क्लास और हर इमेज के लिए एक पोज़िशन्ड क्लास डिफाइन करता है, जिसका नाम आपकी फाइल से लिया जाता है (अक्षरों, अंकों, हाइफ़न और अंडरस्कोर तक सैनिटाइज़ करके)। SCSS आउटपुट वही डेटा दोबारा इस्तेमाल किए जा सकने वाले @mixin ब्लॉक्स के रूप में देता है, और LESS आउटपुट हर स्प्राइट की पोज़िशन और साइज़ को वेरिएबल्स के रूप में एक्सपोज़ करता है। एक JSON मैनिफेस्ट भी TexturePacker हैश फॉर्मेट में जनरेट होता है, जो Phaser, PixiJS और JSON स्प्राइट एटलस पढ़ने वाले दूसरे इंजन के साथ कम्पैटिबल है। किसी भी ब्लॉक को क्लिपबोर्ड पर कॉपी करें, या Download All से शीट, आपकी चुनी हुई स्टाइलशीट, और मैनिफेस्ट एक साथ पाएं (रेटिना शीट्स इनेबल होने पर वे भी शामिल होंगी)।
लिस्ट में किसी भी इमेज पर क्लिक करके उसका सटीक आकार, शीट पर उसकी पोज़िशन, और वह CSS क्लास देखें जिसका इस्तेमाल आप उसे दिखाने के लिए करेंगे।
इमेज को स्प्राइट में क्यों मिलाएं
पेज पर हर इमेज सामान्यतः एक अलग HTTP रिक्वेस्ट होती है, और हर रिक्वेस्ट के साथ कनेक्शन और हेडर का ओवरहेड जुड़ा होता है। कई छोटी ग्राफिक्स को एक स्प्राइट में बंडल करने का मतलब है एक ही रिक्वेस्ट और कैश करने के लिए एक ही फाइल, जिससे लोड टाइम और बैंडविड्थ दोनों घटते हैं — यह छोटे, स्टैटिक UI एसेट्स के सेट्स के लिए सबसे ज़्यादा काम आता है। स्प्राइट्स उस हल्की-सी फ्लिकर को भी हटा देते हैं जो तब होती है जब किसी hover-state इमेज को पहली बार रिक्वेस्ट किया जाता है, क्योंकि हर स्टेट पहले से ही लोड हो चुकी शीट में मौजूद होता है। फोटोग्राफ्स और बड़ी इमेज को आमतौर पर अलग से या मॉडर्न फॉर्मेट में परोसना बेहतर रहता है; स्प्राइट्स आइकन और बार-बार इस्तेमाल होने वाली इंटरफेस ग्राफिक्स के लिए सबसे बेहतर साबित होते हैं।
प्राइवेसी को ध्यान में रखकर बनाया गया
सब कुछ आपके ब्राउज़र के कैनवास का इस्तेमाल करके लोकली चलता है। आपकी इमेज पढ़ी, मिलाई और एनकोड की जाती हैं आपके अपने डिवाइस पर ही — कुछ भी किसी सर्वर पर अपलोड, स्टोर या भेजा नहीं जाता, इसलिए अनरिलीज़्ड आर्टवर्क और क्लाइंट एसेट्स पूरी तरह प्राइवेट रहते हैं। न कोई अकाउंट बनाना है, न कोई इंस्टॉल करना है। यह टूल नाम दिए गए कॉन्फ़िगरेशन (लेआउट, पैडिंग, फॉर्मेट, और स्प्राइट के नाम) को आपके ब्राउज़र के लोकल स्टोरेज में भी सेव कर सकता है ताकि आप बाद में उसी सेटअप को दोबारा लोड कर सकें; यह डेटा भी आपकी मशीन से बाहर कभी नहीं जाता।
ऊपर कुछ इमेज अपलोड करें, एक लेआउट चुनें, और एक ही स्टेप में अपनी स्प्राइट शीट और कोड जनरेट करें।