🛠️

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 में डेटा URI: छोटे आइकन और पृष्ठभूमि छवियों को सीधे 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 एन्कोडिंग 1998 में RFC 2397 में डेटा URI के प्रस्ताव के साथ लोकप्रियता प्राप्त की, जिसने बाइनरी डेटा को HTML, CSS, और अन्य वेब दस्तावेजों में सीधे शामिल करने की अनुमति दी।

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

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

संदर्भ

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
🔗

ബന്ധപ്പെട്ട ഉപകരണങ്ങൾ

നിങ്ങളുടെ പ്രവൃത്തി പ്രവാഹത്തിന് ഉപകാരപ്രദമായ കൂടുതൽ ഉപകരണങ്ങൾ കണ്ടെത്തുക

ബേസ്64 എൻകോഡർ & ഡീകോഡർ: ടെക്സ്റ്റ് ബേസ്64-ലേക്ക്/ലേക്ക് മാറ്റുക

ഈ ഉപകരണം പരീക്ഷിക്കുക

ബൈനറി-ഡെസിമൽ കൺവെർട്ടർ: നമ്പർ സിസ്റ്റങ്ങൾക്കിടയിൽ മാറ്റം

ഈ ഉപകരണം പരീക്ഷിക്കുക

പരീക്ഷണത്തിനും സ്ഥിരീകരണത്തിനും വേണ്ടി IBAN സൃഷ്ടിക്കാനും സ്ഥിരീകരിക്കാനും ഉപകരണം

ഈ ഉപകരണം പരീക്ഷിക്കുക

CSS മിനിഫയർ ടൂൾ: ഓൺലൈൻ CSS കോഡ് ഒപ്റ്റിമൈസ് & കംപ്രസ് ചെയ്യുക

ഈ ഉപകരണം പരീക്ഷിക്കുക

സംഖ്യാ അടിസ്ഥാന മാറ്റാൻ: ബൈനറി, ദശമലവം, ഹെക്സും ഇഷ്ടാനുസൃത അടിസ്ഥാനങ്ങളും

ഈ ഉപകരണം പരീക്ഷിക്കുക

പരീക്ഷണത്തിനുള്ള സാധുവായ CPF നമ്പർ ജനറേറ്റർ

ഈ ഉപകരണം പരീക്ഷിക്കുക

ജാവാസ്ക്രിപ്റ്റ് മിനിഫയർ: പ്രവർത്തനക്ഷമത നഷ്ടപ്പെടാതെ കോഡ് വലുപ്പം കുറയ്ക്കുക

ഈ ഉപകരണം പരീക്ഷിക്കുക