Data URI जनरेटर क्या है?

Data URI Generator फाइलों को base64-एनकोडेड डेटा URIs में बदलता है जिन्हें आप सीधे HTML, CSS या JavaScript में एम्बेड कर सकते हैं। आइकन और फॉन्ट जैसी छोटी एसेट्स के लिए अतिरिक्त HTTP रिक्वेस्ट खत्म करता है।

20 MB तक की फ़ाइल छोड़िए और टूल MIME टाइप पहचानता है, बाइट्स को base64 में बदलता है, और तीन रेडी-टू-पेस्ट स्निपेट देता है: कच्चा data URI, CSS background-image नियम, और HTML img टैग। तस्वीरों के साथ लाइव प्रीव्यू भी दिखता है, इसलिए ब्लैंक या टूटा आउटपुट प्रोडक्शन कोड में जाने से पहले पकड़ा जा सकता है। आप कोई टेक्स्ट पेस्ट करके SVG या JSON स्ट्रिंग एन्कोड कर सकते हैं, एन्कोड करने से पहले बड़ी इमेज छोटी करके URI को छोटा रख सकते हैं, MIME टाइप गलत पहचाने जाने पर उसे सुधार सकते हैं, एक साथ कई फ़ाइलें एन्कोड कर सकते हैं, किसी रिमोट फ़ाइल को सीधे उसके URL से ला सकते हैं, या डिकोड मोड पर जाकर कोई data URI पेस्ट करके मूल फ़ाइल वापस डाउनलोड कर सकते हैं।

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

1. पिकर से कोई फ़ाइल अपलोड करें, या टेक्स्ट मोड पर जाकर कोई स्ट्रिंग (SVG, JSON, CSS) पेस्ट करके एन्कोड करें।
2. टूल इसे base64 में एनकोड करेगा और सही MIME टाइप के साथ पूरा डेटा URI जनरेट करेगा।
3. img src एट्रिब्यूट, CSS background-image या JavaScript कोड में उपयोग के लिए डेटा URI कॉपी करें।

कब उपयोग करें

• एक छोटी लोगो या आइकन को बिना होस्टिंग वाले एकल HTML डेमो में डालना।
• ईमेल में तस्वीरें इनलाइन डालना ताकि रिमोट लोडिंग ब्लॉक होने पर भी दिखें।
• रेंडर-ब्लॉक करने वाले एक रिक्वेस्ट को हटाने के लिए फ़ॉन्ट या SVG को CSS में चिपकाना।

परिणाम

2KB के favicon.png को डेटा URI में कन्वर्ट करें और सीधे अपने HTML में पेस्ट करें — हर पेज लोड पर एक नेटवर्क रिक्वेस्ट कम।

अक्सर पूछे जाने वाले प्रश्न

एनकोडेड data URI फ़ाइल से लगभग 33% बड़ा क्यों होता है?

Base64 हर 3 बाइनरी बाइट को 4 ASCII अक्षरों में दिखाता है, इसलिए 33% का इज़ाफ़ा। HTTP रिस्पॉन्स पर gzip चालू हो तो ज़्यादातर वापस आ जाता है, पर डिस्क पर HTML या CSS फ़ाइल वाक़ई मूल असेट से बड़ी हो जाती है।

data URI के लिए व्यावहारिक आकार सीमा क्या है?

इनलाइन उपयोग के लिए लगभग 10 KB (एनकोडिंग से पहले) ठीक है। इससे ज़्यादा होने पर ब्राउज़र पार्स तो करता है पर कैश का फ़ायदा खो जाता है (हर पेज पर फिर से पार्स) और HTML/CSS संभालना मुश्किल हो जाता है। बड़ी असेट्स को सामान्य रूप से होस्ट करें।

क्या CSS में data URI को बैकग्राउंड इमेज की तरह यूज़ कर सकते हैं?

हाँ, टूल पूरा CSS नियम सीधे देता है। URI को url() में रखकर background-image में डाल दीजिए। ब्राउज़र पहले पेंट पर ही उसे डिकोड करता है, छोटा आइकन इनलाइन रहता है और पहली रेंडर को धीमा करने वाला नेटवर्क रिक्वेस्ट हट जाता है।

क्या ब्राउज़र data URI को सामान्य इमेज की तरह कैश करता है?

नहीं। data URI पैरेंट डॉक्युमेंट का हिस्सा है, इसलिए वह डॉक्युमेंट के साथ ही कैश होता है। एक ही इमेज को बीस पेजों में रेफ़र किया जाए तो वह बीस बार दोबारा पार्स होगी। कई पेजों में साझा असेट के लिए सामान्य होस्टेड URL कुल मिलाकर तेज़ रहता है।

क्या HTML ईमेल में data URIs चलते हैं?

Gmail और Apple Mail इन्हें दिखाते हैं। Outlook (Windows डेस्कटॉप) इन्हें हटा देता है। व्यापक संगतता के लिए HTML बॉडी में data URI रखने की जगह, इमेज को CID-संदर्भित पार्ट के रूप में अटैच करें।

संबंधित उपकरण