🛠️

Whiz Tools

Build • Create • Innovate

बेस64 इमेज डिकोडर और व्यूअर | बेस64 को इमेज में कनवर्ट करें

बेस64-कोडित इमेज स्ट्रिंग्स को तुरंत डिकोड और पूर्वावलोकन करें। JPEG, PNG, GIF और अन्य सामान्य प्रारूपों का समर्थन करता है, और अमान्य इनपुट के लिए त्रुटि प्रबंधन करता है।

बेस64 छवि डिकोडर और दर्शक

एक बेस64-कोडित छवि स्ट्रिंग पेस्ट करें और छवि देखने के लिए इसे डिकोड करें।

छवि पूर्वावलोकन

दिखाने के लिए कोई छवि नहीं है। इसे स्वचालित रूप से डिकोड करने के लिए एक बेस64 स्ट्रिंग पेस्ट करें।

JPEG, PNG, GIF और अन्य सामान्य छवि प्रारूपों का समर्थन करता है।

निर्देश

1. ऊपर दिए गए टेक्स्ट क्षेत्र में एक बेस64-कोडित छवि स्ट्रिंग पेस्ट करें।

2. जैसे-जैसे आप टाइप करेंगे, छवि स्वचालित रूप से डिकोड होगी, या 'छवि डिकोड करें' बटन पर क्लिक करें।

3. डिकोड की गई छवि नीचे पूर्वावलोकन क्षेत्र में दिखाई देगी।

नोट: सर्वोत्तम परिणामों के लिए, स्ट्रिंग को 'data:image/' से शुरू होना चाहिए, लेकिन यह उपकरण इस उपसर्ग के बिना स्ट्रिंग को भी डिकोड करने का प्रयास करेगा।

📚

दस्तावेज़ीकरण

Base64 छवि डिकोडर और दर्शक

परिचय

Base64 एक बाइनरी-से-टेक्स्ट एनकोडिंग योजना है जो बाइनरी डेटा को ASCII स्ट्रिंग प्रारूप में प्रस्तुत करती है। इसका उपयोग आमतौर पर HTML, CSS, JavaScript, JSON और अन्य टेक्स्ट-आधारित प्रारूपों में छवि डेटा को सीधे एम्बेड करने के लिए किया जाता है, जहां बाइनरी डेटा को सीधे शामिल नहीं किया जा सकता। यह उपकरण आपको base64-कोडित छवि स्ट्रिंग को डिकोड करने और परिणामस्वरूप छवियों को सीधे अपने ब्राउज़र में देखने की अनुमति देता है।

Base64 एनकोडिंग मूल बाइनरी की तुलना में डेटा के आकार को लगभग 33% बढ़ा देती है, लेकिन यह छवियों को टेक्स्ट-आधारित दस्तावेज़ों में सीधे शामिल करने में सक्षम बनाती है बिना अलग फ़ाइल डाउनलोड की आवश्यकता के। यह छोटे चित्रों जैसे आइकनों, लोगो या सरल ग्राफिक्स के लिए विशेष रूप से उपयोगी हो सकता है जहां एम्बेडिंग की सुविधा आकार वृद्धि से अधिक महत्वपूर्ण होती है।

हमारा Base64 छवि डिकोडर उपकरण एक सरल इंटरफ़ेस प्रदान करता है जहां आप एक base64-कोडित छवि स्ट्रिंग चिपका सकते हैं और तुरंत डिकोड की गई छवि देख सकते हैं। यह JPEG, PNG, GIF, WebP और SVG सहित सभी सामान्य छवि प्रारूपों का समर्थन करता है, और डेटा URL प्रारूप (जिसमें data:image/... उपसर्ग होता है) और कच्चे base64 स्ट्रिंग दोनों को संभाल सकता है।

तकनीकी विवरण

Base64 एनकोडिंग प्रारूप

Base64 एनकोडिंग बाइनरी डेटा को 64 ASCII वर्णों (A-Z, a-z, 0-9, +, और /) के सेट में परिवर्तित करती है, जिसमें = पैडिंग के लिए उपयोग किया जाता है। वेब पर छवियों के लिए, base64 डेटा आमतौर पर डेटा URL के रूप में निम्नलिखित संरचना में स्वरूपित किया जाता है:

1data:[<media type>][;base64],<data>
2

उदाहरण के लिए, एक base64-कोडित PNG छवि इस प्रकार दिख सकती है:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

इस प्रारूप के घटक हैं:

  • data: - URL स्कीम
  • image/png - डेटा का MIME प्रकार
  • ;base64 - एनकोडिंग विधि
  • , - हेडर और डेटा के बीच एक डिलिमिटर
  • वास्तविक base64-कोडित डेटा

डिकोडिंग प्रक्रिया

