स्प्राइट इमेज जेनरेटर

चित्र अपलोड करने के लिए क्लिक करें

समर्थित प्रारूप: PNG, JPG, WebP

लेआउट

इमेज स्पेसिंग: 10px

050

स्प्राइट प्रीव्यू के लिए इमेज अपलोड करें

कई छोटे आइकॉन को ऑनलाइन CSS स्प्राइट शीट में मिलाएँ। स्थानीय ब्राउज़र में प्रोसेसिंग, सर्वर पर अपलोड नहीं; background-position वाला CSS कोड हॉरिज़ॉन्टल, वर्टिकल और ग्रिड लेआउट के लिए ऑटो-जेनरेट होता है।

स्प्राइट इमेज (CSS Sprite) क्या है?

स्प्राइट इमेज (CSS Sprite) कई छोटी इमेज को एक बड़ी इमेज में मर्ज करके background-position से व्यक्तिगत आइकॉन प्रदर्शित करने की तकनीक है। «Sprite» शब्द शुरुआती गेम कंसोल से आया है, जहाँ कई एनिमेशन फ्रेम एक बड़ी इमेज में पैक किए जाते थे और तेज़ी से स्विच होते थे। वेब फ्रंटएंड ने यह विचार अपनाकर पृष्ठ के कई छोटे आइकॉन को एक अनुरोध में लोड किया।

**स्प्राइट क्यों ज़रूरी है?** HTTP 1.1 के युग में हर इमेज फ़ाइल एक HTTP अनुरोध उत्पन्न करती थी, साथ में TCP हैंडशेक, TLS हैंडशेक और हेडर ओवरहेड। 100 आइकॉन = 100 अनुरोध। स्प्राइट सभी आइकॉन को एक इमेज में रखता है और एक अनुरोध में सभी आइकॉन लोडिंग पूरी करता है, जिससे पहला रेंडर काफ़ी तेज़ होता है। HTTP/2 मल्टिप्लेक्सिंग इसका कुछ हिस्सा कम करता है, पर CDN कैश, gzip संपीड़न और HTTP/1.1 अनुकूलता में स्प्राइट अब भी मूल्यवान है।

**मूल सिद्धांत:** मान लीजिए 200×60 के स्प्राइट में 60×60 के तीन आइकॉन क्षैतिज रूप से रखे हैं। पहला दिखाने के लिए 60×60 एलिमेंट पर `background: url(sprite.png); background-position: 0 0;` सेट करें। दूसरे के लिए -60px 0, तीसरे के लिए -120px 0। हमारा टूल ये निर्देशांक स्वतः जेनरेट करता है।

**आधुनिक विकल्प:** SVG + use/symbol (अनुशंसित, वेक्टर, रंग परिवर्तनीय, एनिमेशन योग्य), Icon Font (व्यापक अनुकूलता, क्रॉस-प्लेटफ़ॉर्म), HTTP/2 Server Push, वेब फ़ॉन्ट आइकॉन। हर तरीके के अपने परिदृश्य हैं — प्रोजेक्ट की वास्तविक आवश्यकता के अनुसार चुनें।

उपयोग के मामले

बड़ी संख्या में छोटे आइकॉन वाले वेब प्रोजेक्ट जिन्हें स्प्राइट में मर्ज कर HTTP अनुरोध कम करना और पहला लोड तेज़ करना है
फ्रंटएंड डेवलपर प्रोजेक्ट आइकॉन संसाधनों को केंद्रीय रूप से प्रबंधित करना चाहता है और background-position CSS कोड स्वतः जेनरेट करना चाहता है
आइकॉन संसाधन तैयार होने के बाद स्प्राइट + CSS कोड की बैच जेनरेशन कर टीम को सीधे सौंपना
मर्ज के बाद [इमेज कंप्रेशन टूल](/image/compress/) से गुज़ारकर कुल आकार घटाना और LCP मेट्रिक सुधारना
ऐप, Electron या डेस्कटॉप क्लाइंट जिनमें build के अंदर स्टैटिक आइकॉन संसाधनों को एक फ़ाइल में बाँधना हो
ईमेल HTML टेम्पलेट या स्टैटिक ब्लॉग जहाँ कई आइकॉन चाहिए लेकिन ईमेल क्लाइंट अनुकूलता सीमित है
डिज़ाइनर स्प्राइट फ़ॉर्मेट में आइकॉन सौंपता है ताकि फ्रंटएंड इंजीनियर तेज़ी से एकीकृत कर सके
Retina स्क्रीन के लिए 2x रिज़ॉल्यूशन वाला विशेष स्प्राइट जो background-size से 1x और 2x स्क्रीन को समायोजित करता है

