Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

वेब डिज़ाइन में क्या, क्यों और कैसे डाटा URI हैं

by
Length:MediumLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

आइए, आपके साइट के प्रदर्शन को बेहतर बनाने के बारे में देखें, जो उसमें किए गए HTTP अनुरोधों की संख्या को कम करता है। हम डेटा URI योजना के रूप में जाना जाता तकनीक का लाभ उठाने जा रहे हैं; इमेज और फोंट दोनों को शुद्ध डेटा स्ट्रिंग में एन्कोड करना जो सीधे आपके मार्कअप और स्टाइलशीट में एकीकृत हो सकते हैं।

थंबनेल: Broccolidryiconsaniconsetitisfullof…icons विज़ुअल इडियट (हम इन मिनटों में एक मिनट में उपयोग करेंगे ..)


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


क्या, क्यों और कैसे डाटा URI का तरीका

हमने पहले से ही CSS स्प्राइट शीट्स पर देखा है: वेब डिज़ाइनटट्स पर पहले सर्वोत्तम अभ्यास, उपकरण और उपयोगी एप्लीकेशन, यह दिखाते हुए कि आप HTTP अनुरोधों को कम करके और संपूर्ण इमेज फ़ाइल आकार को कम करके प्रदर्शन कैसे सुधार सकते हैं। लेकिन क्या आप जानते हैं कि आप अपने HTML या CSS में केवल एक ASCII टेक्स्ट स्ट्रिंग का उपयोग कर एक इमेज (वास्तव में कोई भी बाइनरी डेटा) का प्रतिनिधित्व कर सकते हैं?

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

डाटा URI का उपयोग करने के लाभ क्या हैं?

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

साइट के HTML या CSS में इमेज डेटा का संयोजन तुरन्त अतिरिक्त संसाधनों को लाने के लिए ब्राउज़र की आवश्यकता को हटा देता है। यद्यपि कच्चे बेस 64 एन्कोडेड डेटा को आमतौर पर अपने अनुकूलित समकक्ष (उदाहरण के लिए एक इमेज) से 33% अधिक माना जाता है, हालांकि, gzipping और CSS फ़ाइल ऑप्टिमाइज़ेशन के बाद फ़ाइल आकार में अंतर सामान्यतः नगण्य है।

डेटा URI किस तरह दिखते हैं?

एक डाटा URI मूलतः बाइनरी डाटा बेस 64 प्रारूप में एन्कोड किया गया है, साथ ही MIME प्रकार, एक वर्णसेट और एन्कोडिंग प्रारूप (बेस 64) सहित ब्राउज़र के लिए कुछ अतिरिक्त जानकारी के साथ।

डेटा URI (अपने सरल रूप में) इस तरह दिखता है:

डेटा इनलाइन HTML इमेज के रूप में URI का उपयोग करने के लिए, प्रारूप इस तरह दिखता है:

CSS में दोहराए जाने वाले बैकग्राउंड की इमेज के रूप में डेटा URI का उपयोग करने के लिए, प्रारूप निम्नानुसार है:

वैकल्पिक रूप से, CSS शॉर्टहैंड वाले बैकग्राउंड तत्वों को गठबंधन करें:

हालांकि हमने डेटा URI के उपयोग को स्पष्ट करने के लिए इमेजेज का उपयोग किया है, मल्टीमीडिया फ़ाइलों, फोंट (जैसा कि हम शीघ्र ही देखेंगे) और बहुत कुछ सहित लगभग किसी भी मीडिया का उपयोग किया जा सकता है।

डेटा URI का उपयोग कैसे करें

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

Repeating Background Tile

हालांकि डेटा URI बहुत फंकी दिख सकता है, एक बनाने की प्रक्रिया बहुत सरल है।

सबसे पहले, वेब सिमेंटिक्स डेटा URI कनवर्टर पर जाएं और इमेज के फ़ाइल स्थान को चुनकर और 'कन्वर्ट इमेज' टूल पर क्लिक करके इमेज अपलोड करें:

Web Semantics Data URI conversion tool

एक बार संसाधित हो जाने पर, यदि आप पृष्ठ नीचे स्क्रॉल करते हैं, तो आप देखेंगे कि यह इमेज बेस 64 एन्कोडेड की तरह दिखती है:

Web Semantics Data URI conversion tool

चूंकि हमें अपनी परियोजना के लिए एक दोहराई बैकग्राउंड की आवश्यकता है, हमें उपकरण द्वारा CSS हमें दिया गया संशोधित करने की आवश्यकता होगी।

एक दोहराई बैकग्राउंड के लिए, निम्न CSS कॉपी और पेस्ट करें:

आइए एक आसान उदाहरण लेते हैं, निम्न इमेज को डेटा URI में परिवर्तित कर और इसे एक इनलाइन इमेज के रूप में हमारे मार्कअप में स्लॉट करते हुए:

Repeating Background Tile

