एनिमेशन फ़ाइल साइज़ बेंचमार्क: Rive बनाम GIF बनाम WebM बनाम MOV बनाम MP4 (असली डेटा)
Charmotion टीम द्वारा · अपडेट:
17 कैरेक्टर एनिमेशन के पूरे सेट के लिए, एक फ़्लैट मैस्कॉट की एक Rive फ़ाइल 40 KB की थी, जबकि MP4 2.6 MB, ट्रांसपेरेंट WebM 6.1 MB और GIF 8.0 MB थे। Rive web runtime को जोड़कर भी कई स्टेट के लिए Rive आगे रहता है, पर एक अकेले लूप के लिए अंतर लगभग खत्म हो जाता है, और 3D आर्ट के लिए GIF सबसे खराब विकल्प है।
मुख्य बातें
- एक फ़्लैट मैस्कॉट का पूरा 17-एनिमेशन सेट 40 KB की .riv (brotli से compress करके 12 KB) में आ गया; वही सेट MP4 में 2.6 MB, ट्रांसपेरेंट WebM में 6.1 MB, HEVC MOV में 9.4 MB और GIF में 8.0 MB था।
- Rive web runtime brotli से compress करने पर लगभग 373 KB का होता है और हर साइट पर सिर्फ़ एक बार लगता है, इसलिए एक अकेले लूप के लिए Rive और ट्रांसपेरेंट WebM लगभग बराबर रहते हैं।
- चमकदार 3D लोगो के लिए GIF पूरे सेट के लिए 42.9 MB और एक idle लूप के लिए 4.4 MB तक पहुँच गया, जो MP4 से लगभग आठ गुना है।
- जैसे ही आपको कई स्टेट, इंटरैक्टिविटी या शार्प स्केलिंग चाहिए, Rive आगे निकल जाता है; एक opaque क्लिप के लिए MP4 अब भी सबसे छोटा विकल्प है।
ठीक-ठीक क्या मापा गया?
हमने 25 अक्टूबर 2026 को दो असली इमेज Charmotion engine से गुज़ारीं और उससे बनी हर फ़ाइल को मापा। दोनों सेट में वही 17 एनिमेशन हैं (10 लूप, 6 वन-शॉट रिएक्शन और एक लॉन्च इंट्रो), कुल 35.8 सेकंड का एनिमेशन।
- एक फ़्लैट मैस्कॉट, सामने की ओर देखता। फ़्लैट आर्ट को वेक्टर हिस्सों में ट्रेस करके रिग किया जाता है, इसलिए .riv में आकार होते हैं, पिक्सेल नहीं।
- Aegis, एक चमकदार 3D शील्ड लोगो, जिसमें सॉफ़्ट gradients, reflections और shading हैं। ऐसे आर्ट को जैसा है वैसा ही एनिमेट किया जाता है: ओरिजिनल पिक्सेल .riv में image layers के रूप में एम्बेड होते हैं (शील्ड और आँखों की अलग layers) और mesh से डिफ़ॉर्म किए जाते हैं।
| फ़ॉर्मेट | सेटिंग्स |
|---|---|
| Rive .riv | सभी 17 एनिमेशन और तीन स्टेट मशीन वाली एक फ़ाइल |
| MP4 | H.264 (libx264, preset slow, CRF 16), 1080 x 1080, 60 fps, सॉलिड बैकग्राउंड |
| ट्रांसपेरेंट WebM | अल्फ़ा के साथ VP9 (libvpx-vp9, CRF 28, yuva420p), 1080 x 1080, 60 fps |
| ट्रांसपेरेंट MOV | Apple AVFoundation के ज़रिए अल्फ़ा के साथ HEVC, 1080 x 1080, 60 fps |
| GIF | 480 x 480, 25 fps, हर क्लिप की अलग palette, Bayer dithering, सॉलिड बैकग्राउंड |
Rive रनटाइम का आँकड़ा @rive-app/canvas-lite 2.44.0 (rive.js और rive.wasm) का है, जिसे हमने brotli quality 11 और gzip level 9 से compress किया। Rive के अपने documentation में canvas-lite का साइज़ brotli के साथ 222 KB बताया गया है; इस वर्ज़न का हमारा माप इससे बड़ा निकला, इसलिए हम अपना आँकड़ा इस्तेमाल करते हैं। वीडियो फ़ाइलें पहले से compressed होती हैं, इसलिए उनका साइज़ वही है जो नेटवर्क पर जाता है।
पूरे 17-एनिमेशन सेट के लिए हर फ़ॉर्मेट कितना बड़ा है?
25 अक्टूबर 2026 को मापा गया, सभी 17 एनिमेशन का कुल साइज़ (9:16 वीडियो इसमें शामिल नहीं है):
| फ़ॉर्मेट | फ़्लैट मैस्कॉट | 3D लोगो (Aegis) |
|---|---|---|
| Rive .riv (एक फ़ाइल) | 40 KB (12 KB brotli) | 1.0 MB (880 KB brotli) |
| MP4, 1080 px | 2.6 MB | 6.0 MB |
| ट्रांसपेरेंट WebM, 1080 px | 6.1 MB | 18.4 MB |
| ट्रांसपेरेंट HEVC MOV, 1080 px | 9.4 MB | 10.8 MB |
| GIF, 480 px | 8.0 MB | 42.9 MB |
दो बातें साफ़ दिखती हैं। फ़्लैट मैस्कॉट की .riv फ़ाइल उसके MP4 सेट से लगभग 65 गुना छोटी है, क्योंकि वह प्रति सेकंड 60 फ़्रेम की जगह shapes और keyframes स्टोर करती है। और 3D लोगो की .riv फ़ाइल फ़्लैट वाली से काफ़ी बड़ी है, क्योंकि उसमें ओरिजिनल आर्टवर्क एक इमेज के रूप में होता है; फिर भी यह MP4 सेट से लगभग 6 गुना छोटी है।
अगर आपको सिर्फ़ एक लूपिंग एनिमेशन चाहिए, तो क्या Rive तब भी छोटा पड़ता है?
बस थोड़ा सा। Rive web runtime को जोड़ने के बाद, .riv के रूप में एक अकेला ट्रांसपेरेंट लूप WebM से हल्का होता है, पर ज़्यादा नहीं, HEVC MOV उससे भी हल्का हो सकता है, और अगर आपको ट्रांसपेरेंसी नहीं चाहिए तो MP4 सबसे हल्का है। .riv के लिए Rive web runtime चाहिए, जो हर साइट के लिए एक बार ही डाउनलोड होता है। यह रहा किसी वेब पेज पर एक idle लूप, जितना डेटा असल में ट्रांसफ़र होता है:
| एक idle लूप, नेटवर्क पर ट्रांसफ़र | फ़्लैट मैस्कॉट | 3D लोगो |
|---|---|---|
| Rive: रनटाइम (373 KB brotli) + .riv | लगभग 385 KB | लगभग 1.25 MB |
| ट्रांसपेरेंट WebM idle लूप (4 सेकंड) | 500 KB | 2.0 MB |
| ट्रांसपेरेंट HEVC MOV idle लूप | 743 KB | 1.1 MB |
| GIF idle लूप (480 px) | 698 KB | 4.4 MB |
| MP4 idle लूप (ट्रांसपेरेंसी के बिना) | 211 KB | 558 KB |
यानी एक अकेली opaque क्लिप के लिए MP4 सबसे हल्की फ़ाइल है। एक अकेले ट्रांसपेरेंट लूप के लिए Rive, WebM से थोड़ा हल्का पड़ता है, और बारीक 3D आर्ट के लिए HEVC MOV दोनों से हल्का है। जैसे ही आपको दूसरी स्टेट चाहिए, तस्वीर बदल जाती है: हर अतिरिक्त वीडियो क्लिप सैकड़ों किलोबाइट जोड़ती है, जबकि .riv में पहले से ही सभी 17 मौजूद हैं। अगर रनटाइम किसी और वजह से पेज पर पहले से लोड है, तो हर अतिरिक्त Rive कैरेक्टर का खर्च सिर्फ़ उसकी फ़ाइल है।
फ़ाइल साइज़ ही पूरा खर्च नहीं है। वीडियो को ब्राउज़र की media pipeline डिकोड करती है, जबकि Rive अपने renderer से हर फ़्रेम बनाता है। हमने यहाँ CPU या बैटरी का इस्तेमाल नहीं मापा, इसलिए अपने सबसे धीमे टारगेट डिवाइस पर टेस्ट करें।
3D लोगो और gradients के लिए GIF इतना बड़ा क्यों हो जाता है?
GIF हर फ़्रेम में ज़्यादा से ज़्यादा 256 रंग स्टोर करता है और LZW से कंप्रेस करता है, जो एक जैसे रंग वाले फ़्लैट हिस्सों पर अच्छा काम करता है और smooth gradients, shading और noise पर खराब। MDN के अनुसार GIF 8-bit indexed color तक सीमित है, और फ़ुल-कलर इमेज को GIF में बदलने से असंतोषजनक dithering हो सकती है। Dithering, जो banding को छिपाती है, पिक्सेल स्तर पर और ज़्यादा बदलाव जोड़ देती है, जिसे कंप्रेसर ठीक से संभाल नहीं पाता।
यहाँ ठीक यही हुआ: फ़्लैट मैस्कॉट का GIF सेट उसके MP4 सेट का 3 गुना था, लेकिन 3D लोगो का GIF सेट उसके MP4 सेट का लगभग 7 गुना था, वह भी आधे से कम resolution पर (480 px बनाम 1080 px)। इसी वजह से web.dev एनिमेटेड GIF की जगह वीडियो इस्तेमाल करने की सलाह देता है। GIF में ट्रांसपेरेंसी भी सिर्फ़ on/off होती है, इसलिए soft edges पर या तो halo आ जाता है या solid बैकग्राउंड।
इन आँकड़ों के आधार पर मुझे कौन-सा एनिमेशन फ़ॉर्मेट इस्तेमाल करना चाहिए?
| स्थिति | बेस्ट फ़ॉर्मेट | क्यों |
|---|---|---|
| ऐप या साइट में बदलने वाली कई स्टेट | Rive .riv | सभी स्टेट एक छोटी फ़ाइल में; एक इनपुट से बदलें |
| वेब पेज पर एक ट्रांसपेरेंट लूप | Rive या WebM + HEVC MOV | वज़न लगभग बराबर; Rive हर साइज़ पर शार्प रहता है, वीडियो को रनटाइम नहीं चाहिए |
| एक opaque क्लिप (सोशल, ईमेल प्रीव्यू, docs) | MP4 | सबसे छोटी फ़ाइल, हर जगह चलती है |
| जहाँ सिर्फ़ इमेज चलती हैं (चैट, कुछ ईमेल क्लाइंट) | GIF | कम्पैटिबिलिटी, पर इसे छोटा और फ़्लैट रंगों वाला रखें |
| वीडियो एडिटिंग और ओवरले | HEVC MOV या ProRes 4444 | अल्फ़ा चैनल जिसे एडिटर इम्पोर्ट कर सकें |
हर फ़ॉर्मेट क्या-क्या सपोर्ट करता है, इसकी विस्तृत तुलना के लिए GIF vs WebM vs MP4 vs Lottie vs Rive देखें। Rive और Lottie के बीच रनटाइम साइज़ और परफ़ॉर्मेंस के लिए Rive vs Lottie परफ़ॉर्मेंस देखें।
ये आँकड़े Charmotion के अपने आउटपुट से हैं, इसलिए ये हमारी एनकोडर सेटिंग्स दिखाते हैं। पेड-प्लान सेट पाँचों फ़ॉर्मेट देते हैं, इसीलिए हम इन्हें साथ-साथ माप पाए। पेड प्लान के हर सेट में ये सब शामिल हैं, साथ में कोड।
अक्सर पूछे जाने वाले सवाल
पूरे कैरेक्टर के लिए Rive फ़ाइल कितनी छोटी हो सकती है?
हमारे माप में, 17 एनिमेशन और तीन स्टेट मशीन वाला एक फ़्लैट मैस्कॉट 40,501 bytes का था, यानी brotli कंप्रेशन के बाद लगभग 12 KB। जिस आर्ट को इमेज के रूप में एम्बेड करना पड़ता है, जैसे 3D लोगो, वह काफ़ी बड़ा होता है: उन्हीं 17 एनिमेशन के लिए लगभग 1.0 MB।
क्या मुझे पेज के वज़न में Rive रनटाइम भी गिनना चाहिए?
हाँ, हर साइट के लिए एक बार। हमने जो canvas-lite web runtime (version 2.44.0) मापा, वह JavaScript और WebAssembly मिलाकर brotli कंप्रेशन के बाद लगभग 373 KB था। उसके बाद हर अतिरिक्त .riv का खर्च सिर्फ़ उसका अपना फ़ाइल साइज़ है।
मेरा एनिमेटेड GIF उसी वीडियो से बड़ा क्यों है?
GIF हर फ़्रेम में ज़्यादा से ज़्यादा 256 रंग रखता है और उसका कंप्रेशन gradients और dithering के साथ मुश्किल में पड़ता है। हमारे टेस्ट में एक 3D लोगो का 4 सेकंड का idle लूप 480 px GIF के रूप में 4.4 MB और 1080 px MP4 के रूप में 558 KB का था।
इस गाइड से झटपट जवाब
स्रोत
- Replace animated GIFs with video for faster page loads, web.dev
- Image file type and format guide, MDN Web Docs
- @rive-app/canvas-lite, npm
- Web (JS) runtime: canvas vs webgl2 vs canvas-lite, Rive
- Preloading WASM, Rive
- Video with alpha transparency on the web, Jake Archibald