§

इमेज येथे ड्रॉप करा किंवा निवडण्यासाठी क्लिक करा

PNG, JPEG, GIF, WebP, SVG, BMP — 30 MB पर्यंत. एका वेळी एक इमेज.

इमेज पूर्णपणे तुमच्या डिव्हाइसवर वाचली आणि एन्कोड केली जाते — ती कधीही तुमच्या ब्राउझरबाहेर जात नाही.

पुणे आणि मुंबईतील वेब डेव्हलपर्ससाठी Base64 data URI ही दैनंदिन गरज बनली आहे. Figma डिझाइनर PNG फाइल्स देतात, वेबसाइटला Core Web Vitals साठी लहान आयकॉन इनलाइन हवे असतात, आणि बिल्ड पाइपलाइन अद्याप तयार नसते. इथे PNG टाका, एन्कोड करा, CSS मध्ये data URI पेस्ट करा. HTML ईमेल न्यूज़लेटर्समध्ये — जसे की Mailchimp किंवा SendGrid वापरून बनवलेले — Base64 म्हणून एम्बेड केलेला लोगो रिसीवरच्या इनबॉक्समध्ये रिमोट इमेज ब्लॉक झाल्यावरही दिसतो. MeitY आणि CERT-In च्या सायबर सुरक्षा मार्गदर्शक तत्त्वांखाली काम करणाऱ्या भारतीय संस्था असे टूल पसंत करतात जे डेटा सर्व्हरवर पाठवत नाहीत.

इमेज-ते-Base64 रूपांतरण कसे कार्य करते

संपूर्ण रूपांतरण तुमच्या ब्राउझरमध्ये File API आणि अंगभूत btoa फंक्शन वापरून चालते — कोणतीही कोडेक लायब्ररी डाउनलोड होत नाही आणि कोणताही सर्व्हर इमेज पाहत नाही. येथे सुरुवातीपासून शेवटपर्यंतची पाइपलाइन आहे:

  1. तुम्ही इमेज ड्रॉप किंवा निवडता. ब्राउझर ती तुमच्या स्थानिक डिस्कवरून Blob म्हणून वाचतो, बाइट्स कधीही सर्व्हरवर कॉपी होत नाहीत.
  2. फाइल 1 MB तुकड्यांमध्ये वाचली जाते आणि प्रत्येक तुकड्याचे बाइट्स बाइनरी स्ट्रिंगमध्ये जोडले जातात. तुकड्यांमध्ये विभागणी मोठ्या इमेज जावास्क्रिप्ट कॉल स्टॅक ओव्हरफ्लोपासून सुरक्षित ठेवते.
  3. बाइनरी स्ट्रिंग btoa ला दिली जाते, जी A–Z, a–z, 0–9, +, / वर्णमालेतून प्रत्येक तीन बाइट चार Base64 अक्षरांवर मॅप करते.
  4. फाइलचा MIME प्रकार (image/png, image/jpeg इत्यादी) File ऑब्जेक्टमधून वाचला जातो आणि data: prefix म्हणून जोडला जातो, ज्यामुळे पूर्ण data:image/…;base64,… URI तयार होतो.
  5. पेज त्या URI मधून चार आउटपुट तयार करतो — पूर्ण data URI, prefix शिवाय Raw Base64, ready-to-paste टॅग आणि CSS background-image snippet — प्रत्येकाचे स्वतःचे कॉपी बटण.

इमेज data URI म्हणून एन्कोड का करावी?

  • लहान लोगो किंवा आयकॉन data URI म्हणून इनलाइन केल्यास एक वेगळी नेटवर्क राउंड-ट्रिप काढून टाकली जाते, त्यामुळे पेज किंवा ईमेल थोड्या लवकर पहिला फ्रेम रेंडर करतो.
  • इनलाइन इमेज असलेला पेज किंवा स्टाइलशीट स्वयंपूर्ण असतो. तो ऑफलाइन काम करतो, आणि तुम्ही assets फोल्डर न घेता तो कुठेही कॉपी करू शकता.
  • बहुतेक मेल क्लाइंट डिफॉल्टनुसार लिंक्ड रिमोट इमेज ब्लॉक करतात. Base64 मध्ये लोगो इनलाइन करा आणि तो संदेश उघडताच दिसतो, कोणताही रिमोट फेच नाही.
  • एन्कोडिंग पूर्णपणे तुमच्या ब्राउझरमध्ये होते, त्यामुळे संवेदनशील इमेज कधीही थर्ड-पार्टी सर्व्हरवर जात नाहीत. स्क्रीनशॉट, ID स्कॅन आणि अंतर्गत आकृत्यांसाठी हे सुरक्षित आहे.

Base64 इमेजचे सामान्य वापर