बस ऊपर दिए गए चरणों का पालन करें बेस 64 एन्कोडेड इमेज में कनवर्ट करें और उपकरण द्वारा जेनरेट किए गए HTML मार्कअप की प्रतिलिपि बनाएं ('ए इज़ ए इमेज' पैनल से) और इसे सीधे अपने HTML मार्कअप में पेस्ट करें जिस तरह से आप डालने के लिए एक नियमित इनलाइन इमेज।

इस उदाहरण के लिए अंतिम कोड इस तरह दिखता है:

कब डेटा URI (और कब से बचें) का उपयोग करें

साइट परिसंपत्तियों को बदलने के लिए डेटा URI का उपयोग करने के बारे में वास्तव में कोई भी कठिन और तेज़ नियम नहीं हैं, लेकिन डेटा URI का उपयोग करने के लिए या नहीं चुनने पर विचार करने के लिए कई कमियां और अनन्यताएं हैं।

  • यदि आप समर्थन करने की योजना बना रहे हैं
  • डेटा URI ब्राउज़र द्वारा कैश नहीं किया जाता है, इसलिए उन्हें प्रत्येक पृष्ठ पर डाउनलोड करने की आवश्यकता होगी, भले ही वे ब्राउज़र द्वारा पहले ही प्रदान किए गए हों।
  • डेटा URI छोटे संसाधनों के लिए सबसे उपयुक्त हैं, लेकिन इन्हें बड़े संसाधनों के दंड के बिना बड़े संसाधनों (उदाहरण के फोटो) के लिए इस्तेमाल किया जा सकता है (gzipping के बाद वे मूल फ़ाइल से करीब 2-3% बड़े होते हैं)। हालांकि जागरूक रहें, कि साइट उपयोगकर्ता पूरी संपत्ति डाउनलोड न होने तक कुछ भी नहीं देख पाएंगे, जो मोबाइल पर या धीमे इंटरनेट कनेक्शन के साथ उपयोगकर्ताओं के लिए अवांछनीय हो सकता है।
  • डेटा URI आपके CSS और HTML दस्तावेजों को बहुत गड़बड़ दिखते हैं। बड़ी साइटों और व्यापक डेटा URI उपयोग, स्टाइलशीट्स और मार्कअप पढ़ने, नेविगेट करने और बनाए रखने में अधिक मुश्किल हो जाते हैं।
  • हर बार जब आप किसी परिसंपत्ति में बदलाव करते हैं (उदाहरण के लिए एक spritesheet), तो आपको इमेज फ़ाइल को फिर से सांकेतिक शब्दों में बदलना होगा, अपने वर्कफ़्लो में और अधिक कदम जोड़ना होगा।

बेस 64 एन्कोडेड चिह्न फ़ॉन्ट्स

क्या आपको मुझे याद है कि डेटा URI योजना में कोई भी द्विआधारी डेटा का उपयोग किया जा सकता है? अब जब हमने बेस 64 एन्कोडेड इमेजेज को देखा है, तो अब एक यूट्यूब में एक आइकन फ़ॉन्ट को बदलने और एक प्रोजेक्ट में इसे लागू करने पर एक नज़र डालें।

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

हम एक कस्टम फ़ॉन्ट सेट बनाने, डेटा URI आउटपुट करने और अंतिम CSS कोड उत्पन्न करने के लिए ऑनलाइन वेब ऐप IcoMoon का उपयोग करने जा रहे हैं।

सबसे पहले, IcoMoon साइट पर जाएं और 'एप्लिकेशन का उपयोग शुरू करें' लिंक पर क्लिक करें:

IcoMoon Custom Font App

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

मैंने इस उदाहरण में विजुअल इडियट से ब्रोकॉलिडी फॉन्ट सेट का उपयोग किया है।

Select Your Custom Font Set

इसके बाद, स्क्रीन के तल पर 'फ़ॉन्ट' बटन पर क्लिक करके डाउनलोड सेटिंग पृष्ठ पर जाएं:

Move the Font Download Settings Page

डाउनलोड सेटिंग्स पृष्ठ पर, बेसलाइन को 10% में बदलें, उन्नत विकल्प लाने के लिए सेटिंग आइकन पर क्लिक करें और 'CSS में बेस64 एनकोड और एम्बेड करें' चेकबॉक्स चुनें। अपने फ़ॉन्ट को डाउनलोड करने के लिए 'सेव' आइकन पर क्लिक करें।

Download Settings

कस्टम फ़ॉन्ट डाउनलोड करने और निकालने के बाद, आप अपना फ़ॉन्ट और उनके यूनिकोड जोड़ी देखने के लिए 'index.html' फ़ाइल खोल सकते हैं:

Index.html allows you to view your font pairings

अपने कस्टम चिह्न फ़ॉन्ट का उपयोग करना

अब जब हमने अपना कस्टम आइकन फ़ॉन्ट सेट बनाया है, तो देखते हैं कि हम इसे किसी प्रोजेक्ट में कैसे उपयोग कर सकते हैं।

