सीएसएस-स्प्राइट अच्छी तकनीक है? मैंने अपने पेशेवरों के बारे में http://spriteme.org/ पर पढ़ा है और मैंने स्टैक ओवरफ्लो में सीएसएस स्प्राइट्स के बारे में बहुत सारे प्रश्न भी देखे हैं।क्या सीएसएस-स्प्राइट एक अच्छी तकनीक है?
इसके विपक्ष क्या हैं?
क्या यह उनकी साइट पर दावा किए गए सभी ब्राउज़रों में काम करेगा?
हां, यह एक अच्छी तकनीक है।
आप HTTP अनुरोधों की संख्या को कम कर सकते हैं और यह एक पृष्ठ अनुकूलन तकनीक है।
पहला नियम
मेंBest Practices for Speeding Websites by Yahoo
कम से कम HTTP अनुरोध अंत उपयोगकर्ता प्रतिक्रिया समय की
80% सामने के अंत पर खर्च किया जाता है। इस अधिकांश समय सभी पेज में घटकों को डाउनलोड करने में बंधा हुआ है: बदले में छवियों, स्टाइलशीट, लिपियों, फ्लैश, आदि घटकों की संख्या को कम करना पेज रेंडर करने के लिए आवश्यक HTTP अनुरोधों की संख्या कम कर देता है । यह तेज़ पृष्ठों की कुंजी है।
CSS स्प्राइट छवि अनुरोधों की संख्या को कम करने के लिए पसंदीदा तरीका हैं। अपनी पृष्ठभूमि छवियों को एक ही छवि में संयोजित करें और सीएसएस पृष्ठभूमि-छवि और पृष्ठभूमि-स्थिति गुण इच्छित छवि खंड प्रदर्शित करें।
पृष्ठ में घटकों की संख्या को कम करने का एक तरीका पृष्ठ के डिज़ाइन को सरल बनाना है। लेकिन समृद्ध सामग्री के साथ पृष्ठों को बनाने के लिए बार तेजी से प्राप्त करने का कोई तरीका है? यहां के लिए कुछ तकनीकों हैं जो HTTP अनुरोधों की संख्या को कम करते हैं, जबकि अभी भी समृद्ध पृष्ठ डिज़ाइन का समर्थन करते हैं।
जब आपको स्प्राइट के अंदर छवियों के आयामों को बदलने की आवश्यकता है तो आपको छवियों के लिए ऑफ़सेट को फिर से समझना होगा। लेकिन मुझे नहीं लगता कि यह एक बड़ा बोझ है।
यह लगभग सभी आधुनिक ब्राउज़रों द्वारा समर्थित है।
यह भी CSS स्प्राइट पर एक अच्छा लेख
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
यह एक महान तकनीक है, लेकिन आपको वास्तविक सावधान रहना होगा कि आप इसे कैसे करते हैं ताकि यह प्रत्येक ब्राउज़र में सही तरीके से काम कर सके।
यह किया जा सकता है और यह एक अच्छा अनुकूलन युक्ति है, लेकिन हमेशा के रूप में, यह ध्यान दें कि यह आईई, फ़ायरफ़ॉक्स और क्रोम में यह कैसे काम करता है।
विपक्ष यह है कि इसे हमेशा उपयोग नहीं किया जा सकता है, और आपको क्रॉस ब्राउज़र सीएसएस समर्थन के लिए कम से कम आम denominator के साथ रहना होगा।
ठीक से किया जाए, यह सभी ब्राउज़रों (यहां तक कि IE6) में ठीक काम करना चाहिए है।
सबसे बड़ी बात यह है कि मैं सोच सकता हूं कि यदि आपके पास एक स्प्राइट में बहुत अधिक छवियां हैं, और उनमें से केवल एक के लिए आयामों को बदलने की आवश्यकता है, तो इससे आपको बहुत सी सीएसएस बदलनी पड़ सकती है (क्योंकि अन्य छवियों के लिए ऑफ़सेट शायद भी बदल जाएंगे)
हाँ इसे बनाए रखना कठिन है। ऐसी चीज के लिए जो बहुत अच्छा नहीं बदलता है। – Dor1000
यह आईई 6 सफारी ओपेरा 8+ और एफएफ 2 + के लिए काम करता है। आप इस पढ़ना चाहिए:
यह बताते हैं कि कैसे GIF (और अन्य छवि फ़ाइलें) संकुचित कर रहे हैं। उदाहरण के लिए "कॉलम" के बजाय "पंक्तियों" में एक ही डेटा प्रदर्शित करने से अंतरिक्ष उपयोग नाटकीय रूप से कम हो जाता है।
इसके अलावा आप सभी छवियों को प्रीलोड करते हैं और यदि आप छवियों को स्वैप करते हैं तो कोई देरी नहीं होती है।
एक और प्लस यह है कि आप एक "लाल" डिज़ाइन के लिए एक स्प्राइट का उपयोग कर सकते हैं और एक "नीला" डिज़ाइन के लिए एक और स्प्राइट का उपयोग कर सकते हैं।
ब्राउज़रों के अधिकांश छवि स्प्राइट कैश:
हालांकि एक नुकसान है। तो जब आप स्प्राइट को अपडेट करने की बात आती है तो आप परेशानी में पड़ सकते हैं।
कैशिंग किसी भी छवि के साथ एक समस्या होगी और न केवल छवि sprites। – rahul
आप उस कैशिंग समस्या को हराने के लिए फ़ाइल नाम (संस्करण?) बदल सकते हैं। – StingyJack
लेकिन कुछ ब्राउज़र छवियों के भीतर रीफ्रेश पर पुनः लोड किया गया है लेकिन बैकब्राउंड छवियां नहीं हैं। इस पर उतरने का एक आसान तरीका url (my_sprite.png? V1) का उपयोग कर रहा है। इसलिए आपको फ़ाइल का नाम बदलने की आवश्यकता नहीं है और ब्राउज़र को इसे पुनः लोड करने के लिए मजबूर होना पड़ता है। – jantimon
एक नकारात्मक पक्ष यह है मैं आई है कि CSS स्प्राइट, कई ब्राउज़रों
में ठीक से मुद्रित करने के लिए नहीं है, क्योंकि यह http अनुरोध के बहुत बचत होती है, कि बहुत अपनी वेबसाइट लोड हो रहा है समय के लिए महत्वपूर्ण है।
बाहर की जाँच करें यह पेज:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
यह एक महान विवरण और सब कुछ आप सीएसएस स्प्राइट के बारे में पता करने की जरूरत है।
मैं एक प्रश्न जोड़ना चाहता हूं: क्या इसे कार्यान्वित करना और रखरखाव के बारे में कैसे करना मुश्किल है? – Natrium
सामान्य छवियों की तुलना में कार्यान्वयन और रखरखाव कठिन होगा क्योंकि आपको ऑफसेट को मैन्युअल रूप से गणना करना होगा। लेकिन मुझे लगता है कि इसे मैन्युअल रूप से करने के ऊपरी हिस्से को कम करने के लिए सीएसएस स्प्राइट जेनरेटर हैं। – rahul