एन्कोडिंग
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
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
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 टैग जैसी ही रहती हैं।