HTML में छोटा PNG इनलाइन करें
अतिरिक्त HTTP अनुरोधों के बिना छोटे आइकन को सीधे मार्कअप में एम्बेड करने के लिए पूरा <img src="data:image/png;base64,..." alt="" /> अंश बनाएँ।
स्थानीय रूप से प्रोसेस किया जाता है
ऑनलाइन छवि से Base64
फ़ाइल आकार निदान के साथ PNG, JPEG, WebP, GIF, BMP और SVG छवियों को अपने ब्राउज़र में स्थानीय रूप से Base64, Data URI, HTML और CSS अंशों में बदलें।
अवलोकन
यह टूल क्या करता है
छवि से Base64 कन्वर्टर स्थानीय PNG, JPEG, WebP, GIF, BMP और SVG छवियों को आपके ब्राउज़र में कच्चे Base64, Data URI, HTML <img> टैग और CSS background-image url() अंशों में बदलता है। यह सर्वर पर फ़ाइल अपलोड किए बिना पिक्सेल आयाम मापता है, बाइट आकार जाँचता है और पेलोड की अतिरिक्त लागत निकालता है।
कार्यप्रवाह
कैसे इस्तेमाल करें
नीचे दिया मुख्य कार्यप्रवाह अपनाएँ। ऊपर लाइव टूल में वास्तविक नियंत्रण ढूँढने के लिए ‘टूल में दिखाएँ’ इस्तेमाल करें।
छवि जोड़ें
टूल में छवि छोड़ें, स्थानीय फ़ाइल चुनें, क्लिपबोर्ड से छवि पेस्ट करें या फ़ाइल बदलने के लिए छवि बदलें पर क्लिक करें। छवि 100% स्थानीय रूप से प्रोसेस होती है।
छवि यहाँ छोड़ेंछवि चुनेंछवि बदलेंछवि पेस्ट करेंछवि और फ़ाइल के तथ्य देखें
इनलाइन रूप बनाने से पहले स्थानीय पूर्वावलोकन, छवि प्रकार, आयाम और स्रोत फ़ाइल आकार जाँचें।
पूर्वावलोकनप्रकारआयाममूल आकारBase64 रूप चुनें
एन्कोड किया छवि अंश कहाँ इस्तेमाल होगा, उसके अनुसार Data URI, कच्चा Base64, HTML <img> और CSS url() के बीच बदलें।
Data URIमूल Base64HTML <img>CSS url()एन्कोड किया आकार जाँचें
बड़ी छवियाँ सीधे कोड या मार्कअप में एम्बेड करने से पहले Base64 लंबाई और अतिरिक्त आकार देखें।
Base64 लंबाईअतिरिक्त आकारबड़ी इनलाइन एसेटआउटपुट कॉपी करें
केवल आवश्यक रूप कॉपी करें। चुना Base64, Data URI, HTML या CSS आउटपुट आपके कॉपी करने तक स्थानीय रहता है।
कॉपी करें
सफलता
अब आप स्थानीय छवियों को Base64 में बदल सकते हैं, तथ्य और अतिरिक्त आकार जाँच सकते हैं, Data URI, HTML और CSS अंशों के बीच बदल सकते हैं तथा आउटपुट कॉपी कर सकते हैं।
आउटपुट कॉपी करेंसारांश कॉपी करेंव्यावहारिक मामले
उदाहरण
CSS बैकग्राउंड Data URI
स्वतंत्र UI घटकों या आइकन स्टाइलशीट के लिए CSS background-image: url("data:image/png;base64,...") घोषणा बनाएँ।
JSON या कॉन्फ़िगरेशन में आइकन एम्बेड करें
डेटाबेस फ़ील्ड, परिवेश कॉन्फ़िगरेशन या वेब मैनिफ़ेस्ट एसेट भरने के लिए data URI उपसर्ग के बिना कच्ची Base64 स्ट्रिंग कॉपी करें।
कच्ची फ़ाइल के बाइट और Base64 लंबाई की तुलना करें
एम्बेड करने से पहले लगभग 33% अतिरिक्त ट्रांसपोर्ट आकार की सटीक पुष्टि के लिए मूल बाइट गणना और Base64 वर्ण लंबाई साथ देखें।
क्लिपबोर्ड स्क्रीनशॉट से Data URI
अस्थायी छवि फ़ाइल सहेजे बिना सीधे क्लिपबोर्ड से स्क्रीनशॉट पेस्ट करके तुरंत Data URI अंश प्राप्त करें।
समस्या निवारण
सामान्य त्रुटियाँ
- Base64 को छवि संपीड़न समझना; Base64 ट्रांसपोर्ट पेलोड का आकार लगभग 33% बढ़ाता है।
- जहाँ API या स्कीमा कच्ची Base64 स्ट्रिंग की अपेक्षा करता है, वहाँ data:image/...;base64, उपसर्ग शामिल करना।
- Data URI हेडर में गलत MIME प्रकार देने से छवि रेंडर होने में विफलता।
- बड़ी छवि एसेट (>2 MB) इनलाइन एम्बेड करना, जिससे वेब पेज की लोडिंग और पार्सिंग धीमी होती है।
- छवि गुणवत्ता, रिज़ॉल्यूशन या रंग पैलेट बदलने की अपेक्षा करना; Base64 रूपांतरण बाइट सुरक्षित रखता है।
प्रमाण से कार्रवाई तक
AI कार्यप्रवाह
जब कोड को इनलाइन छवि चाहिए, तो बनाया गया Data URI, HTML या CSS अंश सीधे इस्तेमाल करें। जब तक पेलोड स्वयं स्पष्ट रूप से आवश्यक न हो, AI सहायक को बड़ा Base64 पेलोड न भेजें।
डेवलपर मार्गदर्शिकाएँ
इस टूल के साथ सीखें
अवधारणा समझें, जाँचने योग्य उदाहरण देखें, फिर उसे ऊपर के टूल में खोलें।
अक्सर पूछे जाने वाले प्रश्न