उपयोग कैसे करें

अपलोड क्षेत्र पर क्लिक करें या कई इमेज को ड्रैग और ड्रॉप करें (JPG / PNG / WebP / GIF आदि समर्थित)
बाईं सूची में ड्रैग हैंडल या ऊपर/नीचे बटन से आइकॉन क्रम समायोजित करें
बाएँ लेआउट क्षेत्र से «हॉरिज़ॉन्टल», «वर्टिकल» या «ग्रिड» में से एक चुनें
गैप स्लाइडर से आइकॉन के बीच का पिक्सेल गैप समायोजित करें (1-5 px अनुशंसित)
दाईं ओर लाइव प्रीव्यू देखें, फिर «डाउनलोड» से PNG सेव करें और «कॉपी» से CSS कोड प्रोजेक्ट में लाएँ

विशेषताएं

एक क्लिक में कई इमेज मर्ज: कई छोटे आइकॉन या इमेज अपलोड करें, स्वचालित रूप से एक स्प्राइट प्राप्त करें
3 लेआउट मोड: हॉरिज़ॉन्टल, वर्टिकल और ग्रिड, विभिन्न परिदृश्यों के लिए स्वतंत्र रूप से स्विच
समायोज्य गैप: 0-50 px पिक्सेल गैप स्लाइडर से आइकॉन के बीच की दूरी लचीले ढंग से नियंत्रित करें
ड्रैग से क्रम बदलें: सूची में आइकॉन खींचकर मर्ज क्रम बदलें, CSS निर्देशांक स्वतः सिंक्रोनाइज़
मोबाइल क्रम: ऊपर/नीचे बटन से क्रम बदलें, मोबाइल ब्राउज़र पर भी आसान संचालन
स्वचालित CSS जेनरेशन: प्रत्येक उप-इमेज के लिए background-position, चौड़ाई और ऊँचाई की पूरी पोज़िशनिंग कोड
लाइव प्रीव्यू: इमेज या पैरामीटर बदलने पर स्प्राइट तुरंत पुनः निर्मित, WYSIWYG
एक क्लिक CSS कॉपी: इनबिल्ट कॉपी बटन पूरी स्टाइलशीट को क्लिपबोर्ड में कॉपी करता है
एक क्लिक PNG डाउनलोड: मर्ज की गई इमेज स्थानीय रूप से sprite.png नाम से सेव होती है
स्थानीय ब्राउज़र प्रोसेसिंग: Canvas API से स्थानीय मर्जिंग, सर्वर पर अपलोड नहीं
कई फ़ॉर्मेट इनपुट: JPG, PNG, WebP, GIF और अन्य प्रमुख इमेज फ़ॉर्मेट समर्थित
पारदर्शी पृष्ठभूमि संरक्षण: आउटपुट PNG मूल आइकॉन का अल्फ़ा चैनल बनाए रखता है

Best Practices

Retina 2x अनुकूलता: 2x स्रोत से स्प्राइट बनाएँ

यदि लक्षित उपयोगकर्ता Retina डिस्प्ले (Mac, iPhone, HiDPI Windows) का उपयोग करते हैं, तो 2x रिज़ॉल्यूशन वाले स्रोत (जैसे 32×32 आइकॉन) से स्प्राइट बनाएँ, और CSS में background-size: 32px auto सेट करके 16×16 तक सिकोड़ें। एक बार निर्माण से 1x और 2x दोनों स्क्रीन स्पष्ट दिखती हैं और सभी डिवाइस संगत हो जाते हैं।