जब एक base64 छवि स्ट्रिंग को डिकोड किया जाता है, तो निम्नलिखित चरण होते हैं:

  1. यह निर्धारित करने के लिए स्ट्रिंग को पार्स किया जाता है कि क्या इसमें डेटा URL उपसर्ग है
  2. यदि उपसर्ग मौजूद है, तो छवि प्रारूप निर्धारित करने के लिए MIME प्रकार निकाला जाता है
  3. base64 डेटा भाग को अलग किया जाता है और बाइनरी डेटा में डिकोड किया जाता है
  4. बाइनरी डेटा को एक Blob या एक ऑब्जेक्ट URL में परिवर्तित किया जाता है जिसे छवि के रूप में प्रदर्शित किया जा सकता है

यदि इनपुट में डेटा URL उपसर्ग शामिल नहीं है, तो डिकोडर इसे कच्चे base64 डेटा के रूप में मानने का प्रयास करता है और डिकोडेड बाइनरी हेडर से छवि प्रकार का अनुमान लगाता है या PNG पर डिफ़ॉल्ट होता है।

समर्थित छवि प्रारूप

यह उपकरण सभी सामान्य वेब छवि प्रारूपों का समर्थन करता है:

प्रारूपMIME प्रकारसामान्य उपयोग के मामले
JPEGimage/jpegफ़ोटो, कई रंगों के साथ जटिल छवियाँ
PNGimage/pngपारदर्शिता की आवश्यकता वाली छवियाँ, स्क्रीनशॉट, ग्राफिक्स
GIFimage/gifसरल एनिमेशन, सीमित रंग की छवियाँ
WebPimage/webpJPEG/PNG की तुलना में बेहतर संपीड़न के साथ आधुनिक प्रारूप
SVGimage/svg+xmlवेक्टर ग्राफिक्स, स्केलेबल आइकन और चित्रण

उपयोग के मामले

Base64-कोडित छवियों के कई व्यावहारिक अनुप्रयोग हैं वेब विकास और उससे आगे:

  1. HTML/CSS/JS में छवियों को एम्बेड करना: छोटे चित्रों के लिए कोड में सीधे छवियों को शामिल करके HTTP अनुरोधों को कम करता है, जिससे पृष्ठ लोड समय में सुधार हो सकता है।

  2. ईमेल टेम्पलेट्स: सुनिश्चित करता है कि छवियाँ ठीक से प्रदर्शित होती हैं ईमेल क्लाइंट में जो डिफ़ॉल्ट रूप से बाहरी छवियों को ब्लॉक करते हैं।

  3. सिंगल-फ़ाइल अनुप्रयोग: एक ही फ़ाइल के भीतर सभी संसाधनों के साथ आत्म-निहित HTML अनुप्रयोग बनाता है।

  4. API प्रतिक्रियाएँ: छवि डेटा को सीधे JSON प्रतिक्रियाओं में शामिल करता है बिना अलग छवि एंडपॉइंट की आवश्यकता के।

  5. CSS में डेटा URIs: छोटे आइकनों और पृष्ठभूमि छवियों को सीधे CSS फ़ाइलों में एम्बेड करता है।

  6. कैनवास हेरफेर: कैनवास छवि डेटा को सहेजने और स्थानांतरित करने में सहायता करता है।

  7. ऑफलाइन अनुप्रयोग: स्थानीयStorage या IndexedDB में छवियों को टेक्स्ट स्ट्रिंग के रूप में संग्रहीत करता है।

प्रदर्शन विचार

हालांकि base64 एनकोडिंग सुविधा प्रदान करती है, लेकिन इसके साथ व्यापार-ऑफ होते हैं:

  • फाइल आकार में वृद्धि: Base64 एनकोडिंग डेटा के आकार को लगभग 33% बढ़ा देती है।
  • ब्राउज़र कैशिंग नहीं: एम्बेडेड छवियाँ अलग छवि फ़ाइलों की तरह कैश नहीं की जा सकती हैं।
  • पार्सिंग ओवरहेड: ब्राउज़र को रेंडरिंग से पहले base64 स्ट्रिंग को डिकोड करना होगा।
  • रखरखाव की चुनौतियाँ: एम्बेडेड छवियाँ संदर्भित फ़ाइलों की तुलना में अपडेट करना कठिन होती हैं।

इष्टतम प्रदर्शन के लिए, base64 एनकोडिंग आमतौर पर केवल छोटे चित्रों (10KB से कम) के लिए अनुशंसित होती है। बड़े चित्रों को आमतौर पर अलग फ़ाइलों के रूप में बेहतर सेवा दी जाती है जिन्हें सही ढंग से कैश और ऑप्टिमाइज़ किया जा सकता है।

विकल्प

