Base64 को छवि में और छवि को Base64 में कैसे बदलें

Base64 एन्कोडिंग बाइनरी छवि डेटा को टेक्स्ट के रूप में दर्शाने की एक मूलभूत तकनीक है। चाहे आप HTML में सीधे छवियाँ एम्बेड कर रहे हों, API के माध्यम से छवियाँ ट्रांसमिट कर रहे हों, या डेटाबेस में छवि डेटा संग्रहीत कर रहे हों, Base64 और छवि प्रारूपों के बीच रूपांतरण को समझना Web डेवलपर्स के लिए एक आवश्यक कौशल है।

Base64 एन्कोडिंग क्या है?

Base64 एक बाइनरी-से-टेक्स्ट एन्कोडिंग योजना है जो 64 वर्णों के सेट का उपयोग करके बाइनरी डेटा को ASCII स्ट्रिंग में बदलती है: A-Z, a-z, 0-9, + और /। = वर्ण पैडिंग के लिए उपयोग किया जाता है। हर तीन बाइट बाइनरी डेटा को चार Base64 वर्णों के रूप में दर्शाया जाता है, जिसका अर्थ है कि Base64 एन्कोडेड डेटा मूल बाइनरी डेटा से लगभग 33% बड़ा होता है।

यह एन्कोडिंग मूल रूप से केवल-टेक्स्ट ईमेल सिस्टम के लिए विकसित की गई थी। आज, Base64 का Web विकास में छोटी छवियों को सीधे HTML, CSS और JSON पेलोड में एम्बेड करने के लिए व्यापक रूप से उपयोग किया जाता है, जिससे अलग HTTP अनुरोधों की आवश्यकता समाप्त हो जाती है।

छवियों को Base64 में क्यों बदलें?

छवियों को Base64 स्ट्रिंग में बदलने के कई व्यावहारिक कारण हैं:

इनलाइन एम्बेडिंग: छोटी छवियों को Data URI का उपयोग करके सीधे HTML या CSS में एम्बेड करें, जिससे पेज को करने वाले HTTP अनुरोधों की संख्या कम हो जाती है।
API पेलोड: JSON API प्रतिक्रिया में छवि डेटा शामिल करें, अलग फ़ाइल अपलोड एंडपॉइंट या CDN संदर्भों की आवश्यकता के बिना।
डेटाबेस स्टोरेज: जब फ़ाइल सिस्टम या ऑब्जेक्ट स्टोरेज उपलब्ध न हो, तो टेक्स्ट-आधारित डेटाबेस फ़ील्ड में छवि डेटा संग्रहीत करें।
ईमेल टेम्पलेट: HTML ईमेल में छवियाँ एम्बेड करें ताकि वे बाहरी संसाधनों के बिना प्रदर्शित हों, ईमेल क्लाइंट के साथ संगतता में सुधार हो।
डेटा ट्रांसमिशन: केवल-टेक्स्ट चैनलों (जैसे JSON, XML या फ़ॉर्म फ़ील्ड) के माध्यम से बाइनरी छवि डेटा को सुरक्षित रूप से प्रेषित करें।

छवि को Base64 में कैसे बदलें

ब्राउज़र में JavaScript का उपयोग करना

ब्राउज़र छवियों को Base64 में बदलने के लिए FileReader API और Canvas API प्रदान करते हैं। FileReader विधि छवि फ़ाइल को Data URL के रूप में पढ़ती है, जबकि Canvas विधि आपको एन्कोडिंग से पहले छवि का आकार बदलने या संशोधित करने की अनुमति देती है।

Canvas का उपयोग करते हुए, आप छवि को Canvas एलिमेंट पर ड्रॉ करते हैं और फिर Base64 स्ट्रिंग प्राप्त करने के लिए toDataURL() कॉल करते हैं। यह विधि आपको 'image/jpeg' और 0 से 1 के बीच गुणवत्ता मान जैसे पैरामीटर पास करके आउटपुट प्रारूप और गुणवत्ता बदलने की भी अनुमति देती है।

