वेब और एन्कोडिंग

Base64 चित्र और Data URI की व्याख्या

Base64 चित्र के बाइट को टेक्स्ट बनाता है। Data URI मीडिया प्रकार और एन्कोडिंग चिह्न जोड़ता है, जिससे बनी स्ट्रिंग सीधे वहाँ उपयोग हो सकती है जहाँ URL स्वीकार होता है।

प्रकाशित 23 सित॰ 2026

कच्चा Base64 और Data URI एक ही स्ट्रिंग नहीं हैं

कच्चे Base64 में केवल एन्कोड बाइट होते हैं। Data URI एक URL है जिसमें scheme, media type, वैकल्पिक parameter, comma और data होते हैं। Base64 में दर्शाए बाइनरी चित्र बाइट के लिए ;base64 चिह्न शामिल करें।

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

Data URI सिंटैक्स

सामान्य रूप data:[media-type][;base64],data है। चित्र का वास्तविक MIME प्रकार उपयोग करें; label बदलने से PNG बाइट JPEG या दूसरे प्रारूप में नहीं बदलते।

data:[<media-type>][;base64],<data>

HTML में Base64 चित्र लगाएँ

पूरा Data URI src मान में उपयोग करें और अर्थपूर्ण alt टेक्स्ट भी दें। उन चित्र बाइट को पहुँचाने की जिम्मेदारी अब HTML दस्तावेज़ की है।

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Status icon">

CSS में Data URI उपयोग करें

Data URI ऐसी हर CSS property में उपयोग हो सकता है जो URL स्वीकार करती है। बहुत लंबी बनी स्ट्रिंग को हाथ से संपादित style में न रखें, यदि उससे review और diff कठिन होते हों।

.status-icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

चित्र का सही MIME प्रकार चुनें

प्रारूप	MIME प्रकार	प्रीफ़िक्स
PNG	image/png	data:image/png;base64,
JPEG	image/jpeg	data:image/jpeg;base64,
WebP	image/webp	data:image/webp;base64,
SVG	image/svg+xml	data:image/svg+xml;base64,

Base64 एन्कोड बाइट की संख्या बढ़ाता है

Base64 हर तीन इनपुट बाइट को चार एन्कोड वर्णों से दर्शाता है, इसलिए Data URI प्रीफ़िक्स से पहले ही Base64 भाग लगभग एक तिहाई बड़ा होता है। HTTP compression ट्रांसफ़र लागत बदल सकता है, लेकिन parsing, caching और maintenance के समझौते समाप्त नहीं करता।

चित्र कब inline करें

छोटे स्थिर asset पर विचार करें, जब एक request बचने से पेज को वास्तविक लाभ हो।
बड़े, पुनः उपयोग होने वाले या अलग cache होने वाले asset के लिए सामान्य चित्र फ़ाइल चुनें।
केवल कच्चे आकार की तुलना के बजाय अंतिम compressed दस्तावेज़ मापें।
SVG और दूसरे सक्रिय हो सकने वाले media को अपनी content security policy के अनुसार सँभालें।
Base64 एन्कोडिंग को sanitization या encryption कभी न समझें।

उदाहरण आज़माएँ

नमूना चित्र का Data URI बनाएँ

सुरक्षित स्थानीय नमूना लोड करके कच्चे Base64 और पूर्ण Data URI की तुलना करें।

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

अपेक्षित परिणाम: टूल MIME प्रीफ़िक्स सहित Data URI और अलग कच्ची Base64 सामग्री दिखाता है।

असल प्रारूप बनाएँ

चित्र को Base64 और Data URI में बदलें

सुरक्षित नमूना या अपना चित्र स्थानीय रूप से लोड करके कच्चे Base64, Data URI, HTML और CSS आउटपुट की तुलना करें।

Image to Base64 में आगे बढ़ें →