वेब पेजों को बढ़ाने के लिए सीएसएस स्प्राइट्स को कैसे लागू करें



यह लेख आपको CSS SPrites के विस्तृत और व्यापक ज्ञान के साथ प्रदान करेगा और इसका उपयोग वेबसाइटों को चिकना करने के लिए कैसे किया जा सकता है।

स्प्राइट्स की अवधारणा कुछ समय के लिए आसपास रही है। यह एक स्क्रीन पर एनिमेशन प्रदर्शित करने की प्रक्रिया को तेज करने के लिए खेल उद्योग में सबसे अधिक इस्तेमाल की जाने वाली तकनीकों में से एक है। इस लेख में, हम विशेष रूप से देखेंगे कि यह तकनीक निम्नलिखित में सीएसएस स्प्राइट्स की मदद से वेब पेजों पर उपयोगकर्ता के अनुभव को बेहतर बनाने में हमारी मदद कैसे कर सकती है:

स्प्राइट क्या है?

एक प्रेत एक एकल छवि है जो एक खेल में एक बड़े दृश्य का हिस्सा है। कई स्प्राइट को फिर एक बड़ी छवि में जोड़ दिया जाता है जिसे स्प्राइट शीट कहा जाता है। एक बार एक स्प्राइट शीट को मेमोरी में लोड करने के बाद, एनीमेशन के भ्रम को देने के लिए अलग-अलग स्प्राइट को त्वरित उत्तराधिकार में प्रदान किया जाता है। यह खेल में एक दृश्य उत्पन्न करने के लिए दसियों सैकड़ों विभिन्न स्प्राइट्स के लिए एक साथ किया जाता है।





सीएसएस स्प्राइट्स

मूल विचार यह है कि किसी छवि को लोड करना और जहां कहीं भी आवश्यक हो, एकाधिक छवियों को लोड करने और उन्हें प्रदर्शित करने की तुलना में इसके एक हिस्से को प्रदर्शित करना बहुत तेज है।



सीएसएस स्प्राइट क्या है: एक त्वरित अवलोकन?

सीएसएस स्प्राइट एक तकनीक है जिसका उपयोग अक्सर वेब डेवलपर्स वेब पेज के प्रदर्शन को अनुकूलित करने के लिए करते हैं। इस तकनीक में, आमतौर पर समान आयामों वाली कई छोटी छवियों को एक एकल बड़ी छवि में संयोजित किया जाता है, जिसे a स्प्राइट शीट या टाइल सेट । इस स्प्राइट शीट का उपयोग तब अलग-अलग तत्वों को प्रदर्शित करने के लिए किया जाता है, जहाँ हमें उनकी आवश्यकता होती है।

आमतौर पर, लोगो, नेविगेशन तीर, बटन जैसे तत्व स्प्राइट शीट में शामिल होते हैं क्योंकि वे लगभग एक ही आयाम के होते हैं और अक्सर एक वेब पेज में उपयोग किए जाते हैं।

सेलेनियम में डेटा चालित परीक्षण

इसका उदाहरण वेब विकास में कैसे मदद करता है?

आमतौर पर, वेब पेज डिजाइन करते समय छवियों को व्यक्तिगत फ़ाइलों के रूप में संग्रहीत और उपयोग किया जाता है। इसलिए, जब कोई उपयोगकर्ता एक वेबपेज खोलता है, तो ब्राउज़र को इन फ़ाइलों में से प्रत्येक के लिए एक HTTP अनुरोध करना पड़ता है, उन्हें अलग से डाउनलोड करना और उन्हें प्रदर्शित करना है। यह एक विशेष वेब पेज के रूप में बटन, आइकन, लोगो की एक बड़ी संख्या हो सकती है के रूप में उच्च पृष्ठ लोड बार की ओर जाता है।



CSS स्प्राइट्स डेवलपर्स को इन अक्सर उपयोग की जाने वाली छोटी छवियों को एक बड़ी छवि में संयोजित करने में मदद करते हैं। फिर ब्राउज़र को केवल एक फ़ाइल डाउनलोड करनी होती है, जिसे तब उपयोग किया जाता हैछवि को ऑफसेट करके आवश्यक अनुभाग प्रदर्शित करें।