सबसे पहले, IkoMoon में प्रदान की गई स्टाइलशीट को खोलें और निम्न CSS का पता लगाएं। चूंकि गेम का नाम HTTP अनुरोधों को कम करने के बारे में है, इसलिए हम अपने स्वयं के मुख्य स्टाइल शीट में दिए गए सभी CSS को कॉपी और पेस्ट करने जा रहे हैं।

CSS की ये कुछ पंक्तियां अब आपके कस्टम चिह्न फोंट को सभी आधुनिक ब्राउज़रों पर काम करने के लिए तैयार करेंगे। यदि आप IE9 कम्पेटिबिलिटी मोड और IE के पुराने संस्करणों का समर्थन करना चाहते हैं, तो आपको एक अतिरिक्त नियम जोड़ना होगा (ध्यान दें कि यह अतिरिक्त संसाधन प्राप्त करेगा, लेकिन केवल जब उपयोगकर्ता एजेंट ने उन्हें अनुरोध किया है)।

इन IE फिक्स के बारे में उत्सुक? पॉल आयरिश के पास बुलेटप्रूफ @ फ़ॉन्ट-फेस सिंटैक्स पर एक महान ब्लॉग पोस्ट है।

अब जब हमारे नियम बनाए गए हैं, तो दो तरीके हैं कि हम अपने डिजाइन में कस्टम फॉन्ट को शामिल कर सकते हैं, जो दोनों प्रासंगिक आइकन का संदर्भ देने के लिए यूनिकोड की पात्रता का उपयोग करते हैं। IcoMoon ऐप के बारे में महान बात यह है कि हमारे मुख्य स्टाइलशीट में प्रतिलिपि बनाने के लिए तैयार सभी CSS हमारे लिए पहले ही तैयार किए जा चुके हैं, इस बात पर निर्भर करते हुए कि किस दृष्टिकोण का हम उपयोग करते हैं (या दोनों)।

अपने चिह्न फ़ॉन्ट का उपयोग करना: डेटा चिह्न दृष्टिकोण

अपने आइकन फ़ॉन्ट का उपयोग करने के लिए पहली तकनीक डेटा-आइकन दृष्टिकोण है, जो हमारे मार्कअप को अच्छी और साफ रखती है और स्क्रीन रीडर अनुकूल है।

मान लीजिए कि हम हमारे पृष्ठ पर एक स्पैन तत्व के अंदर टिप्पणी आइकन (इस मामले में यूनिकोड मूल्य के ") शामिल करना चाहते हैं।

हमारे HTML:

संबंधित CSS (डाउनलोड किए गए IcoMoon स्टाइलशीट से सीधे ली गई) इस प्रकार है (टिप्पणियां मेरी हैं)।

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

अपने चिह्न फ़ॉन्ट का उपयोग करना: अतिरिक्त क्लास दृष्टिकोण

एक वैकल्पिक दृष्टिकोण के रूप में, आप आइकन प्रदर्शित करने के लिए अपने HTML में अतिरिक्त CSS वर्गों का उपयोग करना चुन सकते हैं। इसमें आपके मार्कअप में सिमेंटिक, वर्णनात्मक जानकारी को इनपुट करने का लाभ होता है, जिससे आपके कोड की पठनीयता बढ़ जाती है।

इस दृष्टिकोण का उपयोग करने के लिए, ICOMoon स्टाइलशीट द्वारा प्रदान किए गए एक क्लास नाम के साथ अपने HTML में एक तत्व जोड़ें:

हमारा CSS इस तरह दिखता है (टिप्पणियां मेरी हैं)।

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


निष्कर्ष

कुछ अतिरिक्त तरीकों का पता लगाने के लिए समय निकालने के लिए धन्यवाद ताकि आप अपनी अगली परियोजना के लिए डेटा URI का अधिकतम लाभ उठा सकें।

यह याद रखना महत्वपूर्ण है कि डेटा URI हमेशा सबसे अच्छा समाधान नहीं है। जबकि CSS3 के उपयोग, SVG और चिह्न फ़ॉन्ट्स इमेजेज के उपयोग (विशेष रूप से रेस्पॉन्सिव डिजाइन के दायरे में) पर बहुत प्रभावशाली फायदे हैं, बेस 64 में आपकी इमेजेज को एन्कोडिंग के लाभ अधिक सूक्ष्म हैं। अपने अगले प्रोजेक्ट में डेटा URI का उपयोग करने के लिए या नहीं, यह विचार करते समय, कोड बनाए रखने के साथ लोडिंग के समय और कम HTTP अनुरोधों को वजन करते हैं - बस डेटा URI को अपने टूलबॉक्स में एक और उपकरण के रूप में मानें!

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

आपने अपनी परियोजनाओं में आइकन फोंट और डेटा URI का प्रयोग कैसे किया है? सदस्यता लें और एक टिप्पणी छोड़ दो!


अतिरिक्त संसाधन

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.