इमेज को Base64 में — data URL ऑनलाइन
छवि को Base64 टेक्स्ट में बदलें, या HTML/CSS/Markdown या सिर्फ़ टेक्स्ट वाले कॉन्फ़िग के लिए पूरा `data:image/...;base64,` data URL। छोटे आइकन और थंबनेल के लिए सही — कई MB की फ़ोटो एम्बेड करने से पेज फूलता है और लोड धीमा होता है।
फ़ाइल यहाँ छोड़ें, या चुनने के लिए क्लिक करें
Base64 बाइनरी को पढ़ने योग्य वर्णों में लिखता है। Data URL से ब्राउज़र बिना दूसरे HTTP अनुरोध छवि लोड कर सकता है — लेकिन स्ट्रिंग फ़ाइल से लगभग एक तिहाई बड़ी होती है और कैश कमज़ोर रहता है।
किलोबाइट-स्तर के आइकन, पिक्सेल आर्ट, छोटे लोगो के लिए। छुट्टियों की फ़ोटो CSS में ठूँसना स्टाइलशीट विशाल बनाता है।
स्रोत बड़ा हो तो पहले संपीड़ित करें या आकार बदलें — एन्कोडेड स्ट्रिंग भी उसी के साथ छोटी होती है।
कैसे कनवर्ट करें
- छवि चुनें और पूर्वावलोकन पुष्टि करें
- ज़रूरत अनुसार data URL उपसर्ग टॉगल करें
- आउटपुट टेक्स्ट कॉपी करें
- HTML, CSS या कॉन्फ़िग में चिपकाएँ
छवियों के लिए Base64 कब समझ में आता है
- एकल-फ़ाइल डेमो या ईमेल HTML जिन्हें इनलाइन आइकन चाहिए।
- अतिरिक्त एसेट फ़ाइल के बिना छोटा CSS बैकग्राउंड।
- API या कॉन्फ़िग जो छवियों के लिए सिर्फ़ टेक्स्ट फ़ील्ड देते हैं।
- वैकल्पिक data URL उपसर्ग ताकि सीधे कॉपी-पेस्ट हो।
परिदृश्य
- कंपोनेंट डॉक्स में 16×16 आइकन
- ईमेल टेम्पलेट में छोटा बैज (कुल आकार देखें)
- फ़ॉर्म फ़ील्ड जो Base64 छवि डेटा माँगता है
सुझाव
- CSS `url()` के लिए data URL prefix चालू करें।
- प्राप्तकर्ता सिर्फ़ raw Base64 चाहे तो prefix बंद करें।
- स्ट्रिंग बहुत लंबी? पहले संपीड़ित करें या आकार बदलें।
- फ़ाइल वापस चाहिए? Base64 → छवि।
आउटपुट आकार
| इनपुट | आउटपुट | नोट |
|---|---|---|
| छोटा PNG आइकन | data:image/png;base64,... | उपसर्ग के साथ |
| वही छवि | कच्चा Base64 स्ट्रिंग | उपसर्ग बंद |
इमेज → Base64 के सवाल
- कौन से छवि प्रकार काम करते हैं?
- सामान्य ब्राउज़र-पठनीय फ़ॉर्मैट: PNG, JPG, WebP, GIF आदि।
- स्ट्रिंग फ़ाइल से लंबी क्यों?
- Base64 एन्कोडिंग आकार बढ़ाती है — सामान्य है, त्रुटि नहीं।
- पूरा फ़ोल्डर बैच?
- यहाँ एक समय में एक छवि ताकि पूर्वावलोकन सत्यापित कर सकें।
- बड़ी फ़ोटो के लिए अच्छा?
- नहीं — बड़ी छवियों को सामान्य URL के रूप में होस्ट करें; Base64 छोटे एसेट के लिए रखें।