HTTP/2 प्रोजेक्ट में भी स्प्राइट मूल्यवान है

HTTP/2 मल्टिप्लेक्सिंग अनुरोध संख्या की रुकावट को कम करता है, लेकिन स्प्राइट चार परिदृश्यों में श्रेष्ठ रहता है: CDN कैश पुनः उपयोग, उच्च gzip/Brotli संपीड़न अनुपात, इंट्रानेट प्रॉक्सी पारगमन, और HTTP/1.1 फ़ॉलबैक अनुकूलता। कॉर्पोरेट नेटवर्क, सरकारी और बैंकिंग सिस्टम, ईमेल HTML टेम्पलेट अभी भी HTTP/1.1 पर निर्भर हैं, जहाँ स्प्राइट अप्रतिस्थापनीय है।

PNG-8 बनाम PNG-24 चयन: आइकॉन PNG-8, ग्रेडिएंट PNG-24

स्प्राइट आउटपुट हमेशा PNG होता है, लेकिन स्रोत की बिट गहराई आप चुनते हैं। सपाट या एकल-रंग के आइकॉन PNG-8 में रखें (लॉसलेस पारदर्शिता, PNG-24 से 60-80% छोटा)। ग्रेडिएंट, शैडो और हाइलाइट वाले आइकॉन के लिए PNG-24 ज़रूरी। टूल हर फ़ॉर्मेट स्वीकार करता है, इसलिए पहले PNG कंप्रेसर से स्रोत को ऑप्टिमाइज़ करें।

CDN कैश रणनीति: फ़ाइल नाम में हैश जोड़ें

स्प्राइट बनने के बाद sprite.png को स्थिर नाम न रखें। कंटेंट हैश (जैसे sprite.a3f2b1.png) से नाम बदलें और स्थायी कैश के लिए Cache-Control: max-age=31536000 सेट करें। ब्राउज़र एक बार डाउनलोड करता है, आगे के अनुरोध स्थानीय कैश से मिलते हैं, जो केवल HTTP/2 से अधिक ट्रैफ़िक बचाता है। हमारा टूल sprite.png नाम से आउटपुट देता है, इसलिए डाउनलोड के बाद मैन्युअली नाम बदलें।

gzip / Brotli संपीड़न से स्प्राइट और सघन हो जाता है

मर्ज की गई इमेज में पिक्सेल की निरंतरता अधिक होती है, इसलिए gzip/Brotli इसे बिखरी छोटी इमेज से कहीं बेहतर संपीड़ित करते हैं। Nginx + gzip लेवल 1 से 60-80% छोटा, Brotli से 85%+. Content-Encoding चालू रहने पर 1 MB स्प्राइट वास्तव में 200-300 KB में संचारित होता है — यह स्प्राइट का सबसे कम आँका गया लाभ है।

CSS Modules / Vue scoped अनुकूलता: :global() से लपेटें

यदि प्रोजेक्ट CSS Modules या Vue scoped CSS का उपयोग करता है, तो टूल द्वारा जेनरेट किए गए .icon-home और .sprite क्लास नाम स्थानीय रूप से हैश हो जाएँगे और काम नहीं करेंगे। .module.css में :global(.sprite) { ... } से सामान्य क्लासेस को लपेटें और उन्हें scoped ब्लॉक के बाहर कॉल करें। वैकल्पिक रूप से CSS Modules छोड़कर BEM नामकरण परंपरा अपनाएँ।

Icon Font के साथ संयोजन: मुख्य आइकॉन फ़ॉन्ट में, जटिल आइकॉन स्प्राइट में

प्रोडक्शन में सबसे स्थिर तरीका दोनों का संयोजन है। सामान्य UI आइकॉन (सेटिंग, बंद, खोज, उपयोगकर्ता) Icon Font में बनाएँ (रंग परिवर्तनीय, वेक्टर, क्रॉस-प्लेटफ़ॉर्म)। जटिल रंगीन आइकॉन (उत्पाद लोगो, ऑपरेशनल बैनर) स्प्राइट में रखें। दोनों की ताकत एक-दूसरे की पूरक है और एकतरफ़ा रखरखाव की लागत से बचाता है।

