ConvertOwl

इमेज से Base64 — HTML और CSS के लिए डेटा URL बनाएँ

किसी भी इमेज को Base64-एन्कोडेड डेटा URL में बदलें ताकि आप इसे किसी अलग फ़ाइल संदर्भ के बिना सीधे HTML, CSS या JavaScript में एम्बेड कर सकें। Base64 इमेज ईमेल टेम्पलेट, इनलाइन SVG शैलियों, स्टाइलशीट में डेटा URI, और उन स्थितियों के लिए उपयोगी हैं जहाँ आप फ़ाइलें बाहरी रूप से होस्ट नहीं कर सकते। आउटपुट एक टेक्स्ट फ़ाइल है जिसमें पूरी डेटा URL स्ट्रिंग होती है, कॉपी-पेस्ट के लिए तैयार।

फ़ाइलें यहाँ छोड़ें

या अपलोड करने के लिए ब्राउज़ करें · क्लिपबोर्ड से पेस्ट करें

प्रति फ़ाइल 10.0 MB तक

इस टूल का उपयोग कैसे करें

  1. अपनी इमेज अपलोड करें

    एक JPEG, PNG, WebP या AVIF इमेज छोड़ें (अधिकतम 10 MB — Base64 स्ट्रिंग जल्दी बड़ी हो जाती हैं)। टूल कच्चे फ़ाइल बाइट्स को बिना री-एन्कोडिंग के पढ़ता है।

  2. Convert पर क्लिक करें

    इमेज बाइट्स एक Base64 स्ट्रिंग में बदल दिए जाते हैं और उपयुक्त MIME प्रकार उपसर्ग के साथ एक डेटा URL में लपेट दिए जाते हैं (जैसे, data:image/jpeg;base64,...)।

  3. टेक्स्ट फ़ाइल डाउनलोड करें

    आउटपुट एक .txt फ़ाइल है जिसमें पूरी डेटा URL होती है। इसे किसी भी टेक्स्ट एडिटर में खोलें, फिर स्ट्रिंग कॉपी करें।

  4. अपने कोड में उपयोग करें

    डेटा URL को सीधे किसी img src विशेषता, CSS background-image प्रॉपर्टी, या JavaScript स्ट्रिंग में पेस्ट करें। किसी अलग इमेज होस्टिंग की ज़रूरत नहीं।

अक्सर पूछे जाने वाले प्रश्न

Base64 डेटा URL क्या है?

Base64 डेटा URL बाइनरी डेटा (जैसे इमेज) को सीधे टेक्स्ट स्ट्रिंग में एम्बेड करने का एक तरीका है। प्रारूप है: data:[mime-type];base64,[encoded-data]। यह इमेज को नेटवर्क पर कोई अलग फ़ाइल लोड किए बिना सीधे HTML, CSS और JavaScript में उपयोग करने देता है। एक JPEG इमेज data:image/jpeg;base64,/9j/4AAQ... से शुरू होने वाली एक बहुत लंबी स्ट्रिंग बन जाती है।

मुझे फ़ाइल संदर्भ के बजाय Base64 इमेज कब उपयोग करनी चाहिए?

Base64 तब उपयोग करें जब: आपको HTML ईमेल टेम्पलेट में इमेज एम्बेड करनी हो (जहाँ बाहरी URL अवरुद्ध हो सकते हैं), एकल-फ़ाइल HTML दस्तावेज़ों में, SVG फ़ाइलों में, या JavaScript-जनित सामग्री में। सार्वजनिक वेबसाइटों पर बड़ी इमेज के लिए Base64 से बचें — यह HTML/CSS फ़ाइल आकार ~33% बढ़ाता है, पार्सिंग को अवरुद्ध करता है, और पेज से अलग कैश नहीं किया जा सकता।

Base64 स्ट्रिंग मूल फ़ाइल से लगभग 33% बड़ी क्यों है?

Base64 एन्कोडिंग बाइनरी डेटा के प्रत्येक 3 बाइट्स को 4 ASCII वर्णों के रूप में दर्शाता है — 33% ओवरहेड। एक 100 KB का JPEG ~133 KB की Base64 स्ट्रिंग बन जाता है। यह Base64 का मूल समझौता है: यह बाइनरी डेटा को टेक्स्ट के रूप में प्रस्तुत करने योग्य बनाता है, लेकिन आकार की क़ीमत पर। बड़ी इमेज के लिए, यह ओवरहेड महत्वपूर्ण है।

क्या Base64 रूपांतरण के लिए फ़ाइल आकार की सीमा है?

हम इनपुट को 10 MB तक सीमित करते हैं। परिणामी Base64 स्ट्रिंग ~13.3 MB होगी। ब्राउज़र लंबी स्ट्रिंग को ठीक से संभालते हैं, लेकिन उन्हें HTML/CSS में एम्बेड करने से पेज रेंडरिंग काफ़ी धीमी हो सकती है। वेब उपयोग के लिए, एम्बेडेड इमेज को 10–20 KB से नीचे रखें। बड़ी इमेज अलग फ़ाइलों के रूप में परोसी जानी चाहिए।

क्या मैं Base64 स्ट्रिंग को सीधे img टैग में पेस्ट कर सकता हूँ?

हाँ: <img src="data:image/jpeg;base64,/9j/4AAQ..." alt="मेरी इमेज">। ब्राउज़र Base64 स्ट्रिंग को डिकोड करता है और बिना किसी नेटवर्क अनुरोध के इमेज प्रदर्शित करता है। यह सभी आधुनिक ब्राउज़रों में JPEG, PNG, GIF, WebP और SVG प्रारूपों के लिए काम करता है।

कुछ काम नहीं कर रहा? बग रिपोर्ट करें