एक कम रिक्वेस्ट का ट्रिक
पेज पर हर अलग इमेज फाइल को लाने के लिए एक नेटवर्क राउंड ट्रिप लगती है — किसी छोटे आइकन या बार-बार इस्तेमाल होने वाली छोटी UI ग्राफिक के लिए, यह राउंड ट्रिप असल में इमेज के ट्रांसफर होने से ज्यादा समय ले सकती है, खासकर धीमे कनेक्शन पर। Base64 एन्कोडिंग इमेज के बाइनरी डेटा को प्लेन-टेक्स्ट स्ट्रिंग में बदलकर इसे पूरी तरह टाल देती है, जो सीधे आपके HTML या CSS के अंदर एम्बेड हो जाती है, तो यह उसी फाइल के हिस्से के रूप में लोड होती है, बिना किसी एक्स्ट्रा रिक्वेस्ट के।
यही तकनीक है जो किसी स्टाइलशीट के `background-image` प्रॉपर्टी में बैठे `data:image/png;base64,...` स्ट्रिंग के पीछे है, या किसी पेज के सोर्स में देखे गए इनलाइन `<img src="data:...">` टैग के पीछे।
33% का टैक्स जो कोई पहले नहीं बताता
Base64 एन्कोडिंग मुफ्त नहीं है — बाइनरी डेटा को टेक्स्ट-सेफ कैरेक्टर के रूप में दिखाने में असली फाइल से लगभग एक-तिहाई ज्यादा जगह लगती है। छोटे आइकन के लिए यह मामूली फर्क है। इससे बड़ी किसी भी चीज़ के लिए, इसे सीधे Base64 के रूप में एम्बेड करना उस HTML, CSS या JSON फाइल को फुला देता है जिसमें यह बैठी है, जो पेज लोड परफॉर्मेंस को असल में खराब कर सकता है, क्योंकि वह फूली हुई टेक्स्ट अब बाकी पेज रेंडर होने से पहले डाउनलोड होनी जरूरी है, ना कि अलग इमेज रिक्वेस्ट की तरह पैरेलल में लोड होना।
व्यावहारिक नियम: छोटी, बार-बार इस्तेमाल होने वाली ग्राफिक्स के लिए Base64 अच्छा सौदा है। असली फोटो या बड़ी ग्राफिक के लिए, सही कैशिंग हेडर वाली सामान्य अलग इमेज फाइल लगभग हमेशा बेहतर रहती है।
यह असल में कहाँ इस्तेमाल होता है
वेब डेवलपमेंट के अलावा, Base64 इमेज स्ट्रिंग JSON API रिस्पॉन्स में दिखती है जहाँ अलग बाइनरी अपलोड स्टेप के बिना इमेज डेटा शामिल करना हो, ईमेल HTML में जहाँ बाहरी इमेज अक्सर मेल क्लाइंट द्वारा वैसे भी ब्लॉक हो जाती हैं, और उन स्थितियों में जहाँ किसी सिस्टम से इमेज को प्लेन टेक्स्ट के रूप में ले जाना हो जो सिर्फ टेक्स्ट फील्ड ही हैंडल करता है।
इन सभी मामलों में वही साइज़ ट्रेड-ऑफ लागू होता है — यह सिर्फ टेक्स्ट-ओनली चैनल से डेटा भेजने या एम्बेड करने की सुविधा है, इमेज को खुद छोटा या तेज़ बनाने की तकनीक नहीं।
कमिट करने से पहले साइज़ चेक करें
इस तरह इमेज एम्बेड करने से पहले, यह देखना जरूरी है कि नतीजे वाली स्ट्रिंग असली फाइल से कितनी बड़ी है — एक कन्वर्टर जो एन्कोड की गई स्ट्रिंग के साथ आउटपुट की लंबाई भी दिखाए, आपको अंदाज़े के बजाय असली नंबरों से फैसला लेने देता है। अगर नतीजा एक छोटी एम्बेडेड ग्राफिक के लिए बेवजह लंबा लगे, तो आमतौर पर इसका मतलब है कि सोर्स इमेज खुद Base64 के लिए बहुत बड़ी है।