छवियों को कब इनलाइन करें
किसी छवि को Base64 पर एन्कोड करने से बड़ी फ़ाइल के लिए नेटवर्क अनुरोध ट्रेड हो जाता है। यह छोटी, अक्सर उपयोग की जाने वाली संपत्तियों - आइकन, छोटे लोगो, स्पेसर ग्राफिक्स - के लिए एक जीत है, जहां राउंड-ट्रिप विलंबता की लागत अतिरिक्त बाइट्स से अधिक होती है। बड़ी तस्वीरों के लिए, उन्हें अलग फ़ाइलों के रूप में रखें।
सीएसएस और एचटीएमएल में डेटा यूआरआई का उपयोग करना
डेटा यूआरआई सिर्फ एक स्ट्रिंग है जो डेटा: इमेज/पीएनजी; बेस64 से शुरू होती है। इसे CSS पृष्ठभूमि-छवि या HTML img स्रोत में छोड़ें और ब्राउज़र इसे इनलाइन प्रस्तुत करता है। यह टूल दोनों स्निपेट उत्पन्न करता है ताकि आप सही स्निपेट को सीधे पेस्ट कर सकें।
आकार का समझौता
बेस64 एन्कोडिंग फ़ाइल के आकार में लगभग 33% जोड़ता है क्योंकि यह टेक्स्ट में बाइनरी डेटा का प्रतिनिधित्व करता है। इनलाइनिंग का मतलब यह भी है कि परिसंपत्ति को सभी पृष्ठों पर अलग-अलग कैश नहीं किया जा सकता है। हर चीज़ के बजाय जानबूझकर छोटे, पृष्ठ-महत्वपूर्ण ग्राफ़िक्स के लिए इसका उपयोग करें।
- 01
- छवि एन्कोडिंग को खींचें और छोड़ें
- 02
- सीएसएस पृष्ठभूमि-छवि स्निपेट पीढ़ी
- 03
- HTML img स्रोत डेटा URI आउटपुट
- 04
- त्वरित बेस64 डिकोडिंग