सीएसएस स्प्राइट्स का उपयोग करने के लाभ

सामान्य चित्रों पर CSS स्प्राइट का उपयोग करने के दो मुख्य लाभ हैं:

  • तेज़ पृष्ठ लोड हो रहा है: पृष्ठ लोडिंग समय को बढ़ाता है जैसे ही वेब पेज में उपयोग किए गए चित्र शीट डाउनलोड होते ही दिखाई देते हैं।

  • ग्रेटर थ्रूपुट और निचले संसाधन उपयोग: इतना ही नहीं यह तकनीक पेज लोड को तेज़ बनाकर एंड-यूज़र अनुभव को बेहतर बनाती है,लेकिन यह नेटवर्क कंजेशन को भी कम करता है क्योंकि HTTP रिक्वेस्ट की संख्या कम होती है।

CSS Sprites के साथ काम करते समय एक डेवलपर को क्या करना है?

व्यक्तिगत छवियों के साथ काम करते समय, डेवलपर बस HTML टैग के साथ काम कर सकता है और यदि आवश्यक हो तो इसे सीएसएस में स्टाइल करें। लेकिन सीएसएस स्प्राइट्स के साथ काम करते समय, एक डेवलपर को दो विशिष्ट चीजें करने की आवश्यकता होती है:

  • स्प्राइट शीट का निर्माण

एक वेब पेज विकसित करते समय यदि डेवलपर सीएसएस स्प्राइट्स का उपयोग करने का निर्णय लेता है, तो उसे ग्रिड जैसे पैटर्न में सभी वांछित तत्वों जैसे बटन, लोगो आदि को मर्ज करके सबसे पहले स्प्राइट शीट बनानी होगी। यह फ़ोटोशॉप या जिम्प जैसे किसी भी छवि संपादन कार्यक्रम का उपयोग करके किया जा सकता है। कई ऑनलाइन टूल भी उपलब्ध हैं जो आपको स्प्राइट शीट बनाने में मदद करते हैं। इन उपकरणों पर इस लेख में बाद में चर्चा की गई है।

  • का उपयोग कर स्प्राइट के एक विशेष तत्व तक पहुँचें सीएसएस पृष्ठभूमि-स्थिति संपत्ति

स्प्राइट शीट तैयार हो जाने के बाद, डेवलपर को शीट के विभिन्न हिस्सों तक पहुंचने के लिए CSS विशेषताओं का उपयोग करना होगा।

  • चौड़ाई: स्प्राइट की चौड़ाई
  • ऊंचाई: स्प्राइट की ऊँचाई
  • पृष्ठभूमि: स्प्राइट शीट का संदर्भ
  • पृष्ठभूमि की स्थिति: स्प्राइट शीट के केवल आवश्यक भाग तक पहुंचने के लिए ऑफसेट मान (पिक्सेल में)

CSS Sprite Sheet कैसे बनायें?

आप अपनी छोटी छवियों को ग्रिड में व्यवस्थित करने के लिए किसी भी छवि संपादन सॉफ़्टवेयर का उपयोग कर सकते हैं लेकिन नीचे दो आसान तरीकों पर चर्चा की गई है:

1. ऑनलाइन स्प्राइट शीट क्रिएशन टूल

संपर्क: toptal.com/developers/css/sprite-generator/

यह उपकरण न केवल उपयोग करने के लिए स्वतंत्र है, बल्कि आपको आवश्यक सीएसएस कोड भी प्रदान करता है जिसका उपयोग स्प्राइट शीट को संदर्भित करते समय किया जा सकता है। इसके अलावा, आप तत्वों के बीच पैडिंग और उनके संरेखण को बदलने जैसे विभिन्न गुणों के साथ फील कर सकते हैं।

2. स्प्राइट के साथ स्प्राइट शीट बनाना

यदि आप Grunt, Node या Gulp का उपयोग कर रहे हैं, तो आप Sprit नामक पैकेज स्थापित कर सकते हैं जो आपको PNG, JPG, आदि जैसे विभिन्न स्वरूपों में स्प्राइट शीट बनाने में मदद करेगा।

