Data URI जनरेटर

Data URI का सिंटैक्स

RFC 2397 में परिभाषित data URI एक छोटी फ़ाइल को URL के अंदर ही रखता है:

data:[<mediatype>][;base64],<data>

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

मीडिया टाइप ब्राउज़र को बताता है कि डेटा को कैसे समझना है; अगर इसे छोड़ दिया जाए, तो text/plain;charset=US-ASCII मान लिया जाता है। ;base64 फ़्लैग का मतलब है कि कॉमा के बाद वाला हिस्सा Base64 है। इसके बिना डेटा सादा टेक्स्ट होता है, जिसमें विशेष अक्षर परसेंट-एनकोड किए जाते हैं।

Base64 या परसेंट-एनकोडिंग

PNG, JPEG, WebP, फ़ॉन्ट और PDF जैसी बाइनरी फ़ाइलों के लिए Base64 सही विकल्प है। यह आकार को हमेशा लगभग 33% बढ़ाता है। टेक्स्ट फ़ॉर्मैट के लिए परसेंट-एनकोडिंग अक्सर छोटी पड़ती है, क्योंकि ज़्यादातर अक्षर जैसे के तैसे रहते हैं और केवल कुछ को, जैसे <, >, #, % और डबल कोट, एस्केप करना पड़ता है। इसलिए यह SVG आइकन के लिए अच्छा विकल्प है, और पढ़ने योग्य परिणाम gzip या Brotli से बेहतर कंप्रेस भी होता है। हालाँकि गैर-ASCII टेक्स्ट का हर बाइट तीन अक्षर बन जाता है, इसलिए देवनागरी, चीनी या सिरिलिक टेक्स्ट के लिए Base64 आमतौर पर छोटा होता है। संदेह हो तो दोनों विकल्प आज़माएँ और जो परिणाम छोटा हो, उसे रखें।

/* CSS में परसेंट-एनकोड किया गया SVG: अंदर सिंगल कोट, # को %23 लिखा गया है */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

इनलाइन करना कब फ़ायदेमंद है

Data URI एक HTTP अनुरोध बचाता है, लेकिन डेटा उस दस्तावेज़ का हिस्सा बन जाता है जिसमें वह मौजूद है:

• अलग से कैशिंग नहीं। HTML में इनलाइन की गई इमेज हर पेज के साथ फिर से डाउनलोड होती है। स्टाइलशीट में इनलाइन की गई इमेज उसी फ़ाइल के साथ कैश होती है, और उसे बदलने पर पूरी स्टाइलशीट का कैश अमान्य हो जाता है।
• पहला रेंडर धीमा। CSS में बड़े data URI रेंडरिंग में देरी करते हैं, क्योंकि ब्राउज़र को पहले पूरी स्टाइलशीट डाउनलोड और पार्स करनी पड़ती है।
• अतिरिक्त आकार। Base64 आकार में एक-तिहाई की बढ़ोतरी करता है, जिसकी भरपाई HTML या CSS को कंप्रेस करने से केवल आंशिक रूप से होती है।

HTTP/2 और HTTP/3 में अतिरिक्त अनुरोध सस्ते होते हैं, इसलिए केवल कुछ किलोबाइट वाले छोटे एसेट ही इनलाइन करें, जैसे आइकन, छोटे प्लेसहोल्डर या कोई ज़रूरी बैकग्राउंड, और बाकी सब कुछ सामान्य फ़ाइलों के रूप में सर्व करें। Content Security Policy वाली साइटों को इनलाइन की गई इमेज और फ़ॉन्ट लोड होने देने के लिए img-src या font-src में data: की अनुमति देनी होगी।