डेटा यूआरआई का उद्देश्य क्या है?

Question

नियमित यूआरआई का उपयोग करने के बजाए संसाधनों को कभी-कभी डेटा यूआरआई में क्यों एम्बेड किया जाता है जो किसी सर्वर पर फ़ाइल के रूप में संग्रहीत संसाधन से लिंक होता है?

Answer 1

1. सर्वर को कम करने का अनुरोध करता है

डाटा यूआरआई, सर्वर लोड कम होती है और ग्राहक के प्रदर्शन में सुधार करने के लिए HTTP संसाधन प्राप्त करने के लिए आवश्यक अनुरोधों की संख्या को कम करने के द्वारा प्रयोग किया जा सकता है। उदाहरण के लिए, इस HTML:

<img src="assets/bullet.png"> 

... इस के साथ प्रतिस्थापित किया जा सकता है:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
> 

... इस तरह एक छवि का निर्माण करने के: एक कम के साथ HTTP अनुरोध।

नोट: स्टैक ओवरफ़्लो पोस्ट में डेटा यूआरआई छवियों को एम्बेड करना असंभव प्रतीत होता है; हालांकि, उपरोक्त छवि को दिखाए गए डेटा यूआरआई का उपयोग कर एक छवि होस्टिंग सेवा पर अपलोड किया गया था।

हैं, उदाहरण के लिए, अपनी साइट कई छोटे प्रतीक का उपयोग करता है, उन सब को एक स्टाइलशीट में डेटा यूआरआई के रूप में निर्दिष्ट:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */ 

... HTTP अनुरोध की एक बड़ी संख्या, समग्र की कीमत पर समाप्त कर सकते हैं डाउनलोड आकार, सुगमता, और बढ़ती संभावना है कि एक खराब संपादन यूआरआई बकवास (और ठीक करने में मुश्किल) प्रस्तुत कर सकता है।

छवियों के लिए एक ही परिणाम प्राप्त करने का एक वैकल्पिक तरीका CSS sprites का उपयोग है।

2. एक एकल फाइल

एक डेटा यूआरआई संसाधनों को सही ढंग से एक ही दस्तावेज़ में एक पृष्ठ प्रदर्शित करने के लिए आवश्यक के सभी शामिल करने के लिए इस्तेमाल किया जा सकता में सामग्री को एम्बेड। यह उदाहरण में उपयोगी हो सकता है सॉफ्टवेयर के एक टुकड़े के साथ वितरित एक README फ़ाइल। सिद्धांत रूप में, डेटा यूआरआई का उपयोग HTML ईमेल में संसाधनों को एम्बेड करने के लिए अनुलग्नकों के उपयोग के विकल्प के रूप में भी किया जा सकता है, लेकिन व्यावहारिक रूप से डेटा यूआरआई के लिए क्लाइंट समर्थन too unreliable है, यह एक उपयोगी तकनीक है।

3. बचना ब्राउज़र चेतावनियां

कुछ ब्राउज़र एक चेतावनी प्रदर्शित एक पृष्ठ की सामग्री HTTP और HTTPS का एक मिश्रण पर सर्व है या नहीं। यदि आपका सर्वर सेट अप किया गया है ताकि छवियों की तरह स्थिर सामग्री आम तौर पर HTTP पर परोसा जाता है, लेकिन एचटीटीपीएस पर गतिशील सामग्री परोसा जाता है, यह आंकड़े कि यूआरआई डेटा के साथ स्थिर सामग्री एक संभावित कामकाज है।

Answer 2

पिछले उत्तर के अलावा (जो एक बहुत अच्छा सारांश है), एक बात जो मैं हाल ही में इसका उपयोग कर रहा हूं वह फोंट है। अगर मुझे फ़ॉन्ट से अक्षरों के एक छोटे से सबसेट का उपयोग करने की आवश्यकता है (कहें, लोगो के लिए डिज़ाइन-वाई फ़ॉन्ट, या एक विशेष डिंगबैट बुलेट आइकन), तो मैं केवल उन अक्षरों को एन्कोड कर सकता हूं जिन्हें मुझे एक सीएसएस @ फ़ॉन्ट-फेस घोषणा में चाहिए और उपयोगकर्ता को संपूर्ण फ़ॉन्ट फ़ाइल डाउनलोड नहीं करने दें।

उदाहरण के लिए, अगर मैं केवल शैतान (घ) और दूत (ई) चाहते Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB) से सामना कर रहा है, तो मैं कुछ इस तरह बनाने के लिए FontSquirrel के webfont जनरेटर उपकरण (http://www.fontsquirrel.com/tools/webfont-generator) का उपयोग कर सकते हैं:

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

उदाहरण के लिए यह पहेली देखें: http://jsfiddle.net/vuuVh/