ऑनलाइन टूल का उपयोग करना

छवि को Base64 में बदलने का सबसे तेज़ तरीका ऑनलाइन रूपांतरण टूल का उपयोग करना है। बस छवि अपलोड करें, और टूल तुरंत Base64 स्ट्रिंग उत्पन्न करेगा। जब आपको बिना कोड लिखे त्वरित रूपांतरण की आवश्यकता हो तो यह विशेष रूप से उपयोगी है। आप हमारा मुफ़्त छवि-से-Base64 कनवर्टर आज़मा सकते हैं।

कमांड लाइन का उपयोग करना

Linux और macOS पर, आप टर्मिनल से सीधे base64 कमांड का उपयोग करके छवियों को एन्कोड कर सकते हैं। यह स्क्रिप्टिंग और स्वचालन वर्कफ़्लो के लिए बहुत उपयोगी है जहाँ एक बार में कई छवियों को संसाधित करने की आवश्यकता होती है।

Base64 को वापस छवि में कैसे बदलें

ब्राउज़र में

एलिमेंट की src विशेषता के रूप में सेट कर सकते हैं। प्रारूप है data:[MIME-type];base64,[data]। उदाहरण के लिए, PNG छवि data:image/png;base64,iVBORw0KGgo... का उपयोग करती है।

छवि को फ़ाइल के रूप में सहेजने के लिए, आप Base64 डेटा को Blob ऑब्जेक्ट में बदलकर और ऑब्जेक्ट URL उत्पन्न करके डाउनलोड लिंक बना सकते हैं। यह विधि पूरी तरह से ब्राउज़र में चलती है और किसी सर्वर-साइड प्रोसेसिंग की आवश्यकता नहीं होती।

ऑनलाइन टूल का उपयोग करना

ऑनलाइन Base64-से-छवि कनवर्टर आपको Base64 स्ट्रिंग पेस्ट करने और उत्पन्न छवि का तुरंत पूर्वावलोकन और डाउनलोड करने की अनुमति देता है। जब आप ईमेल, API प्रतिक्रिया या कॉन्फ़िगरेशन फ़ाइल में Base64 स्ट्रिंग प्राप्त करते हैं और वास्तविक छवि देखने की आवश्यकता होती है, तो यह सबसे सरल तरीका है।

Data URI को समझना

Data URI वेब पेज में Base64-एन्कोडेड छवियों को एम्बेड करने का मानक तरीका है। पूर्ण सिंटैक्स में MIME प्रकार, एन्कोडिंग घोषणा और Base64 डेटा स्वयं शामिल है।

छवियों के लिए सामान्य Data URI प्रारूपों में शामिल हैं:

JPEG: data:image/jpeg;base64,/9j/4AAQ...
PNG: data:image/png;base64,iVBORw0KGgo...
GIF: data:image/gif;base64,R0lGODlh...
WebP: data:image/webp;base64,UklGRj...
SVG: data:image/svg+xml;base64,PHN2Zy...

Base64 छवियों का उपयोग कब करें (और कब न करें)

Base64 छवियाँ हमेशा सही विकल्प नहीं होतीं। यहाँ कब उपयोग करें और कब बचें इसकी मार्गदर्शिका है:

उपयुक्त उपयोग परिदृश्य

2KB से छोटे आइकन और सजावटी तत्व
JSON API प्रतिक्रिया में छवियाँ
ईमेल टेम्पलेट छवियाँ
कम छवियों वाले सिंगल-पेज एप्लिकेशन
प्रोटोटाइपिंग और त्वरित डेमो

Base64 से बचने की स्थितियाँ

