टूल
गाइड

छवि ↔ Base64

छवि

छवि को Base64 डेटा URL में बदलें और वापस, पूर्वावलोकन व डाउनलोड के साथ।

100% क्लाइंट-साइड कोई बैकएंड नहीं
यहाँ क्लिक करें या छवि छोड़ें एक छवि अपलोड करें, या डेटा URL पेस्ट करें।
पूर्वावलोकन
इस पृष्ठ पर

image-to-Base64 रूपांतरण क्या है?#

data URL एक ऐसा स्ट्रिंग है जो पूरी फ़ाइल को इनलाइन समाहित करता है, उसके MIME प्रकार के उपसर्ग के साथ: data:image/png;base64,iVBORw0KGgo…। एक बार जब कोई छवि ऐसे स्ट्रिंग के अंदर आ जाती है तो वह टेक्स्ट की तरह व्यवहार करती है — इसे आप HTML, CSS, JSON, Markdown फ़ाइल या स्रोत फ़ाइल में चिपका सकते हैं, और उपभोक्ता इसे बिना कभी कोई अलग फ़ाइल लाए रेंडर कर देता है। यह पृष्ठ एक छवि फ़ाइल को data URL में बदलता है और data URL को वापस देखने योग्य छवि में बदलता है, पूरी तरह आपके ब्राउज़र में।

Base64 बाइनरी डेटा को लगभग 33% तक फुलाता है (हर तीन बाइट चार ASCII अक्षर बन जाते हैं), इसलिए data URL उस फ़ाइल से बड़ा होता है जिसे वह प्रतिस्थापित करता है। यह तुलना तब लायक है जब आप शून्य बाहरी अनुरोध चाहते हैं: HTML ईमेल हस्ताक्षर, सिंगल-फ़ाइल डेमो, <head> में इनलाइन favicon, JSON कॉन्फ़िग में समाहित आइकन, या ऐसे वातावरण (कुछ CSP-लॉक्ड पृष्ठ, सैंडबॉक्स्ड पूर्वावलोकन) जहाँ डिस्क से <img src> लोड करना संभव नहीं है।

यह टूल data URL को RFC 2397 के अनुसार पार्स करता है, base64 और URL-एन्कोडेड टेक्स्ट पेलोड दोनों स्वीकार करता है, MIME का पता लगाता है, और पूर्वावलोकन से पहले वैध करता है कि यह वास्तव में एक छवि है — इसलिए एक टूटा हुआ स्ट्रिंग चिपकाना चुपचाप टूटी-छवि आइकन दिखाने के बजाय स्पष्ट रूप से विफल हो जाता है।

इसका उपयोग कैसे करें#

  1. किसी छवि को डैश वाले क्षेत्र पर छोड़ें, या अपलोड पर क्लिक करके एक फ़ाइल चुनें। PNG, JPEG, WebP, GIF, SVG, BMP, AVIF और ICO — सभी स्वीकार्य हैं।
  2. बाईं ओर Base64 डेटा URL टेक्स्टएरिया पूरे data:image/…;base64,… स्ट्रिंग से भर जाता है। इसे लेने के लिए दाईं ओर कॉपी का उपयोग करें।
  3. विपरीत दिशा में जाने के लिए, एक data URL को उसी टेक्स्टएरिया में चिपकाएँ। दाईं ओर पूर्वावलोकन छवि को फिर से रेंडर करता है, और डाउनलोड इसे सही एक्सटेंशन के साथ वास्तविक फ़ाइल के रूप में सहेज लेता है।
  4. साफ़ करें दोनों पैन खाली कर देता है।

MIME को data URL हेडर से पढ़ा जाता है, फ़ाइल एक्सटेंशन से अनुमान नहीं लगाया जाता — इसलिए .png को .jpg में नाम बदलने से टूल बेवकूफ़ नहीं बनेगा, और डाउनलोड एक्सटेंशन हमेशा वास्तविक प्रकार से मेल खाएगा।

मुख्य विशेषताएँ#

  • द्विदिशात्मक रूपांतरण। एम्बेड करने हेतु छवि → data URL; निकालने हेतु data URL → फ़ाइल। एक ही पैन दोनों दिशाओं को संभालता है।
  • MIME-जागरूक। सुझाया गया डाउनलोड एक्सटेंशन वास्तविक मीडिया प्रकार से लिया जाता है (image/svg+xml → .svg, image/jpeg → .jpg), फ़ाइलनाम से नहीं।
  • पूर्वावलोकन से पहले वैध करता है। विकृत स्ट्रिंग को चुपचाप टूटी छवि दिखाने के बजाय अमान्य के रूप में चिह्नित किया जाता है।
  • मनमाने बाइट्स को सुरक्षित रूप से संभालता है। Base64 एन्कोडिंग टुकड़ों में की जाती है ताकि मल्टीबाइट और बाइनरी पेलोड बिना भ्रष्ट हुए राउंड-ट्रिप करें।
  • स्थानीय रहता है। FileReader और atob/btoa API काम पृष्ठ के अंदर ही करते हैं; कुछ भी अपलोड नहीं होता।

विस्तृत उदाहरण#

आपके पास pixel.gif है — एक 1×1 पारदर्शी ट्रैकिंग पिक्सेल (वह प्रकार जिसका उपयोग ईमेल क्लाइंट ओपन बीकन के रूप में करते हैं), 43 बाइट। इसे अपलोड करें। Data URL टेक्स्टएरिया पूरा, सटीक स्ट्रिंग उत्पन्न करता है:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

यह एक वास्तविक, पूर्ण data URL है — इसे HTML में <img src="…">, CSS background-image: url('…'), या JSON फ़ील्ड में चिपकाएँ और उपभोक्ता बिना किसी फ़ाइल लाए मूल पिक्सेल रेंडर कर देगा। MIME (image/gif) और .gif डाउनलोड एक्सटेंशन दोनों data URL हेडर से आते हैं, मूल फ़ाइलनाम से नहीं।

बड़ी फ़ोटो के लिए सिद्धांत समान है — केवल base64 बॉडी बढ़ती है (बाइट आकार का लगभग 1.33 गुना) और MIME image/jpeg या image/webp हो जाता है।

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

मेरा data URL मूल फ़ाइल से इतना बड़ा क्यों है?#

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

क्या कोई आकार सीमा है?#

ब्राउज़र सैकड़ों मेगाबाइट तक के data URL संभाल लेता है, लेकिन व्यवहार में कुछ सौ KiB से ऊपर की कोई भी चीज़ आपके HTML, CSS और JSON को फुलाती है और पार्सर धीमे कर देती है। केवल छोटे आइकन, लोगो और स्प्राइट ही इनलाइन करें।

क्या मैं SVG रूपांतरित कर सकता हूँ?#

हाँ। SVG का MIME image/svg+xml है और वह पहले से ही टेक्स्ट है, इसलिए data URL कॉम्पैक्ट होता है और हानिरहित राउंड-ट्रिप करता है।

मैंने जो data URL चिपकाया वह “अमान्य” कहता है। क्या हुआ?#

स्ट्रिंग का आरंभ data: से होना चाहिए और उसमें हेडर को पेलोड से अलग करता एक कॉमा होना चाहिए। एक अधूरी कॉपी, आगे का कोई स्ट्रै स्पेस, या छूटा हुआ ;base64 फ़्लैग — सभी पार्सिंग विफल कर देंगे। हेडर सहित पूरा स्ट्रिंग फिर से कॉपी करें।