इमेज टू Base64 कनवर्टर - ऑनलाइन एनकोड और डीकोड
इमेज को Base64 स्ट्रिंग में बदलें या Base64 को वापस इमेज में डीकोड करें। PNG, JPG, SVG, GIF और WebP सपोर्ट करता है। 100% क्लाइंट-साइड प्रोसेसिंग।
इमेज को यहाँ ड्रैग करें या ब्राउज़ करने के लिए क्लिक करें
PNG, JPG, SVG, GIF, WebP सपोर्ट (अधिकतम 10MB)
इमेज पूरी तरह से आपके ब्राउज़र में प्रोसेस होती हैं। कोई फ़ाइल किसी सर्वर पर अपलोड नहीं होती।
अक्सर पूछे जाने वाले प्रश्न
इमेज टू Base64 एनकोडिंग क्या है और मैं इसका उपयोग क्यों करूं?
इमेज टू Base64 एनकोडिंग बाइनरी इमेज डेटा को Base64 अल्फाबेट (A-Z, a-z, 0-9, +, /) का उपयोग करके टेक्स्ट स्ट्रिंग में बदलती है। परिणामी स्ट्रिंग को Data URI (data:image/png;base64,...) के रूप में सीधे HTML, CSS या JavaScript में एम्बेड किया जा सकता है। यह प्रत्येक इमेज के लिए अलग HTTP रिक्वेस्ट को समाप्त करता है, जो आइकन, लोगो और UI एलिमेंट जैसी छोटी इमेज के लिए विशेष रूप से फायदेमंद है।
मैं इस इमेज टू Base64 टूल का उपयोग कैसे करूं?
एनकोड करने के लिए: 'एनकोड' मोड चुनें, फिर अपलोड एरिया पर इमेज ड्रैग एंड ड्रॉप करें (या ब्राउज़ करने के लिए क्लिक करें)। टूल तुरंत Base64 स्ट्रिंग जेनरेट करता है। अपना पसंदीदा आउटपुट फॉर्मेट चुनें और कॉपी बटन क्लिक करें। डीकोड करने के लिए: 'डीकोड' मोड चुनें, इनपुट एरिया में Base64 स्ट्रिंग या Data URI पेस्ट करें। टूल स्वचालित रूप से इसे डीकोड करता है और इमेज प्रीव्यू दिखाता है।
क्या मेरा इमेज डेटा सुरक्षित है? क्या इमेज सर्वर पर अपलोड होती हैं?
आपकी इमेज 100% सुरक्षित हैं और कभी भी आपके ब्राउज़र से बाहर नहीं जातीं। सभी एनकोडिंग और डीकोडिंग ब्राउज़र के नेटिव FileReader API और atob()/btoa() फंक्शन का उपयोग करके क्लाइंट-साइड पर की जाती है। कोई इमेज डेटा, Base64 स्ट्रिंग या कोई जानकारी किसी सर्वर पर ट्रांसमिट नहीं होती।
कौन से इमेज फॉर्मेट सपोर्टेड हैं?
यह टूल पांच सबसे आम वेब इमेज फॉर्मेट सपोर्ट करता है: PNG, JPEG (JPG), SVG, GIF और WebP। प्रत्येक फॉर्मेट MIME टाइप द्वारा स्वचालित रूप से पहचाना जाता है और उचित Data URI प्रीफिक्स के साथ सही ढंग से एनकोड किया जाता है।
Base64 एनकोडिंग का साइज ओवरहेड कितना है?
Base64 एनकोडिंग डेटा साइज को लगभग 33% बढ़ाती है। ऐसा इसलिए क्योंकि Base64 बाइनरी डेटा के हर 3 बाइट को 4 ASCII कैरेक्टर में बदलता है। उदाहरण के लिए, 30KB का आइकन Base64 स्ट्रिंग के रूप में लगभग 40KB हो जाता है। यह छोटी इमेज (10-20KB से कम) के लिए Base64 एम्बेडिंग को आदर्श बनाता है जहां HTTP रिक्वेस्ट को हटाना साइज वृद्धि से अधिक फायदेमंद है।
Raw Base64 और Data URI में क्या अंतर है?
Raw Base64 सादी एनकोडेड स्ट्रिंग है (जैसे: iVBORw0KGgoAAAA...)। Data URI इसे MIME टाइप प्रीफिक्स के साथ रैप करता है: data:image/png;base64,iVBORw0KGgoAAAA... HTML <img src>, CSS background-image: url(...) या ब्राउज़र <link> टैग में इमेज एम्बेड करते समय आपको Data URI फॉर्मेट की जरूरत होती है। Raw Base64 तब उपयोगी है जब आपको API पेलोड, डेटाबेस स्टोरेज या कस्टम प्रोसेसिंग के लिए सिर्फ एनकोडेड डेटा चाहिए।
मुझे Base64 इमेज vs. रेगुलर इमेज फाइल कब उपयोग करनी चाहिए?
Base64 एम्बेडिंग उपयोग करें: छोटे आइकन और लोगो (10-20KB से कम), सिंगल-फाइल HTML पेज, ईमेल टेम्पलेट। रेगुलर इमेज फाइल उपयोग करें: बड़ी फोटो, ब्राउज़र कैशिंग से लाभ उठाने वाली इमेज, 50KB से अधिक इमेज जहां 33% साइज ओवरहेड महत्वपूर्ण हो जाता है। सामान्य नियम: अगर HTTP रिक्वेस्ट ओवरहेड Base64 साइज ओवरहेड से अधिक है, तो Base64 का उपयोग करें।
क्या मैं Data URI प्रीफिक्स के बिना Base64 स्ट्रिंग डीकोड कर सकता हूं?
हां। अगर आप data:image/...;base64, प्रीफिक्स के बिना रॉ Base64 स्ट्रिंग पेस्ट करते हैं, तो टूल डिफ़ॉल्ट फॉर्मेट (PNG) मानकर डीकोड करने का प्रयास करेगा। सर्वोत्तम परिणामों के लिए, पूर्ण Data URI प्रीफिक्स शामिल करें ताकि टूल इमेज टाइप का सही पता लगा सके।
कोड उदाहरण
// === Image to Base64 Encoding (Browser) ===
// Encode image file to Base64 Data URI
function imageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(new Error('Failed to read file'));
reader.readAsDataURL(file);
});
}
// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
const commaIndex = dataUri.indexOf(',');
return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}
// Format output for different use cases
function formatBase64Output(dataUri, format) {
switch (format) {
case 'raw': return extractRawBase64(dataUri);
case 'html': return `<img src="${dataUri}" alt="" />`;
case 'css': return `background-image: url(${dataUri});`;
default: return dataUri;
}
}
// === Base64 to Image Decoding ===
function base64ToBlob(base64Input) {
let dataUri = base64Input.trim();
if (!dataUri.startsWith('data:')) {
dataUri = `data:image/png;base64,${dataUri}`;
}
const [header, data] = dataUri.split(',');
const mimeMatch = header.match(/data:(.*?);/);
const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
const byteString = atob(data);
const byteArray = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
byteArray[i] = byteString.charCodeAt(i);
}
return new Blob([byteArray], { type: mimeType });
}
// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
const dataUri = await imageToBase64(file);
console.log('HTML:', formatBase64Output(dataUri, 'html'));
});