इंजीनियरिंग प्रोजेक्ट में spritesmith, प्रोटोटाइप में हमारा टूल

दीर्घकालिक रखरखाव वाले प्रोजेक्ट के लिए spritesmith (Webpack) या gulp.spritesmith को build फ़्लो में जोड़ें: स्रोत परिवर्तन पर स्वतः रीबिल्ड, हैश वाला फ़ाइल नाम, SCSS/LESS वेरिएबल स्वतः जेनरेट। हमारा टूल डिपेंडेंसी-मुक्त त्वरित प्रोटोटाइप और छोटे प्रोजेक्ट डिलीवरी के लिए उपयुक्त है; CI/CD पाइपलाइन के लिए build प्लगइन बेहतर हैं।

आधुनिक प्रोजेक्ट स्प्राइट से SVG symbol पर माइग्रेट कर सकते हैं

यदि प्रोजेक्ट आधुनिक ब्राउज़र (Chrome / Safari / Firefox / Edge सभी, साथ ही IE 11+) सपोर्ट करता है, तो स्प्राइट से SVG symbol पर माइग्रेशन पर विचार करें: एक फ़ाइल से सभी आइकॉन का प्रबंधन, CSS रंग और एनिमेशन नियंत्रित करता है, background-position निर्देशांकों के रखरखाव की आवश्यकता नहीं। हमारे टूल का आउटपुट एकल-उपयोग संपत्ति है और माइग्रेशन पूर्व के संक्रमण समाधान के रूप में उपयुक्त है।

सामान्य प्रश्न

स्प्राइट इमेज क्या है और कई इमेज को एक में क्यों मर्ज करें?

स्प्राइट इमेज (CSS Sprite) कई छोटी इमेज को एक बड़ी इमेज में मर्ज करके background-position से व्यक्तिगत आइकॉन प्रदर्शित करने की तकनीक है। मर्ज करने के बाद सभी आइकॉन एक ही HTTP अनुरोध में लोड होते हैं, जिससे अनुरोध संख्या में बड़ी कमी और पहले रेंडर की गति बढ़ती है। यह फ्रंटएंड प्रदर्शन ऑप्टिमाइज़ेशन की क्लासिक तकनीक है।

ऑनलाइन कई आइकॉन को स्प्राइट में कैसे मर्ज करें?

इमेज अपलोड करते ही टूल चुने हुए लेआउट में स्वचालित रूप से मर्ज करता है और लाइव प्रीव्यू दिखाता है। साथ ही दाईं ओर हर उप-इमेज के लिए background-position CSS कोड (चौड़ाई और ऊँचाई के साथ) स्वतः जेनरेट होता है, स्टाइलशीट में कॉपी करके उपयोग कर सकते हैं। जेनरेट किया गया स्प्राइट PNG फ़ॉर्मेट में होता है और एक क्लिक में डाउनलोड किया जा सकता है।

जेनरेट किया गया CSS कोड कैसे उपयोग करें?

डाउनलोड की गई sprite.png को प्रोजेक्ट डायरेक्टरी (जैसे /img/sprite.png) में रखें और टूल द्वारा जेनरेट CSS को स्टाइलशीट में पेस्ट करें। आइकॉन दिखाने वाले एलिमेंट में .sprite क्लास और मेल खाती .icon-xxx क्लास जोड़ें, उदाहरण: <i class="sprite icon-home"></i>। क्लास नाम टूल द्वारा मूल फ़ाइल नाम से स्वतः जेनरेट होते हैं।

कौन से प्लेसमेंट लेआउट समर्थित हैं?

तीन मोड समर्थित: हॉरिज़ॉन्टल (आइकॉन एक पंक्ति में बाएँ से दाएँ), वर्टिकल (आइकॉन एक कॉलम में ऊपर से नीचे), और ग्रिड (आइकॉन स्वतः वर्ग मैट्रिक्स में; कॉलम संख्या संख्या के वर्गमूल को ऊपर की ओर गोल कर के बनती है)। बाएँ पैनल से मोड बदलकर प्रीव्यू देख सकते हैं।