सबसे पहले, आपको स्प्राइट का उपयोग करके इंस्टॉल करना होगा:

npm स्थापित स्प्राइट -जी

फिर, स्प्राइट शीट जनरेट करने के लिए, निम्न कमांड का उपयोग करें:

sprity ./output-directory//input-directory/*.png

CSS Sprites के साथ कैसे काम करें?

इस उदाहरण में, हम निम्नलिखित स्प्राइट शीट का उपयोग करेंगे:

जैसा कि आप ऊपर की छवि में देख सकते हैं कि छह आइकन (इंस्टाग्राम, ट्विटर और फेसबुक) को ग्रिड जैसे पैटर्न में व्यवस्थित किया गया है। पहली पंक्ति में, हमारे पास एक सामान्य स्थिति होती है और दूसरी पंक्ति में, हमारे पास उनकी होवर स्थिति होती है (एक बार जब हम उन पर माउस कर्सर को घुमाते हैं तो जो छवि दिखाई देती है)।

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

अब MS Paint का उपयोग करके छह आइकनों में से प्रत्येक के लिए आवश्यक ऑफ़सेट प्राप्त करने के लिए एक बहुत ही सरल तरीका देखें। यह स्प्राइट्स के साथ काम करने के लिए एक आदर्श समाधान नहीं हो सकता है, लेकिन चूंकि इसमें एक विशेषता है जो माउस कर्सर के निर्देशांक प्रदान करता है, इसका उपयोग आवश्यक एक्स और वाई निर्देशांक प्राप्त करने के लिए किया जा सकता है।

सबसे पहले, अपनी स्प्राइट शीट छवि (सभी छोटी छवियों वाले ग्रिड) खोलें और अपने माउस कर्सर को स्प्राइट के ऊपरी-बाएँ कोने पर लाएं जिसे आप हथियाना चाहते हैं।

एक बार जब आप अपने स्प्राइट के शीर्ष-बाएँ बिंदु (ऊपरी बाएँ Instagram छवि) का निर्देशांक रखते हैं, तो आप सीएसएस कोड का उपयोग करके जहाँ भी आवश्यक हो, इस विशिष्ट स्प्राइट को प्रदर्शित कर सकते हैं:

पृष्ठभूमि: url ('img_sprites.png')
पृष्ठभूमि-स्थिति: 0 0
चौड़ाई: 125 पीएक्स
ऊंचाई: 125 पीएक्स

हम चौड़ाई और ऊंचाई का उपयोग 125 पिक्सेल के रूप में कर रहे हैं क्योंकि हमारे आइकन उस आयाम के हैं। एक ही पंक्ति में अगली छवि (ट्विटर) लाने के लिए, हम निम्नलिखित कोड का उपयोग करते हैं:

पृष्ठभूमि: url ('img_sprites.png')
बैकग्राउंड-पोजिशन: -128 पीएक्स 0 पीएक्स
चौड़ाई: 125 पीएक्स
ऊंचाई: 125 पीएक्स

उपरोक्त स्निपेट में पृष्ठभूमि-स्थिति विशेषता पर ध्यान दें। (-128px, 0) का अर्थ है कि हम अपनी स्प्राइट शीट को बाईं ओर 128 पिक्सेल (खाते में तत्वों के बीच पैडिंग लेते हुए) और वाई-एक्सिस पर 0 पिक्सेल से ले जा रहे हैं। यदि हम ट्विटर होवर आइकन का उपयोग करते हैं तो हमारी पृष्ठभूमि-स्थिति विशेषता होगी:

पृष्ठभूमि-स्थिति: -128 पीएक्स -128 पीएक्स

इस तरह, अब हम CSS का उपयोग करके अपनी स्प्राइट शीट के प्रत्येक घटक तक पहुँच सकते हैं। इसे कैसे करें, इस पर एक पूर्ण HTML और CSS कोड के माध्यम से जाने दें।

स्टेप 1: आवश्यक HTML कोड लिखना

