क्या एक अच्छा अभ्यास सीएसएस स्प्राइट्स में एनिमेटेड gif का उपयोग करता है?

Question

मैं जब आप शब्दों पर माउस (जब वे नहीं कर रहे हैं, मैं स्प्राइट में एक नहीं एनिमेटेड चिह्न का चयन करें) एनिमेटेड माउस के साथ एक वेबसाइट है, वे एक एनिमेटेड gif में हैं, और यहाँ यह है:

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

Answer 1

अनुमान नहीं लगाएं, परीक्षण! गंभीरता से। जब तक एनिमेटेड gif उचित आयामों का है, मुझे संदेह है कि यह एक बड़ी समस्या होगी। हालांकि, इसका पता लगाने का सबसे अच्छा तरीका यह है कि इसे आजमाएं। विभिन्न रणनीतियों (कोई एनीमेशन, एक अलग फ़ाइल में एनिमेटेड आइकन, एक छवि में सबकुछ) के साथ प्रोफाइल पेज लोड समय पर क्रोम या सफारी के वेब इंस्पेक्टर का उपयोग करने का प्रयास करें, और देखें कि कौन सा सर्वश्रेष्ठ प्रदर्शन करता है। यदि इसमें कोई फर्क नहीं पड़ता है, तो सबसे आसान विकल्प चुनें। यदि प्रदर्शन एक मुद्दा बन जाता है तो आप इसे बाद में हमेशा बदल सकते हैं।

Answer 2

एनिमेटेड जीआईएफ का समर्थन वर्ल्ड वाइड वेब (www) की शुरुआत से ही सभी प्रमुख ब्राउज़रों में मौजूद है; 2 दशकों पहले। मुझे आश्चर्य होगा कि अगर वे लिंक्स जैसे ग्राफिक्स का समर्थन नहीं करते हैं, तो वे किसी भी आधुनिक ब्राउज़र अंश के लिए किसी भी चिंता का विषय थे।

फ्रेम दर बहुत अधिक होने पर आपको कुछ ब्राउज़रों के साथ समस्या हो सकती है लेकिन यह स्पष्ट रूप से इन आइकनों के मामले में नहीं है जो आप हमें दिखा रहे हैं।

Answer 3

जीआईएफ संपीड़न प्रारूप एक मुश्किल है क्योंकि सभी रिक्त स्थान का इलाज नहीं किया जाता है जैसे यह एक jpg या png (bitwise) में होगा। हालांकि एनिमेशन की संख्या बढ़ जाती है और रंगों की संख्या बढ़ जाती है, इसलिए gif प्रारूप टूटना शुरू हो जाएगा। आपको क्या करना चाहिए स्प्राइट छवि के आकार के खिलाफ व्यक्तिगत आकारों का परीक्षण करना है। स्प्राइट को स्थानांतरित करने का प्रदर्शन वास्तव में एक मुद्दा नहीं होना चाहिए, लेकिन जैसा कि अन्य उत्तरों ने कहा है कि आपको इसे विभिन्न ब्राउज़रों और फॉर्म कारकों के साथ परीक्षण करना होगा।