इमेज से Base64

इमेज को ऐसे टेक्स्ट में बदलें जिसे जड़ा जा सके

इमेज को Base64 में बदलने से फ़ाइल टेक्स्ट की एक लंबी स्ट्रिंग बन जाती है। फिर आप उसे data URI के रूप में सीधे वेब पेज या स्टाइलशीट में जड़ सकते हैं, जैसे <img src="data:image/png;base64,iVBOR...">, उसे JSON पेलोड में डाल सकते हैं, या टेक्स्ट फ़ील्ड में सेव कर सकते हैं, बिना अलग इमेज फ़ाइल के।

इमेज अपलोड करें और एनकोड किया नतीजा कॉपी करें। टूल सिर्फ़ रॉ Base64 देता है, इसलिए data URI बनाते समय data:image/png;base64, prefix (सही इमेज टाइप के साथ) ख़ुद जोड़ें। यह छोटे आइकन, HTML ईमेल सिग्नेचर के लोगो, प्लेसहोल्डर इमेज और सिंगल-फ़ाइल डेमो की एसेट्स के लिए आम तरकीब है।

एक समझौता है: Base64 डेटा को मूल फ़ाइल से लगभग एक-तिहाई बड़ा बना देता है, और जड़ी इमेज को ब्राउज़र अलग से cache नहीं कर सकता। इसे छोटी इमेज के लिए इस्तेमाल करें और बड़ी फ़ोटो सामान्य फ़ाइल के रूप में रखें।

इमेज से Base64 टूल का इस्तेमाल कैसे करें

1. अपने डिवाइस से इमेज फ़ाइल चुनें।
2. टूल को उसे एनकोड करने दें।
3. Base64 आउटपुट कॉपी करें।
4. उसे अपने HTML src, CSS url(), JSON या कोड में पेस्ट करें।

उदाहरण

एक छोटी PNG

इनपुट: 69 बाइट की, 1×1 पिक्सेल PNG

आउटपुट:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mPonL4bAAOIAdw0rRDJAAAAAElFTkSuQmCC

Base64 के 92 अक्षर, 69 बाइट की फ़ाइल से लगभग एक-तिहाई ज़्यादा।

नतीजे को HTML में इस्तेमाल करना

आउटपुट: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">

फ़ाइल टाइप से मेल खाता prefix जोड़ें: image/png, image/jpeg, image/gif, image/webp या image/svg+xml।

आम उपयोग

• छोटे आइकन और लोगो सीधे HTML या CSS में जड़ना।
• सिंगल-फ़ाइल HTML डेमो और प्रोटोटाइप में इमेज शामिल करना।
• Base64 की उम्मीद करने वाले API को JSON के अंदर इमेज भेजना।
• ईमेल टेम्पलेट बनाना (ध्यान दें कि कुछ ईमेल ऐप data-URI इमेज ब्लॉक करते हैं)।
• डेटाबेस या कॉन्फ़िग फ़ाइलों में छोटी इमेज सेव करना।

सुझाव और ज़रूरी बातें

• पहले इमेज ऑप्टिमाइज़र से इमेज ऑप्टिमाइज़ करें; छोटी फ़ाइल का मतलब है बहुत छोटी स्ट्रिंग।
• Base64 कुछ किलोबाइट से छोटी इमेज के लिए सबसे अच्छा है। बड़ी इमेज सामान्य cache होने वाली फ़ाइलों के रूप में तेज़ लोड होती हैं।
• Gmail और कुछ दूसरे क्लाइंट ईमेल में data-URI इमेज नहीं दिखाते। ज़रूरी ईमेल इमेज को होस्ट करें।
• नतीजे को Base64 से इमेज में पेस्ट करके जाँचें।

खास स्थितियाँ और सीमाएँ

• अपलोड साइट के अधिकतम फ़ाइल साइज़ तक सीमित हैं; उससे ऊपर टूल एरर दिखाता है।
• आउटपुट बिना ब्रेक की एक लंबी लाइन है, जो data URI के लिए ज़रूरी है।
• SVG फ़ाइलें पहले से टेक्स्ट हैं। SVG के लिए आप अक्सर Base64 छोड़कर URL-एनकोड किया SVG सीधे जड़ सकते हैं, जो छोटा होता है।

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

data URI क्या है?

यह ऐसा URL है जिसमें फ़ाइल का डेटा ही होता है, जैसे data:image/png;base64,... ब्राउज़र इसे लिंक की गई इमेज की तरह ही दिखाते हैं।

क्या Base64 इमेज को बड़ा बनाता है?

हाँ, लगभग 33%, क्योंकि हर 3 बाइट 4 अक्षर बन जाते हैं।

क्या Base64 वेबसाइट परफ़ॉर्मेंस के लिए अच्छा है?

बहुत छोटी इमेज के लिए यह एक HTTP रिक्वेस्ट बचा सकता है। बड़ी इमेज के लिए आमतौर पर नुकसान करता है, क्योंकि पेज का HTML या CSS भारी हो जाता है और अलग से cache नहीं हो सकता।

कौन-से इमेज फ़ॉर्मेट सपोर्टेड हैं?

आम वेब फ़ॉर्मेट जैसे JPG, PNG, GIF, WebP और SVG।

संबंधित टूल

• Base64 से इमेज: Base64 इनपुट को इमेज में डिकोड करें।
• इमेज ऑप्टिमाइज़र: इमेज को कंप्रेस और ऑप्टिमाइज़ करें ताकि साइज़ छोटा हो पर क्वालिटी ऊँची रहे।
• Base64 एनकोडर: किसी भी स्ट्रिंग को Base64 में एनकोड करें।
• कलर पिकर: कलर व्हील से रंग चुनें और उसे किसी भी फ़ॉर्मेट में पाएँ।
• EXIF रीडर: इमेज अपलोड करें और उसका EXIF डेटा निकालें।