किसी चित्र को एम्बेड करने से उसके बाइट्स HTML, CSS या किसी अन्य दस्तावेज़ के अंदर आ जाते हैं। यह एक छोटी कलाकृति को स्व-निहित बना सकता है, लेकिन यह छवि को उस दस्तावेज़ की डिलीवरी और कैशिंग से भी जोड़ता है। यह मानने के बजाय कि कम यूआरएल का मतलब हमेशा तेज़ पेज होता है, संपूर्ण वर्कफ़्लो के आधार पर निर्णय लें।
सही रैपर बनाएं
एक PNG छवि डेटा URI से शुरू होता है data:image/png;base64,, इसके बाद मूल फ़ाइल का Base64 प्रतिनिधित्व होगा। एक JPEG की आवश्यकता है image/jpeg; WebP आवश्यकताएँ image/webp. MIME प्रकार का नाम बदलने से बाइट्स परिवर्तित नहीं होते हैं। यदि रिसीवर को JPEG की आवश्यकता है, तो उसका डेटा URI बनाने से पहले छवि को फिर से एनकोड करें।
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">उपरोक्त प्लेसहोल्डर कोई कार्यशील छवि नहीं है; इसे एन्कोडर के पूर्ण आउटपुट से बदलें। यदि आउटपुट में पहले से ही शामिल है data: उपसर्ग, दूसरा न जोड़ें. आसपास के उद्धरण चिह्नों को संतुलित रखें और रिच-टेक्स्ट संपादकों द्वारा शुरू किए गए लाइन ब्रेक से बचें।
वास्तविक आकार की गणना करें
एन्कोडेड भाग को प्रत्येक तीन इनपुट बाइट्स के लिए चार वर्णों की आवश्यकता होती है, जिन्हें पूर्ण समूहों में गोल किया जाता है। डेटा URI उपसर्ग थोड़ा और जोड़ता है। 30,000-बाइट फ़ाइल के लिए, अकेले पेलोड 40,000 वर्ण है। HTML संपीड़न स्थानांतरित आकार को बदल सकता है, लेकिन ब्राउज़र को अभी भी दस्तावेज़ को पार्स करने और छवि को डीकोड करने की आवश्यकता है। वास्तविक पृष्ठ को मापें, न कि केवल स्रोत फ़ाइल को।
एक अलग से प्रस्तुत छवि को कैश किया जा सकता है और सभी पृष्ठों पर स्वतंत्र रूप से पुन: उपयोग किया जा सकता है। इसमें शामिल प्रत्येक दस्तावेज़ से एक एम्बेडेड छवि जुड़ी हुई है। इसलिए बड़े दोहराए गए चित्र स्वचालित इनलाइनिंग के लिए ख़राब उम्मीदवार हैं। एक स्व-निहित रिपोर्ट में छोटे-छोटे एकल चिह्न एक उचित समझौता हो सकते हैं।
गंतव्य की जाँच करें
सामग्री सुरक्षा नीति प्रतिबंधित कर सकती है data: छवियाँ। ईमेल क्लाइंट एम्बेडेड सामग्री को हटा या अस्वीकार कर सकते हैं। आपके ब्राउज़र में पूर्वावलोकन करने वाली फ़ाइल यह साबित नहीं करती है कि प्राप्तकर्ता का एप्लिकेशन इसे प्रदर्शित करेगा। सटीक निर्यात, ईमेल क्लाइंट या डाउनस्ट्रीम सिस्टम का परीक्षण करें जिसका आपको समर्थन करने की आवश्यकता है।
अस्थायी स्थानीय पूर्वावलोकन के लिए, एक ब्लॉब URL अक्सर एक बड़ी Base64 स्ट्रिंग बनाने से बचता है। URL का दृश्य हटा दिए जाने पर उसे निरस्त करें। निर्यातित स्टैंडअलोन HTML के लिए, एक डेटा URI उपयुक्त हो सकता है। किसी भी स्थिति में वैकल्पिक पाठ और आयाम सुरक्षित रखें। सिंटैक्स और ब्राउज़र संबंधी विचार इसमें शामिल हैं एमडीएन: डेटा यूआरएल.