विभिन्न उपयोग के मामलों के लिए base64 एनकोडिंग के कई विकल्प हैं:

  1. SVG इनलाइन एम्बेडिंग: वेक्टर ग्राफिक्स के लिए, इनलाइन SVG अक्सर base64-कोडित SVG की तुलना में बेहतर प्रदर्शन और लचीलापन प्रदान करता है।

  2. WebP और आधुनिक छवि प्रारूप: ये JPEG/PNG की तुलना में बेहतर संपीड़न प्रदान करते हैं।

  3. इमेज स्प्राइट्स: कई छोटे छवियों को एकल फ़ाइल में मिलाकर और CSS स्थिति का उपयोग करना।

  4. CDNs (सामग्री वितरण नेटवर्क): उत्पादन साइटों के लिए, अनुकूलित छवियों को CDN से सेवा देना अक्सर अधिक कुशल होता है।

  5. डेटा संपीड़न: बड़े मात्रा में बाइनरी डेटा को स्थानांतरित करने के लिए, विशेषीकृत संपीड़न एल्गोरिदम जैसे gzip या Brotli base64 से अधिक कुशल होते हैं।

कोड उदाहरण

यहाँ विभिन्न प्रोग्रामिंग भाषाओं में base64-कोडित छवियों के साथ काम करने के उदाहरण हैं:

1// JavaScript (ब्राउज़र) में छवि को base64 में परिवर्तित करें
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // डेटा URL (base64 स्ट्रिंग) के रूप में प्राप्त करें
11  return canvas.toDataURL('image/png');
12}
13
14// एक base64 छवि प्रदर्शित करें
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // बिना डेटा URL उपसर्ग वाले स्ट्रिंग को संभालें
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML कार्यान्वयन

यहाँ HTML में सीधे base64 छवि एम्बेड करने का तरीका है:

1<!-- HTML में सीधे base64 छवि एम्बेड करना -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 कोडित छवि">
3
4<!-- CSS के साथ base64 पृष्ठभूमि छवि का उपयोग करना -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

इतिहास

Base64 एनकोडिंग का उद्भव 1970 के दशक में इलेक्ट्रॉनिक मेल सिस्टम के विकास में हुआ। इसे उन समस्याओं को हल करने के लिए डिज़ाइन किया गया था जो बाइनरी डेटा को ऐसे सिस्टम के माध्यम से प्रसारित करने में थीं जो केवल ASCII टेक्स्ट को संभालने के लिए डिज़ाइन किए गए थे।

एनकोडिंग योजना को 1987 में RFC 989 के प्रकाशन के साथ औपचारिक रूप दिया गया, जिसने प्राइवेसी एनहांस्ड मेल (PEM) मानक को परिभाषित किया। इसे बाद में RFC 1421 और अन्य संबंधित मानकों में अपडेट किया गया। "base64" शब्द स्वयं इस तथ्य से आता है कि एनकोडिंग बाइनरी डेटा का प्रतिनिधित्व करने के लिए 64 विभिन्न ASCII वर्णों का उपयोग करती है।

वेब विकास के संदर्भ में, base64 एनकोडेड छवियों की लोकप्रियता डेटा URIs के आगमन के साथ बढ़ी, जिसे 1998 में RFC 2397 में पहले प्रस्तावित किया गया था। इसने बाइनरी डेटा को HTML, CSS और अन्य वेब दस्तावेज़ों में सीधे शामिल करने की अनुमति दी।

2000 के मध्य में, वेब विकास में base64-कोडित छवियों का उपयोग अधिक व्यापक हो गया क्योंकि डेवलपर्स ने HTTP अनुरोधों को कम करने और पृष्ठ लोड समय में सुधार करने के तरीके खोजे। यह तकनीक विशेष रूप से मोबाइल वेब विकास के उदय के दौरान अपनाई गई, जहां धीमी मोबाइल कनेक्शनों पर प्रदर्शन के लिए अनुरोधों को कम करना महत्वपूर्ण था।

आज, base64 एनकोडिंग वेब विकास में एक महत्वपूर्ण उपकरण बना हुआ है, हालांकि इसके उपयोग को अधिक लक्षित किया गया है क्योंकि सर्वोत्तम प्रथाएँ विकसित हुई हैं। आधुनिक दृष्टिकोण आमतौर पर छोटे, महत्वपूर्ण चित्रों के लिए base64 एनकोडिंग का चयनात्मक रूप से उपयोग करते हैं जबकि बड़े संपत्तियों के लिए अधिक कुशल वितरण विधियों का लाभ उठाते हैं।

संदर्भ

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: डेटा URIs
  4. CSS-Tricks: डेटा URIs
  5. Base64 छवि एनकोडर
  6. क्या मैं उपयोग कर सकता हूँ: डेटा URIs
  7. वेब प्रदर्शन: कब base64 एनकोड छवियाँ (और कब नहीं)
🔗

संबंधित उपकरण

अधिक उपकरणों का पता लगाएँ जो आपके कार्यप्रवाह के लिए उपयोगी हो सकते हैं