नीचे दिए गए कोड में, हम केवल तीन लिंक जोड़ रहे हैं। साथ ही, हम अपने HTML को स्टाइलशीट (screen.css) के साथ लिंक करेंगे।

कक्षा='इंस्टाग्राम आइकन'> href='#'>इंस्टाग्राम

कक्षा='ट्विटर आइकन'> href='#'>ट्विटर

कक्षा='फेसबुक चिह्न'> href='#'>फेसबुक

चरण 2: आवश्यक सीएसएस लिखना। सबसे पहले, हम अपने साझा आइकन वर्ग को स्टाइल करेंगे। यहां, आप देख सकते हैं कि हम उस स्प्राइट शीट का संदर्भ दे रहे हैं जो हमने बनाई थी।

/ * साझा आइकन वर्ग * /

स्पान एक लिंक,

स्पान a: का दौरा किया{{

प्रदर्शित करें:खंड मैथा

पाठ इंडेंट:-9999px

जावा उदाहरण में उत्परिवर्ती वर्ग

पृष्ठभूमि छवि: url (./ img_sprites.png)

पृष्ठभूमि दोहराएँ:नहीं-बार-बार

}

चरण 3: ऑफ़सेट का उपयोग करके स्प्राइट शीट से अलग-अलग आइकन प्राप्त करना।

/ * इंस्टाग्राम आइकन * /

स्पैन.इनस्टाग्राम एक लिंक,

स्पैन.इनस्टाग्राम a: का दौरा किया{{

चौड़ाई:125 पीएक्स

ऊंचाई:125 पीएक्स

पृष्ठभूमि की स्थिति:

}

/ * ट्विटर आइकन * /

अवधि एक लिंक,

अवधि a: का दौरा किया{{

चौड़ाई:125 पीएक्स

ऊंचाई:125 पीएक्स

पृष्ठभूमि की स्थिति:-128 पीएक्स

}

/* फेसबुक चिह्न */

स्पैन.फेसबुक एक लिंक,

स्पैन.फेसबुक a: का दौरा किया{{

चौड़ाई:125 पीएक्स

ऊंचाई:125 पीएक्स

पृष्ठभूमि की स्थिति:-257px

}

चरण 4: ऑफ़सेट का उपयोग करके स्प्राइट शीट से होवर आइकन प्राप्त करना।

स्पैन.इनस्टाग्राम a: होवर{{पृष्ठभूमि की स्थिति: -128 पीएक्स}

शेफ एक ऑर्केस्ट्रेशन टूल है

अवधि a: होवर{{पृष्ठभूमि की स्थिति:-128 पीएक्स -128 पीएक्स}

स्पैन.फेसबुक a: होवर{{पृष्ठभूमि की स्थिति:-255px -128 पीएक्स}

सीएसएस स्प्राइट्स का उपयोग करने वाली कंपनियां

उद्योग में कई बड़े नाम अपनी वेबसाइट की जवाबदेही को बेहतर बनाने के लिए सीएसएस स्प्राइट्स का उपयोग करते हैं। Google, Facebook, Amazon जैसी कंपनियां इस पद्धति का बड़े पैमाने पर उपयोग करती हैं क्योंकि इससे उन्हें किसी विशेष उपयोगकर्ता के लिए प्रति सत्र HTTP अनुरोधों की संख्या कम करने में मदद मिलती है। यह बहुत बड़ा लाभ है जब हम इस बात को ध्यान में रखते हैं कि ये कंपनियां किसी भी समय लाखों ग्राहकों की सेवा करती हैं।

अब जब आपके पास सीएसएस स्प्राइट्स हैं और उनके साथ कैसे काम करना है, इस पर आपकी पकड़ है, तो आप सीएसएस सीखने के लिए अपनी यात्रा के करीब एक कदम हैं। स्प्राइट जैसी अवधारणाएं आज के समय में एक गेम-चेंजर हैं क्योंकि यह डेवलपर्स के लिए वेबपेज से हर बिट प्रदर्शन को निकालने के लिए बेहद महत्वपूर्ण हो गया है।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'HTML Images' ब्लॉग के कमेंट सेक्शन में इसका उल्लेख करें और हम आपके पास वापस आएँगे।