इमेज-से-Base64 रूपांतरण कैसे काम करता है
पूरा रूपांतरण आपके ब्राउज़र में File API और अंतर्निहित btoa फ़ंक्शन का उपयोग करके चलता है — कोई कोडेक लाइब्रेरी डाउनलोड नहीं होती और कोई सर्वर इमेज नहीं देखता। यहाँ शुरू से अंत तक की पाइपलाइन है:
- आप इमेज ड्रॉप या चुनते हैं। ब्राउज़र इसे आपकी स्थानीय डिस्क से Blob के रूप में पढ़ता है, बाइट्स कभी सर्वर पर नहीं जातीं।
- फ़ाइल 1 MB हिस्सों में पढ़ी जाती है और प्रत्येक हिस्से की बाइट्स एक बाइनरी स्ट्रिंग में जोड़ी जाती हैं। हिस्सों में बाँटने से बड़ी इमेज जावास्क्रिप्ट कॉल स्टैक ओवरफ्लो से बचती हैं।
- बाइनरी स्ट्रिंग btoa को दी जाती है, जो A–Z, a–z, 0–9, +, / वर्णमाला से हर तीन बाइट को चार Base64 अक्षरों पर मैप करता है।
- फ़ाइल का MIME प्रकार (image/png, image/jpeg आदि) File ऑब्जेक्ट से पढ़ा जाता है और data: prefix के रूप में जोड़ा जाता है, जिससे पूरा data:image/…;base64,… URI बनता है।
- पेज उस URI से चार आउटपुट तैयार करता है — पूरा data URI, बिना prefix के Raw Base64, ready-to-paste
टैग और CSS background-image snippet — प्रत्येक का अपना कॉपी बटन।
इमेज को data URI के रूप में एन्कोड क्यों करें?
- एक छोटे लोगो या आइकन को data URI के रूप में इनलाइन करने से एक अलग नेटवर्क राउंड-ट्रिप खत्म हो जाती है, जिससे पेज या ईमेल थोड़ी जल्दी पहला फ्रेम रेंडर करता है।
- इनलाइन इमेज वाला पेज या स्टाइलशीट स्वयंपूर्ण होता है। वह ऑफ़लाइन काम करता है, और आप उसे बिना assets फ़ोल्डर खींचे कहीं भी कॉपी कर सकते हैं।
- अधिकांश मेल क्लाइंट डिफ़ॉल्ट रूप से लिंक्ड रिमोट इमेज ब्लॉक करते हैं। Base64 में लोगो इनलाइन करें और यह संदेश खुलते ही दिखता है, कोई रिमोट फ़ेच नहीं।
- एन्कोडिंग पूरी तरह आपके ब्राउज़र में होती है, इसलिए संवेदनशील इमेज कभी किसी थर्ड-पार्टी सर्वर पर नहीं जाती। स्क्रीनशॉट, ID स्कैन और आंतरिक आरेखों के लिए यह उपयुक्त है।
Base64 इमेज के सामान्य उपयोग
Data URI वहाँ दिखते हैं जहाँ इमेज इतनी छोटी हो कि अलग अनुरोध Base64 के ~33% आकार वृद्धि से ज़्यादा महंगा पड़े। तीन पैटर्न बार-बार आते हैं:
- इनलाइन CSS आइकन: 1–2 KB स्प्राइट या आइकन जो stylesheet में background-image: url(data:…) के रूप में डाला जाता है ताकि नियम पूरी तरह स्वयंपूर्ण हो।
- ईमेल सिग्नेचर और न्यूज़लेटर: data URI src वाले
के रूप में एम्बेड लोगो तब भी रेंडर होता है जब क्लाइंट रिमोट इमेज ब्लॉक करे।
- बिल्ड-टूल इनलाइनिंग: Webpack और Vite जैसे बंडलर बाइट threshold से नीचे assets को स्वतः इनलाइन करते हैं, और यह टूल आपको वह आउटपुट ठीक-ठीक पूर्वावलोकन करने देता है।
Base64 इमेज कैसी दिखती है?
एक छोटी 1×1 पारदर्शी PNG लें। उसके raw bytes केवल 67 bytes हैं, लेकिन एन्कोड होने पर वह iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= स्ट्रिंग बन जाती है, और पूरा data URI data:image/png;base64,iVBORw0KGgo… है। ध्यान दें कि एन्कोड रूप मूल से लगभग एक-तिहाई बड़ा है। टेक्स्ट में बाइनरी डेटा सीधे एम्बेड करने की यही कीमत है।
क्या मेरी इमेज कहीं अपलोड होती है?
नहीं। रूपांतरण ब्राउज़र के File API और नेटिव btoa फ़ंक्शन का उपयोग करके इमेज को पूरी तरह आपके डिवाइस पर एन्कोड करता है। आप स्वयं पुष्टि कर सकते हैं: ब्राउज़र के developer tools खोलें, Network पैनल पर जाएँ और एक इमेज कन्वर्ट करें — आपको केवल पेज लोड और विज्ञापन अनुरोध दिखेंगे। इमेज जैसा कुछ भी सर्वर पर नहीं जाता, जो इसे स्क्रीनशॉट, ID दस्तावेज़ और आंतरिक आरेखों के लिए सुरक्षित बनाता है।
Base64 आउटपुट मेरी मूल इमेज से बड़ा क्यों है?
Base64 बाइनरी डेटा के हर तीन बाइट को चार ASCII अक्षरों से दर्शाता है, इसलिए एन्कोड टेक्स्ट स्रोत फ़ाइल से लगभग 33% बड़ा होता है। इस पेज पर data URI आकार रीडआउट सटीक बढ़ा हुआ आकार दिखाता है। यही कारण है कि data URI केवल छोटी इमेज के लिए उपयुक्त हैं — 2 MB फ़ोटो इनलाइन करने से HTML या CSS अलग अनुरोध से कहीं ज़्यादा फूल जाएगी। अंगूठे का नियम: लगभग 4 KB से नीचे की इमेज इनलाइन करें, बड़ी को लिंक करें।
कौन से इमेज फॉर्मेट कन्वर्ट किए जा सकते हैं?
कोई भी फॉर्मेट जिसे आपका ब्राउज़र इमेज के रूप में पहचानता है वह काम करता है, क्योंकि टूल चित्र डिकोड करने के बजाय raw bytes पढ़ता है। इसमें PNG, JPEG, GIF, WebP, SVG और BMP शामिल हैं। MIME प्रकार सीधे फ़ाइल से पढ़ा जाता है, इसलिए data: prefix हमेशा असली फॉर्मेट से मेल खाता है — JPEG से data:image/jpeg और SVG से data:image/svg+xml बनता है। SVG की एक विशेष बात: यह पहले से टेक्स्ट है, इसलिए SVG के लिए URL-encoded data URI अक्सर Base64 संस्करण से छोटा होता है, हालाँकि यह टूल एकरूपता के लिए Base64 रूप देता है।
इमेज ड्रॉप करें, data URI या जो snippet चाहिए वह कॉपी करें, और HTML, CSS या ईमेल टेम्पलेट में पेस्ट करें। हर बाइट आपके डिवाइस पर रहती है। कोई अपलोड नहीं, कोई खाता नहीं, कोई सर्वर राउंड-ट्रिप नहीं।