Data URI तिथे दिसतात जिथे इमेज इतकी लहान असते की वेगळ्या विनंतीचा खर्च Base64 च्या ~33% आकार वाढीपेक्षा जास्त असतो. तीन नमुने वारंवार येतात:

  • इनलाइन CSS आयकॉन: 1–2 KB स्प्राइट किंवा आयकॉन जो stylesheet मध्ये background-image: url(data:…) म्हणून टाकला जातो जेणेकरून नियम पूर्णपणे स्वयंपूर्ण असेल.
  • ईमेल सिग्नेचर आणि न्यूज़लेटर: data URI src असलेल्या म्हणून एम्बेड केलेला लोगो तेव्हाही रेंडर होतो जेव्हा क्लाइंट रिमोट इमेज ब्लॉक करतो.
  • बिल्ड-टूल इनलाइनिंग: Webpack आणि Vite सारखे बंडलर बाइट threshold खालील assets स्वतः इनलाइन करतात, आणि हा टूल तुम्हाला ते आउटपुट नक्की कसे दिसते ते पूर्वावलोकन करू देतो.

Base64 इमेज कशी दिसते?

एक छोटी 1×1 पारदर्शक PNG घ्या. तिचे raw bytes फक्त 67 bytes आहेत, परंतु एन्कोड केल्यावर ती iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= स्ट्रिंग बनते, आणि पूर्ण data URI data:image/png;base64,iVBORw0KGgo… आहे. लक्षात घ्या की एन्कोड केलेला रूप मूळपेक्षा अंदाजे एक तृतीयांश मोठा आहे. टेक्स्टमध्ये बाइनरी डेटा थेट एम्बेड करण्याची हीच किंमत आहे.

माझी इमेज कुठेही अपलोड होते का?

नाही. रूपांतरण ब्राउझरचे File API आणि नेटिव्ह btoa फंक्शन वापरून इमेज पूर्णपणे तुमच्या डिव्हाइसवर एन्कोड करते. तुम्ही स्वतः पुष्टी करू शकता: ब्राउझरचे developer tools उघडा, Network पॅनलवर जा आणि एक इमेज कन्व्हर्ट करा — तुम्हाला फक्त पेज लोड आणि जाहिराती दिसतील. इमेजसारखे काहीही सर्व्हरवर पाठवले जात नाही, ज्यामुळे हे स्क्रीनशॉट, ID दस्तऐवज आणि अंतर्गत आकृत्यांसाठी सुरक्षित आहे.

Base64 आउटपुट माझ्या मूळ इमेजपेक्षा मोठे का आहे?

Base64 बाइनरी डेटाच्या प्रत्येक तीन बाइट चार ASCII अक्षरांनी दर्शवते, त्यामुळे एन्कोड टेक्स्ट स्रोत फाइलपेक्षा अंदाजे 33% मोठे असते. या पेजवरील data URI आकार रीडआउट नक्की वाढलेला आकार दाखवतो. म्हणूनच data URI फक्त लहान इमेजसाठी योग्य आहेत — 2 MB फोटो इनलाइन केल्यास तुमचे HTML किंवा CSS वेगळ्या विनंतीपेक्षा खूप जास्त फुगेल. अंगठ्याचा नियम: अंदाजे 4 KB पेक्षा कमी इमेज इनलाइन करा, मोठ्यांना लिंक करा.

कोणते इमेज फॉर्मेट कन्व्हर्ट करता येतात?

तुमचा ब्राउझर जे कोणतेही फॉर्मेट इमेज म्हणून ओळखतो ते काम करते, कारण टूल चित्र डिकोड करण्याऐवजी raw bytes वाचतो. यात PNG, JPEG, GIF, WebP, SVG आणि BMP समाविष्ट आहेत. MIME प्रकार थेट फाइलमधून वाचला जातो, त्यामुळे data: prefix नेहमी खऱ्या फॉर्मेटशी जुळतो — JPEG साठी data:image/jpeg आणि SVG साठी data:image/svg+xml तयार होतो. SVG ची एक विशेष नोंद: ते आधीच टेक्स्ट आहे, त्यामुळे SVG साठी URL-encoded data URI अनेकदा Base64 आवृत्तीपेक्षा लहान असतो, जरी हा टूल सुसंगततेसाठी Base64 रूप देतो.

इमेज ड्रॉप करा, data URI किंवा हवे ते snippet कॉपी करा, आणि HTML, CSS किंवा ईमेल टेम्पलेटमध्ये पेस्ट करा. प्रत्येक बाइट तुमच्या डिव्हाइसवर राहते. कोणतेही अपलोड नाही, कोणतेही खाते नाही, कोणतीही सर्व्हर राउंड-ट्रिप नाही.