छवि से Base64 — मुफ़्त ऑनलाइन
CSS या HTML में उपयोग के लिए किसी भी छवि को Base64 स्ट्रिंग में बदलें।
Who uses the छवि से Base64?
- फ्रंटएंड डेवलपर अतिरिक्त HTTP रिक्वेस्ट खत्म करने के लिए CSS में छोटे आइकन एम्बेड कर रहे हैं।
- ईमेल डेवलपर उन HTML ईमेल में लोगो इमेज एम्बेड कर रहे हैं जो बाहरी संसाधनों को ब्लॉक करते हैं।
- API इंटीग्रेटर JSON रिक्वेस्ट बॉडी में इमेज डेटा भेज रहे हैं जिनके लिए स्ट्रिंग एन्कोडिंग की ज़रूरत होती है।
How the छवि से Base64 works
फ़ाइल सिलेक्टर का उपयोग करके अपनी इमेज फ़ाइल अपलोड करें, या इसे टूल एरिया में खींचकर छोड़ें।
Base64 स्ट्रिंग तुरंत आउटपुट टेक्स्ट बॉक्स में जनरेट हो जाती है।
«Base64 कॉपी करें» पर क्लिक करके पूरा डेटा URI (data:image/png;base64,...) अपने क्लिपबोर्ड पर कॉपी करें, HTML src एट्रिब्यूट या CSS बैकग्राउंड में उपयोग के लिए।
अगर आपको केवल डेटा URI प्रीफ़िक्स के बिना कच्चा Base64 चाहिए, तो उपयोग करने से पहले पहले कॉमा तक (उसे शामिल करते हुए) सब कुछ मैन्युअल रूप से हटा दें।
Tips & tricks
- कॉपी बटन हमेशा पूरा डेटा URI कॉपी करता है («data:image/...;base64,» प्रीफ़िक्स के साथ) — केवल कच्ची Base64 स्ट्रिंग के लिए कोई अलग बटन नहीं है।
- Base64 फ़ाइल आकार में लगभग 33% जोड़ता है — यह टूल छोटे आइकन और लगभग 10KB से नीचे की इमेज के लिए सबसे उपयुक्त है, बड़ी फ़ोटो के लिए नहीं।
- एक बार में केवल एक ही इमेज प्रोसेस की जा सकती है — कई फ़ाइलों के लिए बल्क कन्वर्ज़न नहीं है।
- आउटपुट टेक्स्ट बॉक्स पूरा डेटा URI सादे टेक्स्ट में दिखाता है — अगर आप कॉपी बटन के पूरे आउटपुट का उपयोग नहीं करना चाहते तो आप मैन्युअल रूप से केवल एक हिस्सा भी चुनकर कॉपी कर सकते हैं।
Frequently Asked Questions
मैं इमेज फ़ाइल के बजाय इमेज को Base64 के रूप में क्यों एम्बेड करूँ?
इमेज को HTML या CSS में Base64 के रूप में एम्बेड करने से उस इमेज के लिए एक HTTP रिक्वेस्ट खत्म हो जाती है, जिससे छोटे आइकन और फोल्ड के ऊपर की महत्वपूर्ण इमेज के लिए परफ़ॉर्मेंस बेहतर हो सकती है। यह HTML ईमेल में विशेष रूप से उपयोगी है जहाँ बाहरी इमेज ब्लॉक हो सकती हैं।
Base64 इमेज मूल फ़ाइल से कितनी बड़ी होती है?
Base64 एन्कोडिंग लगभग 33% अतिरिक्त भार जोड़ती है। एक 10KB की PNG Base64 में लगभग 13.3KB हो जाती है। बड़ी इमेज के लिए, यह अतिरिक्त भार एक HTTP रिक्वेस्ट बचाने के फ़ायदे से ज़्यादा हो जाता है — Base64 का उपयोग केवल लगभग 10KB से छोटी इमेज के लिए करें।
क्या कॉपी बटन केवल कच्चा Base64 कॉपी करता है, या पूरा डेटा URI?
Base64 कॉपी करें बटन हमेशा पूरा डेटा URI कॉपी करता है, जिसमें «data:image/...;base64,» प्रीफ़िक्स शामिल है — केवल कच्ची Base64 स्ट्रिंग के लिए कोई अलग बटन नहीं है। अगर आपको केवल कच्ची स्ट्रिंग चाहिए (जैसे API पेलोड के लिए), तो कॉपी करें और पहले कॉमा तक (उसे शामिल करते हुए) सब कुछ मैन्युअल रूप से हटा दें।
मैं HTML img टैग में Base64 इमेज का उपयोग कैसे करूँ?
पूरा डेटा URI src के रूप में उपयोग करें: <img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">। ब्राउज़र बिना किसी बाहरी रिक्वेस्ट के इमेज को डिकोड करके इनलाइन दिखाता है।
मैं CSS में Base64 इमेज का उपयोग कैसे करूँ?
इसे बैकग्राउंड के रूप में उपयोग करें: background-image: url("data:image/svg+xml;base64,...")। यह SVG आइकन के लिए विशेष रूप से प्रभावी है क्योंकि यह स्टाइल को स्व-निहित रखता है।
कौन से इमेज फ़ॉर्मेट को Base64 में बदला जा सकता है?
कोई भी फ़ॉर्मेट जिसे आपका ब्राउज़र फ़ाइल के रूप में पढ़ सके वह काम करता है: JPG, PNG, GIF, WebP और अन्य। आउटपुट डेटा URI प्रीफ़िक्स सोर्स फ़ाइल के वास्तविक MIME प्रकार को दर्शाता है।
Is my data safe when using the छवि से Base64?
Completely safe. The छवि से Base64 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
What image formats does the छवि से Base64 support?
The छवि से Base64 works with common image formats supported by your browser, including JPEG, PNG, WebP, and GIF. SVG support varies by tool. No format conversion plugin or driver is needed.
Does the छवि से Base64 work with large image files?
Yes. The छवि से Base64 processes files entirely in your browser using the Canvas API. Very large files (over 20 MB) may take a few extra seconds on older or lower-powered devices. Closing other tabs can free up memory for better performance.