पृष्ठ पर आलेखीय तत्वों के लिए सर्वर पर किए गए HTTP अनुरोधों को कम करने के लिए sprites का मुख्य उद्देश्य है? या आप संभव के रूप में स्प्राइट के लिए कई तत्वों को आजमा सकते हैं और फिट करना चाहते हैं।एक सीएसएस स्प्राइट कब बड़ा होता है?
मुझे लगता है कि मैं क्या पूछ रहा हूं: स्प्राइट कब बड़ा होता है?
यह बहुत बड़ा है जब उपयोगकर्ता को पृष्ठ का उपयोग करने से पहले डाउनलोड करने के लिए फ़ाइल का इंतजार करना पड़ता है।
आप सभी छोटी स्थिर डिजाइन तत्वों को बड़ी समस्याओं के बिना एक मास्टर छवि में पैक कर सकते हैं।
बेशक, यदि आपके पास अपनी वेबसाइट पर 10 मेगापिक्सेल फोटो हैं, तो उन्हें एक साथ पैक करना पागलपन होगा।
हां मुख्य उद्देश्य अनुरोधों को कम करना है (और समय लोड करने के लिए)। एक और फायदा यह है कि आपको केवल एक छवि को कैश करने के लिए सही ढंग से चिंता करने की ज़रूरत है। युक्ति: पीएनजी छवियों का उपयोग करें क्योंकि उनके संपीड़न बड़े सफेद ("खाली") क्षेत्रों को सर्वोत्तम तरीके से संभालते हैं।
क्या पृष्ठ पर आलेखीय तत्वों के लिए सर्वर पर किए गए HTTP अनुरोधों को कम करने के लिए sprites का मुख्य उद्देश्य है?
हां, आप छोटी छवियों के लिए कई अनुरोधों से बचना चाहते हैं। उन्हें एक स्प्राइट में मिलाकर उन्हें एक http अनुरोध में लाया जा सकता है।
स्प्राइट बहुत बड़ा कब होता है?
यह वास्तव में उन सभी अनुरोधों का कुल है जिन्हें आप देखना चाहते हैं। स्प्राइट के लिए एकमात्र तरीका बहुत बड़ा होना है यदि उसके हिस्सों का योग (जो कि है) के साथ शुरू करने के लिए बहुत बड़ा है।
एक सीएसएस स्प्राइट बहुत बड़ा है जब आप कुछ भी शामिल हैं लेकिन आवश्यक UI तत्व हैं। ये छोटी पूरक छवियां हैं जैसे आइकन और लोगो जहां संपीड़न गुणवत्ता को बहुत अधिक नुकसान नहीं पहुंचाता है। चूंकि उन सभी छवियों को अन्यथा स्वतंत्र रूप से लोड किया गया होगा, इसलिए आप अलग-अलग अनुरोध करने से भी बदतर नहीं हैं। यदि लोड करने में बहुत अधिक समय लग रहा है, तो आपकी समस्या sprites के साथ भरोसा नहीं करती है, लेकिन आपकी छवियों को ठीक से संपीड़ित करने में।
Google मानचित्र [256x256] px छवियों का उपयोग करता है।
स्प्राइट के बारे में, आप निश्चित रूप से बाहर स्मृति के उपयोग पर चर्चा इस ब्लॉग पोस्ट के नीचे की जाँच करनी चाहिए भी: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
मेरी सलाह:
यदि आप स्प्राइट छवि प्रकार के लिए पीएनजी का उपयोग कर रहे हैं तो यह याद रखना उपयोगी है कि प्रत्येक पंक्ति आम तौर पर अन्य पंक्तियों से स्वतंत्र रूप से संपीड़ित (डिफ्लेटेड) होती है।
इसलिए स्प्राइट्स/छवि आकार की संख्या के संतुलन में मदद के लिए, संपीड़न का लाभ उठाने के लिए लंबवत के बजाय क्षैतिज रूप से एक दूसरे के बगल में समान स्प्राइट फिट करने का प्रयास करें।
पीएनजी "भविष्यवाणियों" का भी समर्थन करता है जो केवल पूर्वानुमानित मूल्य (पिछली पंक्तियों और पिछली पंक्ति में पिछले पिक्सेल के आधार पर) और वास्तविक मूल्य के बीच डेल्टा स्टोर करते हैं।
एक अच्छा छवि संपादक खोजें जो आपको अपनी छवि के लिए सर्वोत्तम सेटिंग खोजने के लिए अलग-अलग पीएनजी पूर्वानुमानकर्ता संपीड़न सेटिंग्स (या स्वचालित रूप से अनुकूलित) सेट करने की अनुमति देता है।
"एक अच्छी छवि संपादक खोजें जो आपको अपनी छवि के लिए सबसे अच्छी सेटिंग खोजने के लिए अलग-अलग पीएनजी पूर्वानुमानकर्ता संपीड़न सेटिंग्स (या स्वचालित रूप से अनुकूलित) सेट करने की अनुमति देता है।" अभ्यास में इसका अर्थ है फ़ोटोशॉप में वेब के लिए सहेजें। – Wolfr
'pngcrush' एक लायक है - मैंने इसे फ़ोटोशॉप के सेव फॉर वेब कमांड के साथ सहेजे गए पीएनजी के फ़ाइल आकार को कम किया है। यह समस्या को क्रूर-बल देता है, विभिन्न संपीड़न सेटिंग्स की कोशिश कर रहा है, और यह देखने के लिए कि सबसे छोटी फ़ाइल में कौन सा परिणाम है। जब आप वेब के लिए पीएनजी सहेजते हैं तो मैक पर एकर्न स्वचालित रूप से pngcrush का उपयोग करता है। –
ओएस एक्स पर त्वरित, बुलेटप्रूफ पीएनजी संपीड़न के लिए, ImageOptim देखें: http://imageoptim.com/ –
यदि आपकी साइट पर प्रत्येक पृष्ठ पर एक स्थिर तत्व के रूप में 10 मेगापिक्सेल फ़ोटो हैं, तो वह पागलपन है। –
क्या होगा यदि यह एक फोटोग्राफर होम पेज है जो काम के नमूने के साथ है? – User
@ मस्टरमाइंड: अगर मैं फोटोग्राफर था, तो भी मैं वेबसाइट के लिए छोटी छवियां बनाउंगा, अलग-अलग, स्पष्ट डाउनलोड के लिए पूर्ण-रीज़ छवियों को आरक्षित कर दूंगा। लेकिन यह सिर्फ मुझे है .... – RolandTumble