Base64 इमेज एन्कोडर

Base64 इमेज एन्कोडर और डिकोडर: इमेज खींचकर उसका Data URI HTML और CSS स्निपेट के साथ कॉपी करें, या Data URI पेस्ट करके उसे देखें और डाउनलोड करें।

Base64 इमेज एन्कोडर / डिकोडर पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा छोड़ी गई इमेज और पेस्ट किए गए Data URI आपके डिवाइस पर ही प्रोसेस होते हैं और कभी ArrayKit पर अपलोड नहीं होते।

निर्माण और रखरखाव: Udit Agarwal

Base64 एन्कोडर / डिकोडर खोलें

Base64 इमेज एन्कोडर / डिकोडर के बारे में

Base64 इमेज एन्कोडर किसी भी इमेज को एक Base64 Data URI में बदल देता है जिसे आप सीधे HTML या CSS में पेस्ट कर सकते हैं। PNG, JPEG, WebP, SVG या GIF छोड़ें और यह तुरंत Data URI के साथ प्रोडक्शन-तैयार स्निपेट दिखाता है — एडिट करने योग्य alt टेक्स्ट वाला <img> टैग और एक CSS background-image नियम — हर एक के साथ एक-क्लिक कॉपी। यह MIME टाइप, फ़ाइल आकार, पिक्सेल आयाम और स्ट्रिंग की लंबाई भी बताता है, ताकि आपको ठीक-ठीक पता रहे कि आप क्या एम्बेड कर रहे हैं। डिकोड मोड पर जाकर एक Data URI पेस्ट करें, इमेज का प्रीव्यू देखें और उसे सही फ़ाइल एक्सटेंशन के साथ डाउनलोड करें। यह फ्रंट-एंड डेवलपर्स, ईमेल और टेम्पलेट लेखकों, और उन सभी के लिए बनाया गया है जो एक रिक्वेस्ट बचाने के लिए छोटे आइकन इनलाइन करते हैं। सब कुछ आपके ब्राउज़र में लोकली चलता है, इसलिए आपकी इमेज आपके डिवाइस पर ही रहती हैं।

विशेषताएँ

  • ड्रैग-एंड-ड्रॉप या क्लिक करके PNG, JPEG, WebP, SVG और GIF को Base64 Data URI में एन्कोड करें
  • रॉ Data URI, तैयार HTML <img> टैग और CSS background-image नियम की एक-क्लिक कॉपी
  • एडिट करने योग्य alt टेक्स्ट जो एक्सेसिबिलिटी के लिए जेनरेट किए गए <img> स्निपेट में सीधे जाता है
  • MIME टाइप, फ़ाइल आकार, पिक्सेल आयाम और Data URI की लंबाई एक नज़र में दिखाता है
  • डिकोड मोड Data URI पेस्ट करके इमेज का प्रीव्यू दिखाता है और सही एक्सटेंशन के साथ डाउनलोड करता है
  • जब कोई इमेज इतनी बड़ी हो कि उसे Base64 के रूप में कुशलता से इनलाइन न किया जा सके तो चेतावनी देता है
  • रास्टर फ़ोटो के साथ-साथ SVG और GIF को भी संभालता है, उचित डाउनलोड एक्सटेंशन के साथ
  • पूरी तरह आपके ब्राउज़र में चलता है, इसलिए इमेज कभी किसी सर्वर पर अपलोड नहीं होतीं

Base64 इमेज एन्कोडर / डिकोडर का उपयोग कैसे करें

  1. इमेज → Base64 टैब चुना हुआ रखें और ड्रॉप ज़ोन में एक इमेज छोड़ें
  2. Base64 Data URI, HTML <img> टैग या CSS background-image नियम कॉपी करें
  3. वैकल्पिक रूप से alt टेक्स्ट टाइप करें ताकि वह <img> स्निपेट में शामिल हो जाए
  4. Base64 → इमेज पर जाएँ, एक Data URI पेस्ट करें, फिर इमेज का प्रीव्यू देखें और डाउनलोड करें

उदाहरण

इनपुट

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

आउटपुट

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

एक PNG एक इनलाइन <img> टैग बन जाता है जो बिना किसी अतिरिक्त नेटवर्क रिक्वेस्ट के लोड होता है।

सामान्य त्रुटियाँ और समस्या निवारण

  • Data URI पेस्ट करने पर 'The Data URI payload is not valid Base64.' दिखता है। — data:image/… से शुरू होकर ';base64,' सहित पूरी स्ट्रिंग कॉपी करें, और आपके एडिटर द्वारा जोड़े गए अतिरिक्त कोट्स या लाइन ब्रेक हटा दें।
  • डिकोड की गई इमेज प्रीव्यू नहीं होती। — जाँचें कि MIME टाइप डेटा से मेल खाता है — image/jpeg लेबल वाला PNG कंटेंट रेंडर नहीं होगा। सही Data URI पाने के लिए मूल फ़ाइल को फिर से एन्कोड करें।
  • इमेज इनलाइन करने के बाद मेरी HTML या CSS फ़ाइल बहुत बड़ी हो गई। — Base64 लगभग 33% ओवरहेड जोड़ता है और इनलाइन इमेज अलग से कैश नहीं होतीं। केवल छोटे आइकन इनलाइन करें और बड़ी इमेज को सामान्य फ़ाइलों के रूप में लिंक करें।
  • किसी अन्य टूल का SVG Data URI अलग दिखता है। — कुछ टूल SVG को Base64 के बजाय परसेंट-एन्कोड करते हैं। यह एन्कोडर हमेशा Base64 का उपयोग करता है; दोनों मान्य Data URI हैं पर बाइट-दर-बाइट विनिमेय नहीं हैं।

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

