> PNG | encode | data-uri <
// PNG छवियों को Base64 स्ट्रिंग और data URI में एन्कोड करें — अल्फा पारदर्शिता संरक्षित, पूरी तरह आपके ब्राउज़र में चलता है
PNG यहाँ छोड़ें या चुनने के लिए क्लिक करें
PNG फ़ाइलें ब्राउज़ करने के लिए क्लिक करें
अल्फा संरक्षित
PNG अल्फा चैनल, पैलेट, और gAMA/tRNS चंक बाइट-दर-बाइट एन्कोड होते हैं — कोई पुनः संपीड़न नहीं, कोई गुणवत्ता हानि नहीं।
100% क्लाइंट-साइड
आपका PNG कभी ब्राउज़र से बाहर नहीं जाता। एन्कोडिंग स्थानीय रूप से FileReader + btoa() के माध्यम से होती है — कोई सर्वर राउंड-ट्रिप नहीं।
कॉपी और पेस्ट करें
HTML, CSS, ईमेल, JSON पेलोड और इनलाइन SVG के लिए तैयार, मानक-अनुरूप data:image/png;base64,… URI प्राप्त करें।
// FAQ — PNG से Base64
प्र: PNG से Base64 एन्कोडिंग क्या है?
उ: यह RFC 4648 में परिभाषित Base64 वर्णमाला का उपयोग करके किसी .png फ़ाइल की बाइनरी सामग्री को एक ASCII स्ट्रिंग में बदल देता है। एन्कोडेड पाठ को सीधे एक HTML <img> टैग, एक CSS background-image, एक ईमेल संदेश, एक JSON API पेलोड, या किसी भी अन्य केवल-पाठ परिवहन में डाला जा सकता है। PNG बाइट्स स्वयं अपरिवर्तित रहती हैं — प्रत्येक IHDR, IDAT, tRNS, और IEND चंक एन्कोड होता है और बिल्कुल पुनर्प्राप्त किया जा सकता है।
प्र: मैं ब्राउज़र में PNG को Base64 में कैसे एन्कोड करूँ?
उ: अपने PNG को ड्रॉप ज़ोन में खींचें (या ब्राउज़ करने के लिए क्लिक करें)। उपकरण फ़ाइल को FileReader.readAsDataURL() से पढ़ता है, जो पहले से ही उपयोग के लिए तैयार data:image/png;base64,… URI लौटाता है। यदि आप इसे सीधे <img src="…"> में पेस्ट करना चाहते हैं तो Data URI चुनें, या यदि आपका API/डेटाबेस data:image/png;base64, उपसर्ग के बिना केवल कच्चे Base64 भाग की अपेक्षा करता है तो केवल Base64 पेलोड चुनें।
प्र: क्या PNG को Base64 में एन्कोड करने से पारदर्शिता या गुणवत्ता खो जाती है?
उ: नहीं। Base64 एक शुद्ध बाइनरी-से-पाठ रूपांतरण है — मूल PNG की प्रत्येक बाइट संरक्षित रहती है, जिसमें अल्फा चैनल, पैलेट, और रंग प्रोफ़ाइल (iCCP/sRGB चंक) शामिल हैं। जब आप स्ट्रिंग को वापस डिकोड करते हैं, तो फ़ाइल मूल के साथ बिट-समान होती है। डिकोड किए गए PNG का SHA-256 हैश मूल से मेल खाएगा। यही कारण है कि Base64 उन आइकनों, लोगो और स्क्रीनशॉट को एम्बेड करने के लिए सही उपकरण है जहाँ पिक्सेल सटीकता मायने रखती है।
प्र: Base64 एन्कोडिंग के बाद PNG कितना बड़ा हो जाता है?
उ: Base64 प्रत्येक 3 इनपुट बाइट्स के लिए 4 वर्णों का उपयोग करता है, इसलिए एन्कोडेड स्ट्रिंग मूल PNG फ़ाइल से ~33% बड़ी होती है। सटीक आकार 4 × ⌈n / 3⌉ वर्ण है, जहाँ n बाइट्स में PNG का आकार है। एक 10 KB का PNG लगभग 13.6 KB Base64 पाठ बन जाता है। चूँकि HTTP संपीड़न (gzip, Brotli) Base64 पाठ को काफी अच्छी तरह संभालता है, व्यवहार में नेटवर्क पर ओवरहेड आमतौर पर 10–15% के करीब होता है।
प्र: Base64-एन्कोडेड PNG कैसा दिखता है?
उ: प्रत्येक PNG Base64 स्ट्रिंग iVBORw0KGgo से शुरू होती है। वह उपसर्ग 8-बाइट PNG हस्ताक्षर 89 50 4E 47 0D 0A 1A 0A है जो Base64 में फिर से एन्कोड किया गया है। तो iVBORw0KGgoAAAANSUhEUg... हमेशा एक PNG होता है, और उस उपसर्ग को देखना एक त्वरित दृश्य जाँच है कि आपका डेटा सुरक्षित है। जब इसे data URI के रूप में लपेटा जाता है तो यह ऐसा दिखता है: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
प्र: मैं HTML में PNG को Base64 के रूप में कैसे एम्बेड करूँ?
उ: पूर्ण data URI को एक <img> टैग के src विशेषता में पेस्ट करें: <img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
ब्राउज़र Base64 पेलोड को डिकोड करता है और PNG को बिल्कुल वैसे ही प्रस्तुत करता है जैसे इसे किसी URL से लोड किया गया हो। कोई अतिरिक्त HTTP अनुरोध नहीं किया जाता, जो महत्वपूर्ण-पथ आइकन, ईमेल हस्ताक्षर और ऑफ़लाइन-फर्स्ट ऐप्स के लिए उपयोगी है।
प्र: मैं Base64 PNG को CSS पृष्ठभूमि के रूप में कैसे उपयोग करूँ?
उ: data URI को url() फ़ंक्शन में लपेटें: .icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
पुनः उपयोग के लिए, इसे एक CSS कस्टम प्रॉपर्टी में संग्रहीत करें: :root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
इनलाइन पृष्ठभूमि प्रति आइकन एक HTTP अनुरोध समाप्त करती हैं लेकिन आपकी CSS फ़ाइल को बढ़ा देती हैं, इसलिए उन्हें केवल छोटे आइकन (< 4 KB) के लिए उपयोग करें।
प्र: मैं JavaScript / Node / Python / PHP में PNG को Base64 में कैसे एन्कोड करूँ?
उ:
JavaScript (ब्राउज़र): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))
प्र: मुझे सामान्य छवि फ़ाइल के बजाय Base64 PNG का उपयोग कब करना चाहिए?
उ: Base64 PNG data URI का उपयोग तब करें जब:
• छवि < 4 KB हो (एक HTTP राउंड-ट्रिप बचाने के लिए)
• आपको इसे एक HTML ईमेल के भीतर एम्बेड करने की आवश्यकता हो (कई क्लाइंट दूरस्थ छवियों को अवरुद्ध करते हैं)
• आप एक एकल-फ़ाइल HTML रिपोर्ट या डैशबोर्ड भेज रहे हों
• आप छवि को एक JSON पेलोड या डेटाबेस कॉलम के भीतर संग्रहीत कर रहे हों
जब छवि बड़ी हो, कई पृष्ठों पर पुनः उपयोग हो, या अलग CDN कैशिंग की आवश्यकता हो तो एक बाहरी .png फ़ाइल को प्राथमिकता दें।
प्र: क्या Base64 एन्कोडिंग PNG पारदर्शिता और पैलेट PNG के साथ काम करती है?
उ: हाँ। चूँकि Base64 एक बिट-दर-बिट रूपांतरण है, प्रत्येक PNG रंग मोड समान रूप से समर्थित है:
• RGBA / truecolor + अल्फा — 32-बिट रंग, पूर्ण पारदर्शिता
• पैलेट (PLTE) + tRNS — 1-बिट पारदर्शिता वाले अनुक्रमित पैलेट PNG
• ग्रेस्केल + अल्फा — अल्फा के साथ 8/16-बिट ग्रेस्केल
• 16-बिट डीप कलर PNG — चिकित्सा इमेजिंग और वैज्ञानिक विज़ुअलाइज़ेशन में उपयोग किए जाने वाले HDR-शैली PNG
ये सभी Base64 के माध्यम से साफ़-सुथरे राउंड-ट्रिप करते हैं और PNG को समझने वाले ब्राउज़रों में सही ढंग से प्रदर्शित होते हैं।
प्र: क्या Base64-एन्कोडेड PNG एन्क्रिप्टेड या निजी है?
उ: नहीं। Base64 एक एन्कोडिंग है, एन्क्रिप्शन नहीं। जो कोई भी स्ट्रिंग को पढ़ सकता है, वह इसे मिलीसेकंड में वापस मूल PNG में डिकोड कर सकता है। यदि किसी स्क्रीनशॉट में एक पासवर्ड, एक API टोकन, या व्यक्तिगत जानकारी है, तो इसे Base64 के रूप में एन्कोड करना इसकी रक्षा नहीं करता — Base64 आउटपुट के ऊपर एक वास्तविक एन्क्रिप्शन परत (AES-GCM, age, PGP) का उपयोग करें, या छवि को TLS के माध्यम से एक ऐसे सर्वर पर भेजें जो पहुँच नियंत्रण लागू करता है।
प्र: मैं यहाँ अधिकतम कितने आकार का PNG एन्कोड कर सकता हूँ?
उ: कोई कृत्रिम सीमा नहीं है। चूँकि एन्कोडिंग स्थानीय रूप से चलती है, सीमा आपके ब्राउज़र की मेमोरी है — आमतौर पर डेस्कटॉप पर 100 MB+ और मोबाइल पर 40–60 MB। बहुत बड़े PNG (उच्च-रिज़ॉल्यूशन चिकित्सा या उपग्रह इमेजरी) के लिए, हम फ़ाइल को टुकड़ों में पढ़ते हैं और प्रत्येक टुकड़े पर btoa() कॉल करते हैं ताकि मुख्य थ्रेड उत्तरदायी बना रहे। यदि आपकी छवि ~100 MB से बड़ी है, तो इसे ब्राउज़र में लोड करने के बजाय सीधे एक सर्वर-साइड एन्कोडर से स्ट्रीम करने पर विचार करें।
प्र: PNG से Base64 बनाम JPG से Base64 — मुझे किसका उपयोग करना चाहिए?
उ: लोगो, UI आइकन, स्क्रीनशॉट, आरेख, और पारदर्शिता या तीखे किनारों (पाठ, चार्ट) वाली किसी भी चीज़ के लिए PNG → Base64 का उपयोग करें। PNG दोषरहित और अल्फा-जागरूक है। तस्वीरों या कई रंगों वाली छवियों के लिए JPG → Base64 का उपयोग करें जहाँ हानिपूर्ण संपीड़न स्वीकार्य है। JPEG फ़ाइलें तस्वीरों के लिए आमतौर पर PNG से 5–20× छोटी होती हैं, इसलिए Base64 पेलोड बहुत छोटा होता है। एक सामान्य नियम के रूप में: यदि छवि किसी कैमरे से आई है या फोटोग्राफिक ग्रेडिएंट शामिल हैं, तो JPG का उपयोग करें; अन्यथा PNG।