PNG से Base64 कन्वर्टर

PNG और Base64

PNG (Portable Network Graphics, MIME टाइप image/png) पूरे अल्फ़ा चैनल वाला एक लॉसलेस रास्टर फ़ॉर्मैट है, इसलिए आइकन, लोगो, डायग्राम और स्क्रीनशॉट के लिए आमतौर पर यही चुना जाता है। हर PNG फ़ाइल एक ही 8-बाइट सिग्नेचर से शुरू होती है, इसलिए हर PNG data URI भी एक ही तरह शुरू होता है: data:image/png;base64,iVBORw0KGgo...।

Base64 पिक्सेल में कोई बदलाव नहीं करता। स्ट्रिंग को डिकोड करने पर बाइट-दर-बाइट वही फ़ाइल वापस मिलती है, उन्हीं रंगों और उन्हीं पारदर्शी हिस्सों के साथ।

PNG data URI के अच्छे उपयोग

• इंटरफ़ेस के छोटे आइकन और लोगो, जिन्हें पारदर्शी बैकग्राउंड चाहिए।
• आत्मनिर्भर HTML रिपोर्ट, बग रिपोर्ट या एक्सपोर्ट किए गए दस्तावेज़ों के अंदर स्क्रीनशॉट।
• सर्वर पर बनाए गए चार्ट और QR कोड, जो JSON रिस्पॉन्स में लौटाए जाते हैं।
• canvas.toDataURL() से बनी इमेज, जो डिफ़ॉल्ट रूप से पहले से ही PNG data URI देता है।

फ़ोटो का मामला अलग है। PNG उन्हें लॉसलेस तरीक़े से सहेजता है और फ़ाइलें बड़ी हो जाती हैं; JPEG या WebP से कहीं छोटी स्ट्रिंग मिलेगी।

एनकोड करने से पहले PNG को छोटा करें

PNG से हटाया गया हर बाइट Base64 के लगभग 1.33 अक्षर बचाता है। पहले फ़ाइल को oxipng या zopflipng (लॉसलेस) या pngquant (पैलेट घटाता है) जैसे किसी ऑप्टिमाइज़र से गुज़ारें। पिक्सेल आकार भी जाँचें: अपने डिस्प्ले आकार से तीन गुना बड़ा एक्सपोर्ट किया गया आइकन आमतौर पर “अधिकतम चौड़ाई” विकल्प से छोटा किया जा सकता है।

WebP में कन्वर्ट करने पर पारदर्शिता बनी रहती है और फ़ाइल अक्सर काफ़ी छोटी हो जाती है। JPEG में कन्वर्ट करने पर पारदर्शिता हट जाती है, यानी पारदर्शी हिस्से एक ठोस रंग बन जाते हैं। ब्राउज़र में दोबारा PNG में एनकोड करने से कंप्रेशन ऑप्टिमाइज़ नहीं होता, इसलिए परिणाम किसी अच्छी तरह ऑप्टिमाइज़ की गई मूल फ़ाइल से बड़ा हो सकता है; कॉपी करने से पहले आकारों की तुलना करें।

आउटपुट का उपयोग

<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">

.icon-settings {
  background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}

# कमांड लाइन: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png