वेब अनुप्रयोगों में सीएसएस स्प्राइट्स का उपयोग करने के क्या फायदे हैं?

Question

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

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

अद्यतन: आपके प्रतिक्रियाओं के लिए धन्यवाद। वे स्पष्ट रूप से सभी बिंदुओं को सावधानीपूर्वक सोचते हैं और आपके अंक सत्यापित करने के लिए अच्छे स्रोत प्रस्तुत करते हैं। मैं अब अपनी साइट डिज़ाइन में सीएसएस स्प्राइट्स का उपयोग करने के बारे में एक सूचित निर्णय लेने में सक्षम हूं।

Answer 1

सवाल आम तौर पर बैंडविड्थ की राशि यह बचत हो सकती है के बारे में नहीं है। यह वेबपृष्ठ प्रस्तुत करने के लिए आवश्यक HTTP अनुरोधों की संख्या को कम करने के बारे में अधिक है।

को ध्यान में रखते:

• वेब ब्राउज़र केवल एक HTTP अनुरोध कर समानांतर
• में कुछ HTTP अनुरोध करना हमारे पास सर्वर, जो समय
• के बहुत लेता है के लिए एक राउंड ट्रिप का अर्थ है "तेज "इंटरनेट कनेक्शन, जिसका मतलब है कि हम तेजी से डाउनलोड करते हैं ...

छोटी सामग्री प्राप्त करने के लिए बहुत से अनुरोध करते समय (छवियों, आइकन, और जैसे) सर्वर के लिए कई राउंड-ट्रिप हैं: आप डेटा डाउनलोड करने के लिए इस समय का उपयोग करने के बजाय, अनुरोध करने के लिए प्रतीक्षा समय का इंतजार कर रहे हैं, और जवाब देने के लिए सर्वर समाप्त करते हैं।

हम अनुरोधों की संख्या को कम कर सकते हैं, तो हम सर्वर के दौरे की संख्या को कम, और हमारे hight गति कनेक्शन का उपयोग बेहतर (हम बजाय कई छोटे लोगों के लिए इंतजार कर के, एक बड़ा फ़ाइल डाउनलोड)।

यही कारण है कि सीएसएस स्प्राइट्स का उपयोग किया जाता है।

अधिक जानकारियां के लिए, आप पर एक नज़र, उदाहरण के लिए हो सकता है: CSS Sprites: Image Slicing’s Kiss of Death

Answer 2

कम http अनुरोध = तेजी से लोडिंग समग्र। याहू और सह। इस तकनीक का उपयोग करें, यदि आप कल्पना कर सकते हैं कि उनके पास कितने उपयोगकर्ताओं की संख्या है, तो यह बैंडविड्थ के लॉट बचाता है। आइकन के लिए 50 अलग-अलग छवियों की कल्पना करें, यह 50 अलग-अलग http अनुरोध हैं, क्योंकि केवल एक सीएसएस स्प्राइट है जिसमें सभी छवियां हैं, जो 49 http अनुरोधों को सहेज लेती हैं और साइट के सभी उपयोगकर्ताओं को गुणा करती हैं।

Answer 3

असल में, स्प्राइट्स का उपयोग प्रेषित डेटा की मात्रा को कम करने के लिए नहीं किया जाता है (ज्यादातर मामलों में यह स्थानांतरित डेटा की मात्रा को थोड़ा बढ़ाता है), लेकिन सर्वर पर किए गए अनुरोधों की मात्रा को कम करने के लिए।

ब्राउज़र पर HTTP अनुरोध पारंपरिक रूप से अनुक्रम में किए जाते हैं। जिसका अर्थ यह है कि एक अनुरोध तब तक शुरू नहीं होगा जब तक कि पिछले एक पूरा नहीं हो जाता है। साथ ही, अनुरोध करने के लिए कनेक्शन खोलना महंगा है। सर्वर पर किए गए अनुरोधों की मात्रा सीमित करके, आप तत्वों को लोड करने की गति को बढ़ा रहे हैं।

Answer 4

अनुरोधों की मात्रा सीमित करके समग्र पृष्ठ लोड के प्रदर्शन में वृद्धि के अलावा, छवि स्प्राइट्स गतिशील रूप से छवियों को स्वैप कर सकते हैं (उदाहरण के लिए होवर पर एक एनवी आइटम की पृष्ठभूमि छवि को बदलना) सभी के बाद थोड़ा बेहतर प्रदर्शन करें आप src के बजाय x, y को बदलते हैं।

तो मुझे लगता है कि उनका उपयोग करके वारंट के लिए सीमा क्या है, मैं प्रत्येक व्यक्तिगत ग्राहक पर संभावित लोडिंग सुधारों के कारण तुरंत कहूंगा।

Answer 5

मुझे लगता है कि याहू के पास सीएसएस स्प्राइट्स के लिए सबसे अच्छा तर्क है। इसके अलावा, पूरे पृष्ठ के लायक पढ़ने है:

http://developer.yahoo.com/performance/rules.html#num_http

Answer 6

HTTP अनुरोध को कम करने (पहले से ही नोट) के अलावा, CSS स्प्राइट जावास्क्रिप्ट पर निर्भर नहीं हैं। यह कुछ अन्य लाभ होते हैं:

• कम कोड बनाए रखने के लिए
• आसान पार ब्राउज़र का परीक्षण
• style के माध्यम से इनलाइन कोडित किया जा सकता है विशेषताओं का
• कोई डोम हैकिंग
• कोई छवि पहले से लोड होने (ताकि कम प्रशासक - "ओह रुको, मुझे उस नए नेविगेशन बटन को प्रीलोड करना होगा ... बकवास जो .js फ़ाइल में मेरा प्रीलोडर है?")
• आप कई चयनकर्ताओं को इसे लागू करने के लिए सीएसएस कक्षाओं का उपयोग कर सकते हैं
• :hover pseudoclass के साथ किसी भी चयनकर्ता के लिए लागू किया जा सकता है, या किसी चयनकर्ता कि एक लंगर के साथ लिपटे जा सकता है (न सिर्फ img रों)

आप हैकिंग डोम के खिलाफ नहीं हैं, तो में, हालांकि, आप कर सकते हैं एक्स और वाई मानों को दबाकर बस कुछ निफ्टी एनीमेशन प्रभाव प्राप्त करें। जो कई अलग-अलग राज्यों को एनिमेट करना आसान बनाता है (जैसे keypress या onmouseclick)।

में कुछ दिलचस्प ग्राफिक उत्पादन पक्ष के रूप में अच्छी प्रभाव हैं:

• कम ग्राफिक उत्पादन फ़ाइलों
• बटन आदि को सीधे HTML में के लिए लेआउट (PSD comps के लिए कम जरूरत)
• करना आसान ग्राफिक्स के एक टन को पुन: उत्पन्न करने के बिना जीयूआई परिवर्तन करना आसान है
• छवि ग्राफिक्स के लिए बस इतना मुश्किल है कि आप अपने ग्राफिक्स को फिसलने के लिए