एन्कोडिंग

Data URI / Base64 इमेज

इमेज को Data URI (data:image/…;base64,…) में एन्कोड करना ताकि CSS/HTML में डाला जा सके, और Data URI या सादे Base64 को वापस फ़ाइल में डिकोड करना — सब कुछ सीधे ब्राउज़र में।

यहाँ इमेज का प्रीव्यू दिखाई देगा।

A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.

How to use it

Common uses

Things to keep in mind

Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.

A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.

इस टूल के बारे में लेख: Data URI: छवियों को सीधे कोड में कब एम्बेड करें

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

Data URI का फ़ायदा क्या है और इसे कब इस्तेमाल करना चाहिए?

यह छोटी इमेज को सीधे CSS या HTML फ़ाइल में एम्बेड कर देता है, जिससे एक अलग HTTP रिक्वेस्ट की ज़रूरत नहीं पड़ती — यह छोटे आइकॉन या स्प्राइट्स के लिए फ़ायदेमंद है, बड़ी इमेज के लिए नहीं।

बड़ी इमेज के लिए Data URI इस्तेमाल करने में क्या दिक़्क़त है?

Data URI एक असली फ़ाइल URL की तरह ब्राउज़र या CDN द्वारा कैश नहीं होती, और Base64 एन्कोडिंग से साइज़ भी करीब 33% बढ़ जाता है — साथ ही कुछ ब्राउज़र और ईमेल क्लाइंट्स में इसकी लंबाई की सीमा भी होती है।

क्या मेरी इमेज कहीं अपलोड होती है?

नहीं, इमेज को Data URI में बदलना या वापस फ़ाइल में डिकोड करना पूरी तरह ब्राउज़र में होता है, कुछ भी सर्वर पर नहीं भेजा जाता।

क्या SVG के लिए Data URI बिना Base64 के इस्तेमाल किया जा सकता है?

हाँ। SVG टेक्स्ट (XML) है, इसलिए Base64 की बजाय स्पेशल कैरेक्टर्स का percent-encoding ही काफ़ी है: data:image/svg+xml,%3Csvg...%3E। यह तरीका ज़्यादा कॉम्पैक्ट होता है और CSS फ़ाइल में सीधे एडिट किए जाने लायक रहता है।

क्या Data URI को href या background-image एट्रिब्यूट में डाला जा सकता है?

हाँ, Data URI वहाँ हर जगह काम करता है जहाँ किसी रिसोर्स का लिंक अपेक्षित हो — src, href, CSS के background-image में और यहाँ तक कि @import में भी। सिंटैक्स और साइज़ की सीमाएँ img टैग जैसी ही रहती हैं।

लेख: एन्कोडिंग

Base64: एन्कोडिंग किस लिए है और यह कैसे काम करता है

Base64 बाइनरी डेटा को ASCII टेक्स्ट में कैसे बदलता है और यह वास्तव में कब ज़रूरी होता है।

Base32: यह Base64 से कैसे अलग है और कब ज़्यादा सुविधाजनक है

Base32 की केस-असंवेदनशील वर्णमाला और वे मामले जहाँ यह Base64 से ज़्यादा सुविधाजनक है।

URL Encode/Decode: लिंक में percent-encoding

पतों और पैरामीटर में विशेष वर्ण %XX अनुक्रमों में कैसे बदलते हैं।

HTML Entities: विशेष वर्णों को सुरक्षित रूप से कैसे दिखाएँ

< > & वर्णों को एस्केप करना क्यों ज़रूरी है और यह मार्कअप को टूटने से कैसे बचाता है।

JWT: टोकन की संरचना और JWT को "डिकोड" करने का क्या मतलब है

JWT के header, payload और signature, और डिकोड करना सिग्नेचर सत्यापन जैसा क्यों नहीं है।

Unicode Escape: \uXXXX अनुक्रमों का क्या मतलब है

JSON और JS स्ट्रिंग में \u0041 जैसे अनुक्रम कहाँ से आते हैं और इनका क्या मतलब है।

ROT13 और सीज़र सिफर: वर्णों की सरल अदला-बदली

13 अक्षरों का शिफ्ट ROT13 को स्व-व्युत्क्रम क्यों बनाता है, और आज इसे क्यों इस्तेमाल किया जाता है।

Punycode: DNS में अंतरराष्ट्रीय डोमेन कैसे काम करते हैं

गैर-लैटिन वर्णों वाला डोमेन xn-- उपसर्ग वाले ASCII रूप में कैसे बदलता है।

मोर्स कोड: टेक्स्ट बिंदुओं और डैश में कैसे बदलता है

अक्षरों को बिंदुओं और डैश में एन्कोड करने का सिद्धांत, और आज मोर्स कोड कहाँ इस्तेमाल होता है।

Gzip + Base64: डेटा को टेक्स्ट के रूप में भेजने के लिए संपीड़न

संपीड़ित बाइनरी डेटा को टेक्स्ट फ़ील्ड में डालने से पहले Base64 में क्यों एन्कोड किया जाता है।

XML Entities: XML दस्तावेज़ों में वर्णों को एस्केप करना

पाँच अनिवार्य XML एंटिटी, जिनके बिना दस्तावेज़ पार्सिंग के दौरान टूट जाता है।