क्या आइकॉन के बीच की दूरी समायोजित की जा सकती है?

हाँ। बाएँ पैनल में 0-50 px का पिक्सेल गैप स्लाइडर है, 1-5 px की सिफ़ारिश की जाती है। उचित गैप CSS पोज़िशनिंग में किनारे के पिक्सेल हस्तक्षेप को रोकता है, लेकिन अंतिम उपयोग पर असर नहीं डालता: गैप स्प्राइट के अंदर है, और CSS कॉल में केवल background-position के सटीक निर्देशांक उपयोग होते हैं।

क्या आइकॉन का क्रम बदला जा सकता है?

हाँ। बाईं सूची में प्रत्येक आइटम ड्रैग हैंडल से खींचकर क्रम बदला जा सकता है, मोबाइल पर ऊपर/नीचे बटन से क्रम बदलें। समायोजन के बाद स्प्राइट नए क्रम से पुनः निर्मित होता है और CSS निर्देशांक भी सिंक्रोनाइज़ होकर अपडेट होते हैं।

कौन से इमेज फ़ॉर्मेट समर्थित हैं?

JPG, PNG, WebP, GIF और अन्य सभी सामान्य इमेज फ़ॉर्मेट इनपुट के रूप में समर्थित हैं। आउटपुट हमेशा PNG (पारदर्शी पृष्ठभूमि के साथ) होता है। आइकॉन के लिए PNG इनपुट की सिफ़ारिश की जाती है: PNG का पारदर्शी चैनल स्प्राइट में मर्ज होने के बाद भी सही रहता है।

क्या आधुनिक प्रोजेक्ट में अब भी स्प्राइट ज़रूरी है?

HTTP/2 के प्रसार के बाद मल्टिप्लेक्सिंग ने स्प्राइट के कुछ लाभ कम किए हैं, लेकिन स्प्राइट अब भी CDN कैश, gzip संपीड़न और पहली स्क्रीन के महत्वपूर्ण आइकॉन तेज़ लोडिंग में मूल्यवान है। यदि आइकॉन कम हों (10 से कम) या रंग परिवर्तन व एनिमेशन चाहिए, तो SVG symbol या Icon Font पर स्विच करने की सिफ़ारिश है। बड़े स्टैटिक PNG आइकॉन सेट के लिए स्प्राइट अब भी स्थिर और भरोसेमंद विकल्प है।

क्या Retina स्क्रीन पर स्प्राइट धुँधला दिखता है? कैसे ठीक करें?

हाँ, धुँधला हो सकता है। Retina स्क्रीन (Mac, iPhone, HiDPI Windows) में भौतिक पिक्सेल CSS पिक्सेल के 2-3 गुना होते हैं, इसलिए सामान्य 1x स्प्राइट 2x तक खिंच जाता है और किनारे धुँधले हो जाते हैं। समाधान: 2x रिज़ॉल्यूशन वाले स्रोत (16×16 के बजाय 32×32) से स्प्राइट बनाएँ और CSS में background-size: 32px auto सेट करके 16×16 तक सिकोड़ें।

क्या आइकॉन मर्ज करने से छवि गुणवत्ता घटती है?

गुणवत्ता नहीं घटती। मर्ज प्रक्रिया बस इमेज को बड़े कैनवास पर निर्दिष्ट स्थान पर रखती है; कोई रीसैंपलिंग, संपीड़न या रंग समायोजन नहीं होता। आउटपुट PNG मूल गुणवत्ता बनाए रखता है। अतिरिक्त आकार कमी चाहिए तो डाउनलोड के बाद हमारे [इमेज कंप्रेशन टूल](/image/compress/) का उपयोग करें।

क्या स्प्राइट इमेज सर्वर पर भेजी जाती है? क्या यह सुरक्षित है?

नहीं, नहीं भेजी जाती। सभी मर्जिंग आपके स्थानीय ब्राउज़र में Canvas API के माध्यम से होती है, फ़ाइलें किसी सर्वर पर अपलोड नहीं होतीं और प्रोसेसिंग के बाद हटा दी जाती हैं। संवेदनशील इंटरनल आइकॉन और अप्रकाशित लोगो डिज़ाइन को बेफ़िक्र होकर प्रोसेस किया जा सकता है।

