तो मैं फायरबग के साथ फेसबुक एचटीएमएल देख रहा था, और मैंने इस image पर पीछा किया और इस निष्कर्ष पर पहुंचा कि फेसबुक अपने ग्राफिकल तत्वों के लिए कई छोटे लोगों की बजाय इस बड़ी छवि (मुश्किल छवि स्थिति कोड के साथ) का उपयोग करता है। क्या यह कई छोटी छवियों को संग्रहित करने से अधिक कुशल है?कई छोटी छवियों की बजाय एक बड़ी छवि कितनी अधिक कुशल है। फेसबुक स्टाइल
किसी को क्यों फेसबुक इस करना होगा के बारे में कोई सुराग दे सकता है।
इन्हें सीएसएस स्प्राइट कहा जाता है, और हाँ, वे अधिक कुशल हैं - उपयोगकर्ता को केवल एक फ़ाइल डाउनलोड करनी है, जो पृष्ठ को लोड करने के लिए HTTP अनुरोधों की संख्या को कम कर देता है। अधिक जानकारी के लिए this page देखें।
इसके पीछे सिद्धांत यहां समझाया गया है: http://css-tricks.com/css-sprites/, here भी देखें, क्योंकि यह रेखांकित करता है कि आपको वास्तव में एक बड़ी छवि क्यों चाहिए। मैं यह भी कहता हूं कि सभी लेख दिलचस्प हैं :)
developer.yahoo.com का लिंक उत्कृष्ट है। अच्छे लिंक –
+1 मैंने स्वयं को अपनी छवि sprites को रखरखाव के लिए कई फ़ाइलों में विभाजित किया। – Matt
सरल उत्तर, आपको केवल एक छवि फ़ाइल 'लाने' है और यह अलग-अलग विचारों के लिए 'कट' है, यदि आपने एकाधिक छवियों का उपयोग किया है जो आपको कई फाइलें होंगी डाउनलोड करने की आवश्यकता होगी, जो बस सबकुछ डाउनलोड करने के लिए अतिरिक्त समय में समान होगा।
बड़ी छवि को 'स्प्राइट्स' में काटना एक HTTP अनुरोध बनाता है और 'ऑनमोउसओवर' तत्वों के साथ कोई फ्लिकर दृष्टिकोण प्रदान नहीं करता है (यदि आप प्रभाव के लिए माउस के लिए एक ही बड़ी छवि का पुन: उपयोग करते हैं)।
खुले कनेक्शन केवल स्थानांतरण जारी रखने से अधिक महंगा है। इसी तरह, ब्राउज़र को केवल सैकड़ों की बजाय एक फ़ाइल को कैश करने की आवश्यकता होती है।
गूगल ने भी यह होता है - मैं यहाँ उस पर एक ब्लॉग पोस्ट में लिखा है: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
लेकिन यह का सार है कि आप एक बड़ी छवि के बजाय 20 छोटे HTTP अनुरोध के लिए एक एकल http अनुरोध करते हैं।
यदि आप http अनुरोध देखते हैं, तो वे वास्तव में डाउनलोड करने से डाउनलोड करने के लिए अधिक समय व्यतीत करते हैं, इसलिए यह एक हिट-चंकी में ऐसा करने के लिए बहुत तेज़ है, चैट नहीं!
के बाद से अन्य उपयोगकर्ताओं को इस पहले से ही, here's how to do it, और another way is here.
तकनीक करार दिया है "CSS स्प्राइट" जवाब दे दिया है।
देखें:
CSS स्प्राइट tecnique का उपयोग कर छवि अनुरोधों की संख्या को कम करने के लिए एक विधि है पृष्ठभूमि सकारात्मक एन। Best Practices for Speeding Up Your Web Site
CSS स्प्राइट का बड़ा लाभ यह है कि यह लगभग 0 सर्वर भूमि के ऊपर जोड़ सकते हैं और सभी गणना की ग्राहक के पक्ष है। कोई सर्वर साइड प्रदर्शन हिट करने के लिए एक बड़ा लाभ मारा।
समर्थक प्रदर्शन दृष्टिकोण के साथ समस्या यह है कि यह हमेशा "क्यों" (प्रदर्शन) प्रस्तुत करता है, अक्सर "कैसे" के बिना, और कभी नहीं "क्यों नहीं"।
सीएसएस स्प्राइट्स प्रदर्शन पर सकारात्मक प्रभाव डालता है, क्योंकि अन्य पोस्टर यहां विस्तार से बढ़ गए हैं। हालांकि, उनके पास नकारात्मकता है: रखरखाव; छवियों को हटाने, बदलने और विशेष रूप से आकार देने वाली छवियां अधिक कठिन हो जाती हैं - अधिकांशतः परिवर्तन की वजह से पृष्ठभूमि-स्थिति-रिडल्ड स्टाइलशीट में स्प्राइट के आकार में या नक्शे के आकार में प्रत्येक परिवर्तन के साथ-साथ बदलाव की आवश्यकता होती है।
मुझे लगता है कि यह अल्पसंख्यक दृष्टिकोण है, लेकिन मुझे दृढ़ विश्वास है कि रखरखाव की चिंताओं को अधिकांश मामलों में प्रदर्शन चिंताओं से अधिक होना चाहिए। यदि प्रदर्शन आवश्यक है, तो आगे बढ़ें, लेकिन लागत से अवगत रहें।
कहा कि, प्रदर्शन प्रभाव बड़े पैमाने पर है - विशेष रूप से जब आप रोलओवर का उपयोग कर रहे और उस प्रभाव के लिए जब आप एक छवि अपना माउस ले आपको मिल से बचना चाहते हैं तो ब्राउज़र रोलओवर अनुरोध करने के लिए चला जाता है। एक बार आपकी आवश्यकताओं के निपटारे के बाद आपकी छवियों को एक स्प्राइट मानचित्र में दोबारा लगाने के लिए उपयुक्त है - खासकर यदि आपकी साइट भारी यातायात के तहत जा रही है (और निश्चित रूप से बड़े उदाहरण लोग बाहर खींच रहे हैं - फेसबुक, अमेज़ॅन, याहू - सभी उस प्रोफाइल को फिट करते हैं)।
कुछ ऐसे मामले हैं जहां आप मूल रूप से बिना किसी लागत के उनका उपयोग कर सकते हैं। जब भी आप एक छवि का टुकड़ा कर रहे हों, एक छवि और पृष्ठभूमि-स्थिति टैग का उपयोग करना शायद सस्ता है। किसी भी समय आपको आइकन का मानक सेट मिल गया है - खासकर यदि वे समान आकार के हैं और बदलने की संभावना नहीं है। इसके अलावा, ज़ाहिर है, जब भी प्रदर्शन वास्तव में मायने रखता है, और आपके पास रखरखाव को कवर करने के लिए बजट मिल गया है।
यदि संभव हो, तो एक उपकरण का उपयोग करें और इसका उपयोग करें ताकि आपके स्प्राइट्स को बनाए रखना पड़े। http://csssprites.org/ एकमात्र ऐसा टूल है जिसे मैंने किसी भी विवरण में देखा है, लेकिन http://spriteme.org/ गंभीरता से शानदार दिखता है।
के लिए +1 – vsync
आप मैन्युअल रूप से एक स्प्राइट नक्शा क्यों बनायेंगे? वैसे भी, मान लें कि आपने किया था। सब कुछ पुनर्व्यवस्थित करने के बजाय, तस्वीर के किनारे पर अपनी नई चीजें जोड़ें ताकि कोई माप प्रभावित न हो। –
@Nerdling: क्योंकि यहां से जुड़े प्रत्येक लेख के बारे में लोगों ने आपको यहां बताया है? वैसे भी, यह स्प्राइट नक्शा कम है, और अधिक पृष्ठभूमि-स्थिति टैग जो बनाए रखने के लिए दर्द हैं। निश्चित रूप से, किनारे पर नई सामग्री जोड़ें, लेकिन क्या होता है जब क्लाइंट एक बटन चाहता है जो मानचित्र के मध्य में बड़ा हो जाए? –
यह कई साल पहले, से पुरानी विधि है जब कंप्यूटर गेम डेवलपर्स ने छवि स्प्राइट्स बनाए थे। फेसबुक जैसी प्रमुख वेबसाइट के लिए यह वास्तव में प्रदर्शन समस्याओं के लिए बहुत बचाता है। भी, सभी ग्राफिक्स एक बार में दिखाए जाते हैं, और एक के बाद एक नहीं (लोड अनुक्रम) – vsync