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

इमेज से Base64 कन्वर्ज़न कैसे काम करता है

Base64 इमेज फ़ाइल के बाइट को 64 अक्षरों से बने सादे टेक्स्ट में बदल देता है। हर 3 बाइट 4 अक्षर बन जाते हैं, इसलिए टेक्स्ट फ़ाइल से लगभग 33% बड़ा होता है। data URI इसके आगे MIME टाइप वाला एक छोटा प्रीफ़िक्स जोड़ता है, जैसे data:image/png;base64,, जिससे ब्राउज़र इस टेक्स्ट को हर उस जगह दिखा सकता है जहाँ इमेज का URL अपेक्षित हो।

इमेज आपके ब्राउज़र में ही पढ़ी और एनकोड की जाती है। वह अपलोड नहीं होती, इसलिए निजी स्क्रीनशॉट और अप्रकाशित डिज़ाइन आपके डिवाइस पर ही रहते हैं।

कौन-सा आउटपुट कॉपी करें?

• Data URI: src एट्रिब्यूट, JavaScript और उन JSON फ़ील्ड के लिए जिनमें URL अपेक्षित हो।
• रॉ Base64: उन API के लिए जिन्हें केवल एनकोड किए गए बाइट चाहिए, आमतौर पर MIME टाइप या फ़ाइल नाम के लिए एक अलग फ़ील्ड के साथ।
• HTML img टैग: सीधे किसी पेज या टेम्पलेट में पेस्ट करने के लिए।
• CSS background-image: स्टाइलशीट में आइकन और सजावटी इमेज के लिए।
• Markdown: दस्तावेज़ों और नोट्स के लिए। GitHub सहित कुछ रेंडरर data URI वाली इमेज नहीं दिखाते।

समर्थित फ़ॉर्मैट एक नज़र में

Base64 स्ट्रिंग के शुरुआती अक्षरों से ही फ़ाइल का प्रकार पता चल जाता है, क्योंकि वे फ़ॉर्मैट के सिग्नेचर को एनकोड करते हैं।

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

Data URI एक नेटवर्क अनुरोध बचाते हैं और फ़ाइल को आत्मनिर्भर बनाते हैं। ये कुछ किलोबाइट वाले छोटे आइकन और लोगो, सिंगल-फ़ाइल HTML रिपोर्ट, छोटे धुंधले प्लेसहोल्डर और JSON के अंदर भेजी जाने वाली इमेज के लिए ठीक रहते हैं। बड़ी फ़ोटो के लिए ये अच्छा विकल्प नहीं हैं: एक-तिहाई ज़्यादा आकार, ब्राउज़र में अलग से कैशिंग का न होना, और भारी HTML या CSS फ़ाइल जिसे कुछ भी रेंडर होने से पहले डाउनलोड होना पड़ता है, ये सब मिलकर आमतौर पर बचाए गए अनुरोध से ज़्यादा महँगे पड़ते हैं। अगर आपकी साइट Content-Security-Policy भेजती है, तो इनलाइन इमेज के लिए img-src में data: भी शामिल होना चाहिए।