तैयार स्प्राइट कैसे डाउनलोड करें?

इमेज अपलोड के बाद टूल स्वतः प्रीव्यू बनाता है। बाएँ «डाउनलोड» बटन पर क्लिक करके sprite.png को स्थानीय रूप से सहेजें। CSS कोड चाहिए तो टूल स्वतः पूरा CSS जेनरेट करता है, «कॉपी» बटन क्लिपबोर्ड में कॉपी करता है।

क्या क्लास नाम स्वयं सेट किए जा सकते हैं?

वर्तमान संस्करण में क्लास नाम टूल द्वारा मूल फ़ाइल नाम से .icon- प्रीफ़िक्स के साथ स्वतः जेनरेट होते हैं। उदाहरण: home.png अपलोड करने पर .icon-home बनता है। फ़ाइल नामों में अंग्रेज़ी अक्षर, अंक और हाइफ़न का उपयोग करने से स्वच्छ CSS क्लास नाम मिलते हैं।

स्प्राइट, Icon Font या SVG Symbol में से क्या चुनें?

यह परिदृश्य पर निर्भर करता है। बड़ा स्टैटिक PNG आइकॉन सेट या पुराने IE अनुकूलता ज़रूरी हो तो स्प्राइट। रंग परिवर्तन और क्रॉस-प्लेटफ़ॉर्म सामान्य UI आइकॉन के लिए Icon Font। आधुनिक प्रोजेक्ट जहाँ रंग, एनिमेशन और एकल फ़ाइल प्रबंधन चाहिए, SVG Symbol पहली पसंद है। व्यवहार में अक्सर दोनों का संयोजन किया जाता है: मुख्य UI आइकॉन Icon Font में, जटिल रंगीन आइकॉन स्प्राइट में।

मर्ज किए गए स्प्राइट को [इमेज कंप्रेशन टूल](/image/compress/) से और छोटा किया जा सकता है?

हाँ। हमारा टूल लॉसलेस PNG आउटपुट देता है, इसलिए फ़ाइल बड़ी हो सकती है। अनुशंसित वर्कफ़्लो: यहाँ स्प्राइट बनाएँ, फिर [कंप्रेशन टूल](/image/compress/) से PNG आकार कम करें या JPG में बदलें (यदि पारदर्शिता ज़रूरी नहीं), ज़रूरत हो तो [कन्वर्ज़न टूल](/image/convert/) से WebP में बदलें। टूल्स के संयोजन से लोडिंग प्रदर्शन अधिकतम होता है।

शब्दकोश