10KB से बड़ी छवियाँ (33% आकार ओवरहेड महत्वपूर्ण हो जाता है)
कई छवियों वाले पेज (प्रत्येक इनलाइन छवि HTML आकार बढ़ाती है)
ब्राउज़र कैश की आवश्यकता वाली छवियाँ (Base64 छवियाँ स्वतंत्र रूप से कैश नहीं हो सकतीं)
विभिन्न स्क्रीन आकारों के लिए विभिन्न संस्करणों वाली रिस्पॉन्सिव छवियों की आवश्यकता

प्रदर्शन टिप: 2KB से बड़ी छवियों के लिए, हमेशा Base64 के बजाय पारंपरिक फ़ाइल संदर्भों का उपयोग करें। ब्राउज़र अलग-अलग छवि फ़ाइलों को कैश कर सकता है, CDN के माध्यम से प्रदान कर सकता है, और एसिंक्रोनस रूप से लोड कर सकता है, जिससे काफी बेहतर प्रदर्शन मिलता है।

सामान्य समस्याएँ और समाधान

दूषित आउटपुट: सुनिश्चित करें कि Base64 स्ट्रिंग पूर्ण है और काटी नहीं गई है। गायब वर्ण डिकोडिंग विफलता का कारण बनते हैं।
गलत MIME प्रकार: हमेशा Data URI में सही MIME प्रकार शामिल करें। JPEG MIME प्रकार से एन्कोड किया गया PNG सही ढंग से प्रदर्शित नहीं होगा।
स्ट्रिंग में न्यूलाइन: कुछ सिस्टम Base64 स्ट्रिंग में न्यूलाइन डालते हैं। डिकोड करने से पहले उन्हें हटाएँ।
URL-सुरक्षित वेरिएंट: Base64URL + और / के बजाय - और _ का उपयोग करता है। मानक Base64 डिकोडिंग से पहले इन वर्णों को बदलें।

छवियों को Base64 में बदलना या Base64 स्ट्रिंग को वापस छवि में डिकोड करना चाहते हैं? हमारा मुफ़्त टूल आज़माएँ।

छवि से Base64

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

क्या Base64 एन्कोडिंग फ़ाइल का आकार बढ़ाती है?

हाँ, Base64 एन्कोडिंग फ़ाइल आकार को लगभग 33% बढ़ाती है। ऐसा इसलिए क्योंकि Base64 प्रत्येक 3 बाइट बाइनरी डेटा को 4 ASCII वर्णों के रूप में दर्शाता है। यह ओवरहेड टेक्स्ट-आधारित प्रारूपों में बाइनरी डेटा एम्बेड करने में सक्षम होने की कीमत है।

क्या Base64 छवि एन्कोडिंग प्रदर्शन को प्रभावित करती है?

Base64 छवियों का अत्यधिक उपयोग प्रदर्शन को नुकसान पहुँचाता है। वे HTML का आकार बढ़ाते हैं, ब्राउज़र द्वारा व्यक्तिगत रूप से कैश नहीं किए जा सकते, और पृष्ठ रेंडरिंग को अवरुद्ध करते हैं। हालाँकि, 2KB से छोटे आइकन के लिए, इनलाइन Base64 HTTP अनुरोधों को कम कर सकता है और लोड समय में सुधार कर सकता है।

क्या किसी भी छवि प्रारूप को Base64 में बदला जा सकता है?

हाँ, सभी छवि प्रारूपों (JPEG, PNG, GIF, WebP, SVG, BMP) सहित कोई भी बाइनरी फ़ाइल Base64 में परिवर्तित की जा सकती है। परिणामी Base64 स्ट्रिंग में एक Data URI उपसर्ग होता है जो मूल MIME प्रकार को इंगित करता है।

Base64 और Data URI में क्या अंतर है?

Base64 बाइनरी डेटा को ASCII टेक्स्ट में बदलने का एन्कोडिंग एल्गोरिदम है। Data URI एक योजना है जो Base64-एन्कोडेड डेटा को सीधे URL में एम्बेड करती है, जिसमें MIME प्रकार और एन्कोडिंग जानकारी उपसर्ग के रूप में होती है। Data URI प्रारूप है: data:[mediatype][;base64],data।