इस टूल के बारे में
एक CSS स्प्राइट शीट छोटी इमेज के पूरे सेट को — आइकन, UI ग्लिफ़, इमोजी — एक बड़ी इमेज फ़ाइल में पैक कर देती है, फिर हर एलिमेंट के लिए उसका सही हिस्सा दिखाने के लिए CSS के background-position का उपयोग करती है। HTTP/2 के मल्टीप्लेक्सिंग से पहले, यह एक सार्थक परफ़ॉर्मेंस ट्रिक थी: एक दर्जन अलग-अलग छोटी आइकन फ़ाइलों के लिए एक दर्जन अलग कनेक्शन खोलना, एक संयुक्त इमेज के लिए एक ही कनेक्शन खोलने से धीमा होता था, और यह अंतर अब भी HTTP/1.1 कनेक्शन, CDN की सख्त रिक्वेस्ट-काउंट सीमाओं, या धीमे नेटवर्क पर रेंडर-ब्लॉकिंग एसेट रिक्वेस्ट कम करने के मामले में मायने रख सकता है।
यह टूल आपके लिए ये दोनों हिस्से पूरी तरह आपके ब्राउज़र में बनाता है: अपनी आइकन फ़ाइलें छोड़ें, चुनें कि वे एक पंक्ति में हों या एक स्तंभ में, और उनके बीच कितनी पारदर्शी पैडिंग हो, फिर यह उन्हें एक कैनवस पर बनाता है, PNG के रूप में एन्कोड करता है (पारदर्शिता बनाए रखने के लिए), और हर एक के लिए सटीक background-position CSS नियम जनरेट करता है — इसे सीधे अपनी स्टाइलशीट में कॉपी करें। हालाँकि, स्प्राइट एक पुरानी तकनीक है: अधिकांश नई परियोजनाओं के लिए, इनलाइन SVG या SVG आइकन फ़ॉन्ट आमतौर पर बनाए रखना आसान होता है और किसी भी आकार में साफ़-सुथरे ढंग से स्केल होता है, इसलिए इसे एकमात्र सही जवाब न मानकर टूलकिट के एक और टूल के रूप में देखें — इसका उपयोग तब करें जब आपके पास पहले से रैस्टर आइकन (वेक्टर नहीं, PNG) का एक सेट हो और आप रिक्वेस्ट कम करना चाहते हों।
अक्सर पूछे जाने वाले प्रश्न
क्या CSS स्प्राइट्स अभी भी प्रासंगिक हैं, या मुझे इसके बजाय SVG आइकनों का उपयोग करना चाहिए?
अधिकांश नई परियोजनाओं के लिए, इनलाइन SVG या SVG आइकन फ़ॉन्ट/स्प्राइट आमतौर पर अधिक आधुनिक विकल्प होता है (किसी भी ज़ूम स्तर पर स्पष्ट, CSS के साथ आसानी से पुनः रंगा जा सकने वाला, कोई फ़िक्स्ड-पिक्सेल-ग्रिड संरेखण समस्या नहीं)। CSS स्प्राइट्स फ़ोटोग्राफ़िक/रास्टर आइकन सेट्स के लिए वास्तव में उपयोगी बने हुए हैं जिन्हें वेक्टर आकार के रूप में प्रस्तुत नहीं किया जा सकता, उन लीगेसी कोडबेस के लिए जो पहले से ही इस तकनीक के इर्द-गिर्द बने हुए हैं, या बस न्यूनतम HTTP अनुरोधों के साथ एक छोटे आइकन सेट को बंडल करने के तेज़, निर्भरता-मुक्त तरीके के रूप में। जो भी आपकी वास्तविक बाधाओं के अनुकूल हो उसका उपयोग करें — यह टूल तब के लिए है जब रास्टर स्प्राइट शीट काम के लिए सही टूल हो, यह दावा नहीं कि यह हमेशा सबसे अच्छा विकल्प है।
अंतिम इमेज के बाद ट्रेलिंग पैडिंग क्यों नहीं जोड़ी जाती?
यह शीट के कुल आकार को यथासंभव छोटा रखता है — पैडिंग सेटिंग तब मौजूद होती है जब शीट को स्केल/ज़ूम किया जाता है तो आसन्न आइकनों के बीच टेक्सचर-ब्लीड को रोकने के लिए, जो केवल दो आइकनों द्वारा साझा किनारों के लिए एक चिंता का विषय है; शीट के अपने बाहरी किनारे पर दूसरी तरफ़ कोई पड़ोसी आइकन नहीं है, इसलिए वहां अतिरिक्त स्थान उस उद्देश्य की पूर्ति नहीं करेगा और यह केवल फ़ाइल आकार को बर्बाद करेगा और प्रत्येक आइकन की शीट के पूर्ण किनारे से दूरी में उसकी स्थिति के आधार पर असंगति जोड़ देगा।