2012-11-17 7 views
10

अपनी वेबसाइट के लिए इस स्थिति पर विचार करें:स्प्राइट छवियों के बजाय डेटा यूआरआई का उपयोग करने में क्या कमी है?

  • मैं IE8 का समर्थन नहीं करते और नीचे तो ब्राउज़र समर्थन एक समस्या नहीं है।

  • मैं जीजीआईपी का भी उपयोग करता हूं जो सीएसएस में डेटा अधिभार से बचने के मामले में होगा Iमेरी सीएसएस फ़ाइल में डेटा यूआरआई छवियों को कॉपी और पेस्ट करें।

  • मेरे पास केवल एक सीएसएस फ़ाइल है जो कम से कम उत्पन्न होती है।

  • इसे आसान बनाने के लिए, मैं प्रत्येक छवि डेटा यूआरआई के लिए कम चर का उपयोग करता हूं।

  • मैं एक अलग कम फ़ाइल में छवियों चर डाल मेरी codebase स्वच्छ

यह सब के साथ रखने के लिए मैं अभी भी यकीन नहीं है अगर यह लोड हो रहा है छवियों के लिए सबसे अच्छा तरीका है। इस दृष्टिकोण के साथ छोटी छवियों को लोड करने से HTTP अनुरोधों की संख्या कम हो जाती है और हमें स्प्राइट छवि को बनाए रखने की आवश्यकता नहीं होती है।

क्या इस दृष्टिकोण में कोई कमी है जिसके बारे में आप सोच सकते हैं?

+0

हम्म, चालाक। मुझें यह पसंद है। – tjameson

+1

कुछ मोबाइल डिवाइस/ब्राउज़र एक निश्चित आकार से अधिक फ़ाइलों को कैश नहीं करेंगे (मुझे लगता है कि आईफोन 24kb है?)। यदि आपके पास डेटा यूआरआई के परिणामस्वरूप बहुत बड़ी सीएसएस फ़ाइल है, तो आप वहां पैर में खुद को शूटिंग कर सकते हैं। – cimmanon

+0

@cimmanon मुझे विश्वास है कि 2012 के मामले में यह मामला नहीं है। [यह] जांचें (http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/) बाहर – Mohsen

उत्तर

2

यदि कोई छवि बदलती है, तो संपूर्ण सीएसएस फ़ाइल को बदलना होगा। यह HTTP कैश तोड़ता है। एक स्प्राइट छवि के साथ, सीएसएस फ़ाइल स्वयं कैश से परोसा जाएगा, और केवल बदली गई छवि को फिर से डाउनलोड करना होगा।

डेटा के लिए केवल एक सीएसएस फ़ाइल उत्पन्न करना बेहतर हो सकता है: यूआरआई छवियां, और नियमित सीएसएस सामान के लिए दूसरा। इस तरह, नियमित सीएसएस अपडेट को डेटा को फिर से डाउनलोड करने की आवश्यकता नहीं होती है: uri छवियां।

दूसरी समस्या अग्रभूमि छवियों के साथ है, जो HTML में <img> टैग के साथ परोसा जाता है। यदि यह अक्सर उपयोग की जाने वाली छवि है, तो यह अनावश्यक रूप से HTML के आकार को बढ़ाएगा।

+0

+1। मैं 'img' तत्व बनाने के लिए उन डेटा यूआरआई का उपयोग नहीं करता हूं – Mohsen

संबंधित मुद्दे