इमेज को Base64 में — data URL ऑनलाइन
छवि को Base64 टेक्स्ट में बदलें, या HTML/CSS/Markdown या सिर्फ़ string वाले config के लिए पूरा `data:image/...;base64,` data URL। छोटे icon और thumbnail के लिए सही — multi-MB फ़ोटो embed करने से page फूलता है और load धीमा होता है।
फ़ाइल यहाँ छोड़ें, या चुनने के लिए क्लिक करें
Base64 binary को readable characters में लिखता है। Data URL से browser बिना दूसरे HTTP request छवि लोड कर सकता है — लेकिन string फ़ाइल से लगभग एक तिहाई बड़ी होती है और cache कमज़ोर रहता है।
Kilobyte-scale icon, pixel art, छोटे logo के लिए। Holiday फ़ोटो CSS में ठूँसना stylesheet विशाल बनाता है।
स्रोत बड़ा हो तो पहले compress या resize करें — encoded string भी उसी के साथ छोटी होती है।
कैसे कनवर्ट करें
- छवि चुनें और पूर्वावलोकन पुष्टि करें
- ज़रूरत अनुसार data URL उपसर्ग टॉगल करें
- आउटपुट टेक्स्ट कॉपी करें
- HTML, CSS या कॉन्फ़िग में चिपकाएँ
छवियों के लिए Base64 कब समझ में आता है
- Single-file demo या email HTML जिन्हें inline icon चाहिए।
- Extra asset फ़ाइल के बिना छोटा CSS background।
- API या config जो छवियों के लिए सिर्फ़ text field देते हैं।
- Optional data URL prefix ताकि सीधे copy-paste हो।
परिदृश्य
- Component docs में 16×16 icon
- Email template में छोटा badge (कुल size देखें)
- Form field जो Base64 image data माँगता है
सुझाव
- CSS `url()` के लिए data URL prefix चालू करें।
- प्राप्तकर्ता सिर्फ़ raw Base64 चाहे तो prefix बंद करें।
- String बहुत लंबी? पहले compress या resize करें।
- फ़ाइल वापस चाहिए? Base64 → छवि।
आउटपुट आकार
| इनपुट | आउटपुट | नोट |
|---|---|---|
| छोटा PNG आइकन | data:image/png;base64,... | उपसर्ग के साथ |
| वही छवि | कच्चा Base64 स्ट्रिंग | उपसर्ग बंद |
इमेज → Base64 के सवाल
- कौन से छवि प्रकार काम करते हैं?
- सामान्य ब्राउज़र-पठनीय फ़ॉर्मैट: PNG, JPG, WebP, GIF आदि।
- स्ट्रिंग फ़ाइल से लंबी क्यों?
- Base64 एन्कोडिंग आकार बढ़ाती है — सामान्य है, त्रुटि नहीं।
- पूरा फ़ोल्डर बैच?
- यहाँ एक समय में एक छवि ताकि पूर्वावलोकन सत्यापित कर सकें।
- बड़ी फ़ोटो के लिए अच्छा?
- नहीं — बड़ी छवियों को सामान्य URL के रूप में होस्ट करें; Base64 छोटे एसेट के लिए रखें।