Base64 क्या है, और वेबसाइटें इमेज में इसे क्यों लगाती हैं?
Base64 किसी भी फ़ाइल को टेक्स्ट में बदलता है। यह कैसे काम करता है, वेबसाइटें इससे इमेज क्यों जोड़ती हैं, साइज़ एक-तिहाई क्यों बढ़ता है और कब इससे बचें।
Base64 एन्कोडिंग किसी भी बाइनरी फ़ाइल, जैसे इमेज, को सिर्फ़ 64 सुरक्षित कैरेक्टर से बने सादे टेक्स्ट में लिखने का तरीका है: A से Z तक के बड़े और छोटे अक्षर, 0 से 9 तक के अंक, और + व /। वेबसाइटें इमेज के लिए इसका इस्तेमाल इसलिए करती हैं क्योंकि यह टेक्स्ट सीधे HTML, CSS या JSON में चिपकाया जा सकता है, यानी एक छोटा आइकन अलग से डाउनलोड होने की बजाय पेज के साथ ही आ जाता है। दिक़्क़त बस साइज़ की है: Base64 टेक्स्ट असली फ़ाइल से लगभग एक-तिहाई बड़ा होता है। यह गाइड बताती है कि यह एन्कोडिंग कैसे काम करती है, असल में कहाँ काम आती है, और कब एक सामान्य इमेज फ़ाइल बेहतर रहती है।
Base64 एन्कोडिंग असल में करती क्या है#
कंप्यूटर इमेज को कच्चे बाइट्स के रूप में सेव करता है, और इनमें से बहुत-से बाइट्स किसी पढ़े जा सकने वाले कैरेक्टर से मेल नहीं खाते। जो भी चीज़ टेक्स्ट ले जाने के लिए बनी है, उसके लिए यह मुश्किल है: HTML का कोई एट्रिब्यूट, CSS फ़ाइल, JSON फ़ील्ड, या ईमेल का मैसेज। Base64 इसका हल यह निकालता है कि बाइट्स को सिर्फ़ ऐसे कैरेक्टर से दोबारा लिखा जाए जो किसी भी टेक्स्ट सिस्टम से बिना बिगड़े निकल जाएँ।
यह तरीका RFC 4648 में तय किया गया है, जिस स्टैंडर्ड को ज़्यादातर सॉफ़्टवेयर फ़ॉलो करते हैं। यह छोटे-छोटे ग्रुप में काम करता है:
- फ़ाइल से 3 बाइट लिए जाते हैं (24 बिट)।
- इन 24 बिट को 6-6 बिट के 4 टुकड़ों में बाँटा जाता है।
- हर 6 बिट का टुकड़ा 0 से 63 के बीच की एक संख्या होता है, जिसे 64 कैरेक्टर वाली वर्णमाला में देखकर कैरेक्टर चुना जाता है।
सबसे मशहूर उदाहरण Man शब्द है। इसके तीन बाइट चार कैरेक्टर TWFu बन जाते हैं। अगर फ़ाइल की लंबाई 3 से पूरी तरह भाग नहीं होती, तो आख़िर में पैडिंग के लिए एक या दो = जोड़ दिए जाते हैं। इसीलिए इतनी सारी Base64 स्ट्रिंग = या == पर ख़त्म होती हैं।
एक बात साफ़ कर दें: Base64 एन्क्रिप्शन नहीं है। कोई भी इसे बिना किसी की (key) या पासवर्ड के तुरंत डिकोड कर सकता है। यह सिर्फ़ डेटा लिखने का तरीका बदलता है, यह नहीं कि उसे कौन पढ़ सकता है।
Base64 से फ़ाइल लगभग 33% बड़ी क्यों हो जाती है#
क्योंकि हर 3 बाइट 4 कैरेक्टर बन जाते हैं, Base64 आउटपुट हमेशा इनपुट का लगभग 4/3 होता है, यानी करीब 33% बड़ा। यह अंदाज़ा नहीं, सीधा हिसाब है:
| असली फ़ाइल | Base64 टेक्स्ट के रूप में |
|---|---|
| 3 KB | लगभग 4 KB |
| 30 KB | लगभग 40 KB |
| 300 KB | लगभग 400 KB |
| 3 MB | लगभग 4 MB |
कुछ सिस्टम हर 76 कैरेक्टर के बाद एक नई लाइन भी डाल देते हैं (ईमेल ऐसा करता है, जैसा RFC 2045 में बताया गया है), जिससे साइज़ थोड़ा और बढ़ता है। वेब सर्वर का टेक्स्ट कम्प्रेशन (gzip या Brotli) इस बढ़त का कुछ हिस्सा वापस ले आता है, लेकिन एन्कोड की गई इमेज कभी भी असली फ़ाइल से छोटी नहीं होती।
वेबसाइटें इमेज के लिए Base64 कैसे इस्तेमाल करती हैं#
वेब पर Base64 इमेज लगभग हमेशा data URL के रूप में दिखती हैं: जहाँ आम तौर पर इमेज का लिंक होता, वहाँ इमेज ख़ुद लिखी होती है। इसका फ़ॉर्मेट MDN के data URL पेज पर समझाया गया है, और यह कुछ ऐसा दिखता है:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">
यही चीज़ CSS में भी चलती है, जैसे बैकग्राउंड इमेज के रूप में:
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}
ब्राउज़र टेक्स्ट पढ़ता है, उसे वापस असली PNG में डिकोड करता है, और ठीक वैसे ही दिखाता है जैसे उसने अलग फ़ाइल डाउनलोड की हो। अपनी इमेज के लिए यह कोड पाने के लिए कोई JPG, PNG, WebP या AVIF फ़ाइल इमेज से Base64 कन्वर्टर में डालें और तैयार img टैग, CSS रूल या सीधी स्ट्रिंग कॉपी कर लें।
Base64 इमेज कब अच्छा आइडिया है#
इमेज को टेक्स्ट के रूप में जोड़ना कुछ ख़ास हालात में ही समझदारी है:
- बहुत छोटे आइकन और UI ग्राफ़िक्स। आपकी CSS में जुड़ा छोटा आइकन स्टाइलशीट के साथ ही आता है, इसलिए न देर से दिखता है और न अलग से लोड होने में फ़ेल होता है।
- अपने आप में पूरी फ़ाइलें। एक अकेली HTML फ़ाइल, ईमेल टेम्पलेट, या कोई ऐसा डॉक्यूमेंट जिसे आप बिना किसी बाहरी फ़ाइल के चलाना चाहते हैं, अपनी इमेज अपने अंदर रख सकता है।
- ऐसा डेटा जिसे टेक्स्ट के रूप में ही जाना हो। JSON API, कॉन्फ़िग फ़ाइलें और क्लिपबोर्ड के स्निपेट कच्चे बाइट नहीं रख सकते, इसलिए इनमें इमेज आम तौर पर Base64 होती हैं। ईमेल अटैचमेंट भी इसी वजह से अंदर से Base64 होते हैं।
- जल्दी बनाए गए प्रोटोटाइप और डेमो, जब इमेज को कहीं होस्ट करने की बजाय एक स्ट्रिंग चिपका देना आसान लगे।
Base64 इमेज से कब बचें#
असली वेबसाइट की ज़्यादातर इमेज के लिए सामान्य इमेज फ़ाइल बेहतर है:
- बड़े डाउनलोड। हर जोड़ी गई इमेज फ़ाइल से लगभग एक-तिहाई ज़्यादा बाइट लेती है।
- अलग से कैश नहीं होती। Base64 इमेज उस HTML या CSS के हिस्से के रूप में कैश होती है जिसमें वह है। उस स्टाइलशीट की एक लाइन भी बदली, तो ब्राउज़र इमेज भी दोबारा डाउनलोड करेगा, जबकि अलग इमेज फ़ाइल अपनी जगह कैश में बनी रहती है।
- पेज धीमा होता है। इमेज का टेक्स्ट आपकी HTML या CSS के अंदर होता है, जिसे ब्राउज़र को पेज दिखाने से पहले डाउनलोड करना पड़ता है। एक बड़ी जुड़ी हुई फ़ोटो सब कुछ धीमा कर देती है, उस टेक्स्ट को भी जो वरना सबसे पहले दिख जाता।
- रिक्वेस्ट बचाना अब उतना मायने नहीं रखता। इमेज जोड़ने की सबसे बड़ी वजह एक रिक्वेस्ट बचाना थी, लेकिन HTTP/2 ब्राउज़र को एक ही कनेक्शन पर कई छोटी फ़ाइलें लाने देता है, इसलिए आज यह बचत काफ़ी कम है।
एक समझदार नियम: सिर्फ़ ज़्यादा से ज़्यादा कुछ किलोबाइट की इमेज जोड़ें, बाक़ी सब सामान्य फ़ाइल के रूप में दें। फ़ोटो के लिए असली फ़ायदा आम तौर पर फ़ाइल को ही छोटा करने में है, और इमेज कम्प्रेसर यही काम आपके ब्राउज़र में करता है। क्वालिटी खोए बिना इमेज कम्प्रेस करने की हमारी गाइड बताती है कि आप कितना आगे जा सकते हैं।
SVG का मामला अलग है#
SVG फ़ाइलें पहले से टेक्स्ट होती हैं, इसलिए data URL में जाने के लिए इन्हें असल में Base64 की ज़रूरत नहीं होती। आप SVG कोड को URL-एन्कोड भी कर सकते हैं, जो आम तौर पर छोटा निकलता है क्योंकि 33% की बढ़त नहीं होती, हालाँकि Base64 आसान है और कोट्स व स्पेशल कैरेक्टर की झंझट से बचाता है। SVG से Base64 कन्वर्टर आपको दोनों वर्शन देता है, आप चुन लीजिए। और अगर आपको पक्का नहीं पता कि SVG फ़ाइल में असल में क्या होता है, तो SVG फ़ाइल क्या है वाला हमारा लेख पढ़ें।
दोनों कन्वर्टर पूरी तरह आपके ब्राउज़र में चलते हैं, इसलिए आपकी इमेज कभी अपलोड नहीं होतीं। इनसे जुड़े टूल इमेज टूल्स और डेवलपर टूल्स पेज पर मिलेंगे।
अक्सर पूछे जाने वाले सवाल#
आसान शब्दों में Base64 एन्कोडिंग क्या है?
Base64 एन्कोडिंग किसी भी फ़ाइल, जैसे इमेज, को 64 सुरक्षित कैरेक्टर (A से Z तक बड़े और छोटे अक्षर, 0 से 9 तक अंक, और + व /) से सादे टेक्स्ट में लिखने का तरीका है। इससे बाइनरी डेटा उन सिस्टम से गुज़र पाता है जो सिर्फ़ टेक्स्ट संभालते हैं, जैसे HTML, CSS, JSON और ईमेल।
वेबसाइटें इमेज के लिए Base64 क्यों इस्तेमाल करती हैं? वेबसाइटें Base64 इसलिए इस्तेमाल करती हैं ताकि छोटी इमेज अलग फ़ाइल के रूप में डाउनलोड होने की बजाय सीधे HTML या CSS के अंदर रखी जा सके। यह सबसे ज़्यादा छोटे आइकन और ईमेल टेम्पलेट जैसी अपने आप में पूरी फ़ाइलों के लिए काम का है।
क्या Base64 से इमेज बड़ी हो जाती है? हाँ, Base64 से इमेज लगभग 33% बड़ी हो जाती है, क्योंकि असली फ़ाइल के हर 3 बाइट टेक्स्ट के 4 कैरेक्टर बन जाते हैं। 30 KB की इमेज लगभग 40 KB का Base64 बन जाती है।
क्या Base64 एक तरह का एन्क्रिप्शन है? नहीं, Base64 एन्क्रिप्शन नहीं है, क्योंकि कोई भी इसे बिना की (key) या पासवर्ड के तुरंत डिकोड कर सकता है। यह सिर्फ़ डेटा लिखने का तरीका बदलता है, यह नहीं कि उसे कौन पढ़ सकता है, इसलिए संवेदनशील जानकारी छिपाने के लिए इसे कभी इस्तेमाल न करें।
मुझे Base64 इमेज कब इस्तेमाल नहीं करनी चाहिए? बड़ी इमेज और फ़ोटो के लिए Base64 इस्तेमाल नहीं करना चाहिए, क्योंकि 33% ज़्यादा साइज़ और अलग से कैश न हो पाने की वजह से पेज धीमा हो जाता है। इन्हें सामान्य इमेज फ़ाइल के रूप में दें और सिर्फ़ कुछ किलोबाइट तक की इमेज ही जोड़ें।
किसी इमेज को Base64 में कैसे बदलें?
किसी इमेज को Base64 में बदलने के लिए उसे ConvertOwl के इमेज से Base64 टूल जैसे कन्वर्टर में डाल दें, जो आपके ब्राउज़र में चलता है और एन्कोड की गई स्ट्रिंग के साथ चिपकाने के लिए तैयार img टैग या CSS रूल देता है।
कम शब्दों में#
- Base64 किसी भी फ़ाइल को 64 सुरक्षित कैरेक्टर से टेक्स्ट के रूप में लिखता है। यह एन्कोडिंग है, एन्क्रिप्शन नहीं।
- हर 3 बाइट 4 कैरेक्टर बनते हैं, इसलिए नतीजा लगभग 33% बड़ा होता है।
- वेबसाइटें इसका इस्तेमाल छोटी इमेज को data URL के रूप में सीधे HTML या CSS में डालने के लिए करती हैं।
- सिर्फ़ बहुत छोटी इमेज जोड़ें; फ़ोटो और बड़ी हर चीज़ सामान्य फ़ाइल के रूप में दें।
- इमेज से Base64 कन्वर्टर या SVG से Base64 कन्वर्टर आज़माएँ, और ज़्यादा जानकारी के लिए हमारे टेक्नोलॉजी लेख पढ़ें।
टूल आज़माएँ
मुफ़्त, निजी और तुरंत। सब कुछ आपके ब्राउज़र में चलता है।
