इमेज → Base64 कन्वर्टर

किसी भी छवि को Base64 data URI में एनकोड करें, या data URI पेस्ट करें और इसे वापस छवि में डिकोड करें। परिणाम कॉपी करें या CSS url() स्निपेट लें। कुछ भी आपके डिवाइस से नहीं जाता।

Image से Base64 कैसे काम करता है

Image to Base64 आपकी इमेज फ़ाइल पढ़ता है और उसे एक Base64 data URI के रूप में एन्कोड करता है जिसे आप बिना अलग फ़ाइल अनुरोध के HTML, CSS या JSON में सीधे एम्बेड कर सकते हैं। कनवर्ज़न आपके ब्राउज़र में FileReader API का उपयोग करता है; आपकी इमेज से कोई बाइट सर्वर पर नहीं भेजी जाती। आप Base64 स्ट्रिंग वापस पेस्ट करके इमेज डीकोड और प्रीव्यू भी कर सकते हैं, सब कुछ स्थानीय रूप से।

Base64 data URI बाइनरी मूल से लगभग 33% बड़ा होता है क्योंकि तीन बाइट्स का प्रत्येक समूह चार ASCII वर्णों तक विस्तारित होता है। यह आकार वृद्धि किसी दस्तावेज़ या stylesheet में इमेज इनलाइन करने की सुविधा के लिए अपेक्षित ट्रेड-ऑफ है। टूल आपको raw Base64 स्ट्रिंग और तैयार-उपयोग HTML img टैग स्निपेट और CSS background-image स्निपेट दिखाता है, ताकि आप अपने प्रोजेक्ट में त्वरित कॉपी-पेस्ट कर सकें।

लिखा है Bastien Sulyan

Image से Base64: चरण दर चरण उपयोग विधि

एक इमेज फ़ाइल अपलोड क्षेत्र पर ड्रॉप करें या ब्राउज़ करने के लिए क्लिक करें। स्वीकृत फॉर्मेट: JPEG, PNG, WebP, GIF, SVG।
Base64 data URI तुरंत आउटपुट फ़ील्ड में दिखाई देता है।
raw Base64 स्ट्रिंग कॉपी करें, या पूर्व-स्वरूपित HTML img टैग या CSS background-image स्निपेट उपयोग करें।
डीकोड करने के लिए, इनपुट फ़ील्ड में Base64 स्ट्रिंग पेस्ट करें और इमेज प्रीव्यू करने के लिए decode mode पर स्विच करें।
किसी भी स्निपेट को क्लिपबोर्ड पर कॉपी करने के लिए उसके बगल में copy बटन पर क्लिक करें।

सामान्य उपयोग के मामले

एक फ्रंट-एंड डेवलपर अतिरिक्त HTTP अनुरोध समाप्त करने के लिए CSS फ़ाइल में एक छोटे आइकन को data URI के रूप में इनलाइन करता है।
एक डेवलपर एक छोटा लोडिंग स्पिनर Base64 src एट्रिब्यूट के रूप में एम्बेड करता है ताकि JavaScript बंडल लोड होने से पहले प्लेसहोल्डर इमेज उपलब्ध हो।
एक QA इंजीनियर API टेस्ट के लिए JSON पेलोड में सीधे पेस्ट करने के लिए टेस्ट इमेज का Base64 कॉपी करता है।
एक ईमेल टेम्पलेट बिल्डर सिग्नेचर लोगो को Base64 data URI के रूप में इनलाइन करता है क्योंकि कुछ ईमेल क्लाइंट बाहरी इमेज अनुरोध ब्लॉक करते हैं।

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

Base64 आउटपुट मेरी मूल फ़ाइल से एक तिहाई बड़ा क्यों है?

Base64 एन्कोडिंग प्रत्येक तीन बाइनरी बाइट्स को चार ASCII वर्णों (4/3 अनुपात) के रूप में दर्शाता है। बाइनरी में 100 KB की इमेज Base64 स्ट्रिंग के रूप में लगभग 133 KB बन जाती है। यह एन्कोडिंग योजना में निहित है, कोई टूल सीमा नहीं।

क्या एन्कोडिंग के दौरान इमेज सामग्री सर्वर पर प्रेषित होती है?

नहीं। FileReader API बाइनरी फ़ाइल आपकी लोकल डिस्क से पढ़ता है और परिणाम सीधे आपके ब्राउज़र टैब के अंदर JavaScript एन्कोडिंग फ़ंक्शन को देता है। इमेज डेटा आपके डिवाइस से नहीं जाता।

क्या मैं data URI आउटपुट को किसी भी HTML या CSS संदर्भ में उपयोग कर सकता हूं?

हाँ। data:image/jpeg;base64, से शुरू होने वाला data URI, जिसके बाद एन्कोडेड स्ट्रिंग हो, img टैग के src एट्रिब्यूट के रूप में या CSS background-image प्रॉपर्टी में url() मान के रूप में उपयोग किया जा सकता है। सभी आधुनिक ब्राउज़र data URIs का समर्थन करते हैं। बहुत बड़े data URIs पेज रेंडरिंग धीमा कर सकते हैं, इसलिए इनलाइनिंग आमतौर पर कुछ किलोबाइट से कम छोटी इमेज के लिए आरक्षित है।

क्या टूल एनिमेटेड GIFs का समर्थन करता है?

टूल आपकी दी गई किसी भी फ़ाइल की पूरी बाइनरी सामग्री एन्कोड करता है, जिसमें एनिमेटेड GIFs शामिल हैं। परिणामी data URI, जब img टैग के src के रूप में उपयोग किया जाता है, तो GIF एनीमेशन का समर्थन करने वाले ब्राउज़र में एनीमेशन चलाएगा।

मैं विपरीत दिशा में कैसे जाऊं और Base64 स्ट्रिंग को वापस इमेज में डीकोड करूं?

टूल को decode mode पर स्विच करें, अपनी Base64 स्ट्रिंग पेस्ट करें (data: prefix के साथ या बिना), और टूल इसे डीकोड करेगा और बाइनरी इमेज डाउनलोड के रूप में भी उपलब्ध कराएगा, साथ ही प्रीव्यू दिखाएगा।