Base64 इमेज Data URI क्या है?
Data URI एक इमेज को सीधे data:image/png;base64,XXXX जैसी स्ट्रिंग में एम्बेड कर देता है। इमेज के बाइट Base64 में एन्कोड होते हैं, इसलिए आप पूरी इमेज को बिना अलग फ़ाइल या रिक्वेस्ट के HTML के src या CSS के url() में रख सकते हैं।
मैं कौन-कौन से इमेज फ़ॉर्मेट एन्कोड कर सकता हूँ?
कोई भी इमेज जिसे आपका ब्राउज़र पढ़ सके — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF और ICO काम करते हैं। डिकोडर Data URI से MIME टाइप पढ़ता है और उससे मेल खाता डाउनलोड एक्सटेंशन देता है।
क्या मुझे इमेज को Base64 के रूप में इनलाइन करना चाहिए?
इनलाइन करना छोटे, बार-बार इस्तेमाल होने वाले एसेट जैसे आइकन या ईमेल इमेज के लिए उपयुक्त है, जहाँ एक रिक्वेस्ट बचाना मदद करता है। बड़ी इमेज के लिए यह आमतौर पर नुकसानदेह है, क्योंकि Base64 आकार में लगभग एक-तिहाई जोड़ता है और डेटा अपने आप कैश नहीं हो सकता।
क्या मैं Data URI को वापस इमेज फ़ाइल में डिकोड कर सकता हूँ?
हाँ। Base64 → इमेज पर जाएँ, data:image/…;base64, स्ट्रिंग पेस्ट करें, और टूल इमेज का प्रीव्यू दिखाकर उसे सही फ़ाइल एक्सटेंशन के साथ डाउनलोड करने देता है।
क्या एन्कोड करते समय मेरी इमेज अपलोड होती हैं?
नहीं। एन्कोडर ब्राउज़र के FileReader से फ़ाइल पढ़ता है और Data URI आपके डिवाइस पर बनाता है। ArrayKit या किसी सर्वर को कुछ नहीं भेजा जाता।
Base64 स्ट्रिंग मेरी इमेज से बड़ी क्यों है?
Base64 तीन बाइट को चार वर्णों से दर्शाता है, इसलिए एन्कोड किया गया टेक्स्ट मूल बाइनरी से लगभग 33% बड़ा होता है, साथ ही छोटा data:…;base64, उपसर्ग भी। यह ओवरहेड सामान्य और अपेक्षित है।

संबंधित टूल

इमेज के और टूल

  • App Icon Generator — एक इमेज को iOS, macOS और Android की हर app icon साइज़ में बदलें — आपके browser में जनरेट होकर ZIP के रूप में डाउनलोड।
  • sprite sheet CSS एनिमेशन — एक sprite sheet को लाइव प्रीव्यू के साथ एक कॉपी-पेस्ट CSS steps() एनिमेशन में बदलें।
  • SVG से PNG कन्वर्टर — SVG मार्कअप या फ़ाइल को किसी भी स्केल पर एक कुरकुरे PNG या JPG में बदलें।
  • इमेज कलर पिकर — एक इमेज से किसी भी पिक्सेल का HEX, RGB, और HSL चुनें।
  • Color Format Converter — किसी भी CSS रंग को एक साथ HEX, RGB, HSL, HWB, LAB, LCH, OKLCH और OKLAB में बदलें।
  • Barcode जेनरेटर — EAN-13, UPC-A, Code 128, Code 39 और ITF-14 barcode जेनरेट करें और SVG या PNG डाउनलोड करें।
  • Image Color Palette एक्सट्रैक्टर — किसी भी image से dominant रंग और एक palette निकालें — HEX, RGB, HSL, CSS और Tailwind।
  • इमेज फ्लिप और रोटेट — ब्राउज़र में इमेज को घुमाएँ और फ्लिप करें
  • इमेज क्रॉपर — कोई भी भाग या स्थिर अनुपात क्रॉप कर पूर्ण रिज़ॉल्यूशन में सहेजें।
  • इमेज वॉटरमार्क — टेक्स्ट या लोगो — स्थिर या टाइल, अपारदर्शिता और घुमाव सहित।
  • इमेज रिडैक्ट करें — स्क्रीनशॉट के भाग स्थायी रूप से धुँधले, पिक्सेलित या काले करें।
  • इमेज के कोने गोल करें — गोल कोने या वृत्त में काटें, पारदर्शी PNG।

इमेज के सभी टूल देखें (40) · सभी टूल