क्या सीएसएस-स्प्राइट एक अच्छी तकनीक है?

Question

1. सीएसएस-स्प्राइट अच्छी तकनीक है? मैंने अपने पेशेवरों के बारे में http://spriteme.org/ पर पढ़ा है और मैंने स्टैक ओवरफ्लो में सीएसएस स्प्राइट्स के बारे में बहुत सारे प्रश्न भी देखे हैं।

2. इसके विपक्ष क्या हैं?

3. क्या यह उनकी साइट पर दावा किए गए सभी ब्राउज़रों में काम करेगा?

Answer 1

हां, यह एक अच्छी तकनीक है।

आप 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

Answer 2

यह एक महान तकनीक है, लेकिन आपको वास्तविक सावधान रहना होगा कि आप इसे कैसे करते हैं ताकि यह प्रत्येक ब्राउज़र में सही तरीके से काम कर सके।

यह किया जा सकता है और यह एक अच्छा अनुकूलन युक्ति है, लेकिन हमेशा के रूप में, यह ध्यान दें कि यह आईई, फ़ायरफ़ॉक्स और क्रोम में यह कैसे काम करता है।

विपक्ष यह है कि इसे हमेशा उपयोग नहीं किया जा सकता है, और आपको क्रॉस ब्राउज़र सीएसएस समर्थन के लिए कम से कम आम denominator के साथ रहना होगा।

Answer 3

ठीक से किया जाए, यह सभी ब्राउज़रों (यहां तक ​​कि IE6) में ठीक काम करना चाहिए है।

सबसे बड़ी बात यह है कि मैं सोच सकता हूं कि यदि आपके पास एक स्प्राइट में बहुत अधिक छवियां हैं, और उनमें से केवल एक के लिए आयामों को बदलने की आवश्यकता है, तो इससे आपको बहुत सी सीएसएस बदलनी पड़ सकती है (क्योंकि अन्य छवियों के लिए ऑफ़सेट शायद भी बदल जाएंगे)

Answer 4

यह आईई 6 सफारी ओपेरा 8+ और एफएफ 2 + के लिए काम करता है। आप इस पढ़ना चाहिए:

Gif Compression

यह बताते हैं कि कैसे GIF (और अन्य छवि फ़ाइलें) संकुचित कर रहे हैं। उदाहरण के लिए "कॉलम" के बजाय "पंक्तियों" में एक ही डेटा प्रदर्शित करने से अंतरिक्ष उपयोग नाटकीय रूप से कम हो जाता है।

इसके अलावा आप सभी छवियों को प्रीलोड करते हैं और यदि आप छवियों को स्वैप करते हैं तो कोई देरी नहीं होती है।

एक और प्लस यह है कि आप एक "लाल" डिज़ाइन के लिए एक स्प्राइट का उपयोग कर सकते हैं और एक "नीला" डिज़ाइन के लिए एक और स्प्राइट का उपयोग कर सकते हैं।

ब्राउज़रों के अधिकांश छवि स्प्राइट कैश:

हालांकि एक नुकसान है। तो जब आप स्प्राइट को अपडेट करने की बात आती है तो आप परेशानी में पड़ सकते हैं।

Answer 5

एक नकारात्मक पक्ष यह है मैं आई है कि CSS स्प्राइट, कई ब्राउज़रों

Answer 6

बेशक

में ठीक से मुद्रित करने के लिए नहीं है, क्योंकि यह http अनुरोध के बहुत बचत होती है, कि बहुत अपनी वेबसाइट लोड हो रहा है समय के लिए महत्वपूर्ण है।

बाहर की जाँच करें यह पेज:

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

यह एक महान विवरण और सब कुछ आप सीएसएस स्प्राइट के बारे में पता करने की जरूरत है।