इस लेख में
Data URI क्या हैं?
data URI (Uniform Resource Identifier) एक ऐसी योजना है जो आपको किसी बाहरी फ़ाइल से लिंक करने के बजाय फ़ाइल की सामग्री को सीधे URL स्ट्रिंग में एम्बेड करने देती है। RFC 2397 द्वारा परिभाषित, data URI सामग्री को data:[mediatype][;base64],data फ़ॉर्मैट का उपयोग करके इनलाइन एन्कोड करती हैं। इससे संसाधन लाने के लिए अलग HTTP अनुरोध की ज़रूरत ख़त्म हो जाती है।
छोटी images, fonts, SVG और अन्य एसेट को सीधे HTML या CSS में एम्बेड करने के लिए data URI का आमतौर पर उपयोग होता है। किसी बाहरी फ़ाइल को URL से संदर्भित करने के बजाय, पूरी फ़ाइल सामग्री को (आमतौर पर base64 में) एन्कोड करके इनलाइन रखा जाता है। इससे HTTP अनुरोध कम हो सकते हैं और छोटे एसेट के लिए डिप्लॉयमेंट आसान हो जाता है।
Data URI कैसे बनाएँ
एक data URI जनरेटर फ़ाइल सामग्री या टेक्स्ट को data URI फ़ॉर्मैट में बदल देता है। इस प्रक्रिया में MIME टाइप की पहचान और सामग्री को एन्कोड करना शामिल है।
- टेक्स्ट इनपुट — सीधे टेक्स्ट डालें और MIME टाइप बताएँ (text/plain, text/html, text/css, application/json)। टेक्स्ट को URL-एन्कोडेड या base64-एन्कोडेड किया जा सकता है
- फ़ाइल अपलोड — कोई भी फ़ाइल (images, fonts, SVG, दस्तावेज़) अपलोड करें और जनरेटर स्वतः MIME टाइप तय करके सामग्री को base64-एन्कोड कर देता है
- MIME टाइप चयन — मीडिया टाइप ब्राउज़र को बताता है कि डेटा की व्याख्या कैसे करनी है। आम टाइप में image/png, image/svg+xml, text/css, और application/javascript शामिल हैं
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
Data URI जनरेट करें →Data URI का उपयोग कब करें
data URI सबसे अधिक उन छोटे, बार-बार उपयोग होने वाले एसेट के लिए फ़ायदेमंद हैं जहाँ एक HTTP अनुरोध ख़त्म करने से प्रदर्शन बेहतर होता है।
- CSS बैकग्राउंड images — अतिरिक्त अनुरोधों से बचने के लिए छोटे आइकन या पैटर्न को सीधे CSS में एम्बेड करें। यह हर पेज पर दिखने वाली 2-4 KB से कम की images के लिए आदर्श है
- CSS में इनलाइन SVG — जब SVG को सीधे HTML में न रखा जा सके, तब background-image प्रॉपर्टी में SVG आइकन को data URI के रूप में एम्बेड करें
- ईमेल HTML टेम्पलेट — ईमेल HTML में images को सीधे एम्बेड करें क्योंकि कई ईमेल क्लाइंट डिफ़ॉल्ट रूप से बाहरी images को ब्लॉक कर देते हैं। data URI उपयोगकर्ता द्वारा इमेज लोडिंग सक्षम किए बिना ही दिखती हैं
अक्सर पूछे जाने वाले प्रश्न
क्या data URI के लिए कोई आकार सीमा है?
विनिर्देश में कोई कठोर सीमा नहीं है, पर व्यावहारिक सीमाएँ मौजूद हैं। ज़्यादातर आधुनिक ब्राउज़र कई मेगाबाइट तक की data URI संभाल लेते हैं, लेकिन Internet Explorer (लीगेसी) ने इन्हें 32 KB तक सीमित रखा था। Base64 एन्कोडिंग डेटा का आकार लगभग 33% बढ़ा देती है, इसलिए 30 KB की इमेज data URI के रूप में लगभग 40 KB बन जाती है। 5-10 KB से बड़े एसेट के लिए, उचित कैशिंग वाली बाहरी फ़ाइलें आमतौर पर अधिक कुशल होती हैं।
क्या data URI प्रदर्शन को प्रभावित करती हैं?
छोटे एसेट के लिए, data URI HTTP अनुरोधों को ख़त्म करके प्रदर्शन बेहतर करती हैं। हालाँकि, base64-एन्कोडेड डेटा मूल फ़ाइल से लगभग 33% बड़ा होता है, और data URI को ब्राउज़र स्वतंत्र रूप से कैश नहीं कर सकता (ये अपने युक्त दस्तावेज़ के साथ ही कैश होती हैं)। बड़ी फ़ाइलों या कई पेजों पर उपयोग होने वाले एसेट के लिए, कैश हेडर वाली बाहरी फ़ाइलें बेहतर प्रदर्शन करती हैं।
क्या data URI सुरक्षित हैं?
data URI के सुरक्षा निहितार्थ होते हैं। ज़्यादातर ब्राउज़र data URI में JavaScript निष्पादन को ब्लॉक करते हैं (data: प्रोटोकॉल XSS हमलों को रोकते हुए)। हालाँकि, अगर सही तरह से कॉन्फ़िगर न किया जाए तो data URI, Content Security Policy (CSP) नियमों को दरकिनार कर सकती हैं। उपयोगकर्ता द्वारा बनाई गई data URI स्वीकार करते समय, हमेशा MIME टाइप की जाँच करें और उन CSP निर्देशों पर विचार करें जो data: स्रोतों को सीमित करते हैं।