स्प्राइट इमेज (CSS Sprite): कई छोटी इमेज को एक बड़ी इमेज में मर्ज करके background-position से व्यक्तिगत आइकॉन प्रदर्शित करने की तकनीक। वेब फ्रंटएंड की क्लासिक प्रदर्शन ऑप्टिमाइज़ेशन तकनीक।
background-position: CSS प्रॉपर्टी जो पृष्ठभूमि इमेज के शुरुआती निर्देशांक सेट करती है। स्प्राइट पृष्ठभूमि को बाएँ/ऊपर खिसका कर लक्षित आइकॉन पर ले जाने के लिए ऋणात्मक मान का उपयोग करता है। उदाहरण: background-position: -60px 0 60 px ऑफ़सेट वाले आइकॉन को दिखाता है।
background-size: CSS प्रॉपर्टी जो पृष्ठभूमि इमेज का प्रदर्शन आकार सेट करती है। Retina अनुकूलता की कुंजी: 2x स्रोत से स्प्राइट बनाने के बाद CSS में background-size: 32px auto सेट करके 1x आकार में वापस लाएँ; 1x और 2x दोनों स्क्रीन स्पष्ट रहती हैं।
ग्रिड लेआउट (Grid Layout): इस टूल का ग्रिड मोड आइकॉन संख्या के वर्गमूल को ऊपर गोल करके कॉलम संख्या की स्वतः गणना करता है और पंक्ति-प्राथमिक क्रम में वर्ग मैट्रिक्स में रखता है। उदाहरण: 9 आइकॉन 3×3 ग्रिड में।
आइकॉन गैप (Padding): स्प्राइट में उप-इमेज के बीच का पिक्सेल गैप। 1-5 px अनुशंसित; CSS पोज़िशनिंग में किनारे पिक्सेल हस्तक्षेप रोकता है। गैप स्प्राइट के अंदर है, CSS कॉल में केवल सटीक निर्देशांक उपयोग होते हैं।
PNG पारदर्शी चैनल: PNG फ़ॉर्मेट अल्फ़ा चैनल सपोर्ट करता है, जिससे आइकॉन पृष्ठभूमि पारदर्शी हो सकती है। स्प्राइट PNG फ़ॉर्मेट बनाए रखता है, इसलिए पारदर्शी आइकॉन मर्ज के बाद भी सही दिखते हैं।
HTTP/2 मल्टिप्लेक्सिंग: HTTP/2 प्रोटोकॉल एक कनेक्शन पर कई अनुरोधों को समानांतर प्रोसेस करता है, जिससे स्प्राइट के कुछ लाभ कम होते हैं। हालाँकि CDN कॉन्फ़िगरेशन, पुराने ब्राउज़र अनुकूलता और gzip संपीड़न स्तर में HTTP/2 मर्ज की गई बड़ी इमेज से पीछे रहता है।
SVG Symbol: SVG का <symbol> एलिमेंट और <use> रेफ़रेंस तंत्र: सभी आइकॉन को एक SVG फ़ाइल में एकीकृत करता है, CSS fill, stroke और एनिमेशन नियंत्रित करता है। आधुनिक प्रोजेक्ट में स्प्राइट का पहला विकल्प।
DPR (डिवाइस पिक्सेल अनुपात): Device Pixel Ratio, भौतिक पिक्सेल और CSS पिक्सेल का अनुपात। Retina स्क्रीन DPR = 2, CSS में 16×16 आइकॉन के लिए वास्तव में 32×32 भौतिक पिक्सेल चाहिए। स्प्राइट की Retina अनुकूलता का मूल पैरामीटर।

स्प्राइट इमेज के 3 लेआउट मोड की तुलना

लेआउट मोड	प्लेसमेंट नियम	सामान्य उपयोग
हॉरिज़ॉन्टल	आइकॉन एक पंक्ति में बाएँ से दाएँ	नेविगेशन, Tab बटन, हॉरिज़ॉन्टल टूलबार
वर्टिकल	आइकॉन एक कॉलम में ऊपर से नीचे	वर्टिकल मेनू, लिस्ट प्रीफिक्स, ऊपर-नीचे संरचना
ग्रिड	आइकॉन संख्या के अनुसार ऑटो वर्ग मैट्रिक्स	सामान्य उपयोग, अज्ञात संख्या के लिए सबसे अच्छा

स्प्राइट के लिए अनुशंसित Padding मान

गैप (px)	परिदृश्य	सुझाव
`0px`	आइकॉन किनारे साफ, अपना पारदर्शी padding हो	अधिकतम सघन, किनारे पिक्सेल हस्तक्षेप संभव
`1-2px`	उच्च गुणवत्ता वाले आइकॉन, न्यूनतम सुरक्षा मार्जिन	अनुशंसित मान, सघनता और स्थिरता का संतुलन
`3-5px`	सामान्य आइकॉन जिनमें शैडो या स्ट्रोक हो	सुरक्षित दूरी, लोकप्रिय विकल्प
`6-10px`	आकार में बड़ा अंतर, स्ट्रोक वाले आइकॉन	बड़े आइकॉन छोटे को ढकें नहीं
`10-50px`	डिबगिंग, विज़ुअल ग्रुपिंग	केवल प्रीव्यू के लिए, प्रोडक्शन के लिए नहीं

Retina 2x स्प्राइट के लिए अनुकूलता पैरामीटर

स्क्रीन DPR	CSS आकार	स्रोत आकार	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`