इमेज से Base64
नयाकिसी भी इमेज को Base64 डेटा URL स्ट्रिंग में बदलें
इमेज से Base64 का उपयोग कैसे करें
- 1अपनी छवि अपलोड करें
- 2उत्पन्न Base64 स्ट्रिंग कॉपी करें
- 3इसे HTML img src, CSS background-image, या JSON payload में पेस्ट करें
- 4इसे सीधे अपने HTML या CSS में पेस्ट करें
इमेज से Base64 के बारे में
इमेज टु Base64 आपकी इमेज फ़ाइल को Base64 टेक्स्ट स्ट्रिंग में बदलता है जिसे सीधे HTML img टैग, CSS बैकग्राउंड या JSON पेलोड में एम्बेड किया जा सकता है — बिना अलग इमेज फ़ाइल के।
इमेज से Base64 की मुख्य विशेषताएं
- Converts PNG, JPG, WEBP, GIF, and SVG to Base64
- Outputs a ready-to-use data URI string
- One-click copy of the full encoded output
- Shows encoded string length and estimated size
- Supports drag-and-drop image upload
- Instant encoding with no server upload
- 100% client-side using the FileReader API
- Works with any image size up to browser memory limits
समर्थित फॉर्मेट
इनपुट फॉर्मेट
आउटपुट फॉर्मेट
The output data URL includes the correct MIME type prefix (data:image/png;base64, etc.) automatically.
उदाहरण
Inline icon in HTML email
Embed the icon directly in your email HTML so it displays even when external images are blocked.
इनपुट
Small 32x32 PNG icon
आउटपुट
data:image/png;base64,iVBOR... (full data URL)
CSS background image
Use the data URL in a CSS background-image property to avoid an extra HTTP request for small decorative assets.
इनपुट
Small decorative PNG texture
आउटपुट
background-image: url("data:image/png;base64,...")JSON API प्रतिक्रिया में इमेज
JSON पेलोड में "avatar" फ़ील्ड के मान के रूप में डेटा URL प्रीयुक्त के बिना रॉ Base64 स्ट्रिंग कॉपी करें।
इनपुट
User avatar PNG
आउटपुट
Raw Base64 string for JSON field value
सामान्य उपयोग के मामले
- Embed small icons directly in HTML to avoid extra HTTP requests
- Include images inline in CSS for background graphics
- Store image data inside JSON API payloads or config files
- Create self-contained HTML email templates with embedded images
- Encode signature images for embedding in PDF generation scripts
- Bundle small sprites directly in JavaScript source files
समस्या निवारण
Output string is extremely long and slows down the editor
समाधान
Base64 encoding increases size by ~33%. For images over 100 KB, consider serving them as regular files instead of inline data URIs.
Data URI does not display in the browser
समाधान
Ensure the data URI includes the correct MIME type prefix, e.g. "data:image/png;base64," — the tool generates this automatically, so check for accidental truncation when copying.
SVG encoding produces broken output
समाधान
For SVG files, URL-encoding is sometimes more reliable than Base64. Use the raw SVG source or URL-encode the SVG string instead.
अक्सर पूछे जाने वाले प्रश्न
छवियों के लिए Base64 का उपयोग क्यों करें?
Base64 से आप अलग फ़ाइल अनुरोधों के बिना सीधे कोड में छवियाँ एम्बेड कर सकते हैं।
क्या Base64 फ़ाइल आकार बढ़ाता है?
हाँ, लगभग 33%। इसका उपयोग केवल तभी करें जब एम्बेड करना आवश्यक हो।
डेटा URL और रॉ Base64 स्ट्रिंग में क्या अंतर है?
डेटा URL में MIME टाइप प्रीफ़िक्स (data:image/png;base64,) शामिल होता है। रॉ Base64 स्ट्रिंग सिर्फ़ एनकोडेड डेटा है।
क्या फ़ाइल आकार की कोई सीमा है?
कोई सर्वर-साइड सीमा नहीं है। आधुनिक डिवाइस पर 10 MB तक की इमेज विश्वसनीय रूप से एनकोड होती हैं।
कौन से इमेज फ़ॉर्मेट सपोर्ट किए जाते हैं?
PNG, JPG, WEBP, GIF, SVG, BMP और ICO सभी सपोर्ट हैं।
क्या CSS में Base64 आउटपुट उपयोग कर सकते हैं?
हाँ। CSS background-image प्रॉपर्टी के मान के रूप में पूरा डेटा URL उपयोग करें।
Can I use the Base64 output in a JSON API?
Yes. Copy the raw Base64 string (without the data URL prefix) to use as the value of an image field in a JSON payload.
What happens to transparency in the Base64 output?
Transparency is preserved in the data URL when the source is a PNG. The MIME type in the prefix (data:image/png;base64,) ensures the browser renders it correctly.