Rive बनाम Lottie: परफ़ॉर्मेंस और रनटाइम साइज़

Rive vs Lottie का benchmark असल में किसने किया?

बहुत कम लोगों ने, और यही इस पेज की सबसे अहम बात है। "Rive vs Lottie" लेखों में दिखने वाला लगभग हर परफ़ॉर्मेंस या साइज़ का आँकड़ा तीन में से किसी एक स्रोत से आता है: Rive, LottieFiles, या consultancy Callstack का एक अकेला स्वतंत्र टेस्ट।

Vendor के आँकड़े बेकार नहीं हैं। उनसे पता चलता है कि हर टीम ने किस चीज़ को optimize किया। लेकिन इनमें से कोई भी दोनों टूल्स की तुलना एक जैसी स्थितियों में नहीं करता, और LottieFiles और Margelo के आँकड़े तो दूसरे टूल से तुलना करते ही नहीं। इस टेबल को फ़ैसला न मानें, बल्कि टेस्ट करने लायक अनुमानों की सूची समझें।

Callstack ने Android पर क्या मापा?

Callstack ने एक ही एनिमेशन Lottie और Rive दोनों में बनाया और दोनों को Sony Xperia Z3 (2014 में लॉन्च हुआ फ़ोन) पर एक React Native ऐप में चलाया। Lottie, JavaScript और UI दोनों threads पर लगभग 17 FPS पर चला; Rive लगभग 60 FPS पर बना रहा। Callstack का निष्कर्ष था कि Rive ने Lottie को "graphics memory को छोड़कर हर मामले में" पीछे छोड़ दिया।

इसकी सीमाएँ भी उतनी ही अहम हैं जितना मुख्य नतीजा:

• एक ही डिवाइस। पुराना, धीमा Android फ़ोन CPU के उन अंतरों को बढ़ा देता है जो किसी आधुनिक फ़ोन पर शायद छिप जाएँ।
• एक ही framework। इसमें उस समय के React Native wrappers मापे गए, नेटिव Android या web नहीं।
• मेमोरी में उल्टा नतीजा। कुल मेमोरी Rive के लिए 276 MB और Lottie के लिए 246 MB थी।
• यह 2023 का है। तब से दोनों रनटाइम बदल चुके हैं: Rive का React Native पैकेज दोबारा लिखा गया है, और LottieFiles अब ThorVG पर आधारित dotLottie player देता है।

Callstack ने 24.37 KB की एक Lottie फ़ाइल को 2 KB की .riv फ़ाइल के रूप में भी दोबारा बनाया। यह फ़ाइल साइज़ का एक स्वतंत्र आँकड़ा है, लेकिन सिर्फ़ एक छोटे एनिमेशन का। यह Rive के दावे की दिशा को सपोर्ट करता है, पर उसके सटीक अनुपात की पुष्टि नहीं करता।

ईमानदार निष्कर्ष: कमज़ोर डिवाइस पर, मध्यम जटिलता वाले vector एनिमेशन के साथ, Rive ने frame rate बनाए रखा जबकि Lottie नहीं रख पाया, और इसके लिए थोड़ी ज़्यादा मेमोरी लगी। यह आपके एनिमेशन और आपके डिवाइस पर भी सही है या नहीं, यह सिर्फ़ आपका अपना टेस्ट बता सकता है।

Xcode profiling में Rive भारी क्यों दिखता है?

क्योंकि दोनों लाइब्रेरी अपना काम अलग-अलग जगह करती हैं। Rive का Apple रनटाइम आपके ऐप process के अंदर सीधे Metal से ड्रॉ करता है। Lottie का Core Animation engine layers को Apple के render server को सौंप देता है, जो backboardd नाम के एक अलग system process में चलता है।

अगर आप Instruments खोलकर सिर्फ़ अपने ऐप को profile करते हैं, तो Rive की रेंडरिंग का खर्च आपके process में दिखता है, जबकि Lottie का ज़्यादातर खर्च नहीं दिखता। Rive के अपने documentation में यही बात कही गई है और developers को ऐप के साथ backboardd को भी profile करने को कहा गया है। यह सलाह एक vendor की है और उस पेज पर कोई आँकड़े नहीं हैं, लेकिन इसके पीछे का architecture आसानी से कन्फ़र्म किया जा सकता है: iOS पर Core Animation compositing ऐप के बाहर होती है।

iOS पर निष्पक्ष तुलना के लिए:

• अपने ऐप process और backboardd, दोनों के लिए CPU और GPU रिकॉर्ड करें।
• Simulator पर नहीं, असली डिवाइस पर टेस्ट करें।
• एक ही एनिमेशन, स्क्रीन पर एक ही साइज़ में, एक ही अवधि तक चलाएँ।
• सिर्फ़ peak CPU नहीं, energy impact भी नोट करें, क्योंकि लूपिंग मैस्कॉट कई मिनट तक चलता है।

यही सिद्धांत दूसरी जगहों पर भी लागू होता है। कोई भी तुलना जो सिर्फ़ एक process को, या playback के सिर्फ़ पहले सेकंड को मापती है, किसी भी दिशा में गुमराह कर सकती है।

क्या Lottie ने अपनी iOS CPU समस्या ठीक कर ली?

सपोर्टेड एनिमेशन के लिए, काफ़ी हद तक हाँ। पुराने lottie-ios वर्ज़न हर फ़्रेम main thread पर रेंडर करते थे, और maintainers ने बताया था कि यह इंजन लगभग 5-20% या उससे ज़्यादा CPU ले सकता है। lottie-ios 4.0 (2022 के अंत) में Airbnb ने .automatic सेटिंग के ज़रिए Core Animation rendering engine को डिफ़ॉल्ट बना दिया। Core Animation आपके main thread पर हर फ़्रेम का काम किए बिना एनिमेशन चलाता है।

पेच "सपोर्टेड" शब्द में है। अगर किसी एनिमेशन में ऐसे फ़ीचर हैं जिन्हें Core Animation engine संभाल नहीं सकता, तो lottie-ios उस फ़ाइल के लिए main-thread engine पर लौट आता है। इसलिए एक ही डिज़ाइनर की दो Lottie फ़ाइलें iPhone पर बहुत अलग परफ़ॉर्म कर सकती हैं, यह इस पर निर्भर करता है कि उनमें After Effects के कौन से फ़ीचर इस्तेमाल हुए हैं।

इससे यह भी समझ आता है कि iOS पर Lottie से बैटरी खत्म होने वाले पुराने फ़ोरम थ्रेड शायद आज के व्यवहार पर लागू न हों। परफ़ॉर्मेंस की वजह से किसी ऐप को Lottie से हटाने से पहले, देखें कि आपकी फ़ाइलें असल में कौन सा इंजन इस्तेमाल करती हैं और आप lottie-ios का कौन सा वर्ज़न ship करते हैं। हल शायद नया फ़ॉर्मेट नहीं, बल्कि upgrade या सरल एक्सपोर्ट हो।

Callstack का 2023 का टेस्ट Android पर हुआ था, इसलिए उससे यह पता नहीं चलता कि आज के iPhone पर दोनों में से कोई टूल कैसा परफ़ॉर्म करता है।

Rive, lottie-web और dotLottie रनटाइम कितने बड़े हैं?

फ़ाइल साइज़ डाउनलोड का सिर्फ़ आधा हिस्सा है। हर फ़ॉर्मेट को एक player भी चाहिए, और player अक्सर एनिमेशन से बड़ा होता है।

यहाँ दो बातें साफ़ दिखती हैं। पहली, मौजूदा canvas-lite WASM file का हमारा माप Rive के प्रकाशित आँकड़े से ज़्यादा है; हो सकता है वह आँकड़ा मौजूदा version से पहले का हो। दूसरी, lottie-web यहाँ सबसे छोटा player है, लेकिन इसका आखिरी release मई 2025 में आया था, और LottieFiles अब dotLottie players को आगे बढ़ा रहा है, जिनका WASM engine lottie-web से भारी है।

एक एनिमेशन के लिए आमतौर पर सबसे हल्का player बेहतर रहता है। कई एनिमेशन, या कई स्टेट वाले एक कैरेक्टर के लिए, हर फ़ाइल पर होने वाली बचत runtime के खर्च से ज़्यादा होने लगती है।

क्या renderer (Canvas2D, WebGL2, Rive Renderer) से नतीजा बदलता है?

हाँ, और यही एक और वजह है कि कोई एक benchmark दूसरे setup पर शायद ही लागू होता है। वेब पर Rive के @rive-app/canvas और canvas-lite पैकेज ब्राउज़र के Canvas2D API से drawing करते हैं, जबकि @rive-app/webgl2 GPU पर Rive Renderer इस्तेमाल करता है। Rive docs के अनुसार कुछ features, जैसे Vector Feathering, के लिए Rive Renderer ज़रूरी है। Apple, Android और React Native पर Rive Renderer ही default है।

Lottie में भी अलग-अलग विकल्प हैं। lottie-web SVG, Canvas या HTML में render कर सकता है, और कई layers होने पर हर एक का व्यवहार अलग होता है। dotLottie players WASM में compile किए गए ThorVG से render करते हैं, और WebGL व WebGPU builds भी उपलब्ध हैं। iOS पर lottie-ios हर फ़ाइल के लिए Core Animation और अपने main-thread engine में से एक चुनता है।

इसलिए "Rive vs Lottie" असल में किसी खास पैकेज, renderer और device की तुलना है। जिस test में Rive के GPU renderer को lottie-web के SVG renderer से मिलाया गया हो, वह canvas-lite बनाम dotLottie के बारे में बहुत कम बताता है। कोई benchmark पढ़ते समय सबसे पहले पैकेज के नाम देखें। अगर वे नहीं दिए गए, तो नतीजे को अपने setup पर लागू करना मुश्किल है।

Rive में एक runtime optimization भी है जिसे जानना उपयोगी है: इसकी स्टेट मशीन "settle" हो सकती है, यानी runtime पहचान लेता है कि अब कुछ नहीं बदलेगा और फ़्रेम आगे बढ़ाना बंद कर देता है। settle हो चुका idle Rive एनिमेशन बहुत कम resources लेता है।

अपने एनिमेशन का benchmark कैसे करें?

अपने असली एनिमेशन को अपने असली devices पर test करें। एक छोटी checklist:

1. content एक जैसा रखें। एक ही एनिमेशन को दोनों formats में, एक ही आर्टबोर्ड साइज़ और frame rate पर बनाएँ या एक्सपोर्ट करें।
2. कुल डाउनलोड मापें। compressed एनिमेशन फ़ाइल और compressed runtime को जोड़ें, जैसा आपका CDN उन्हें serve करता है।
3. अपने सबसे कमज़ोर target device पर test करें। नए flagship की तुलना में एक mid-range Android phone ज़्यादा सच बताता है।
4. समय के साथ frame rate, CPU और memory रिकॉर्ड करें। हर एक को कम से कम एक मिनट चलाएँ। iOS पर backboardd को भी शामिल करें।
5. अपना असली layout test करें। किसी page पर दस छोटे एनिमेशन एक बड़े एनिमेशन से अलग व्यवहार करते हैं।
6. idle खर्च जाँचें। pause या settle हो चुके एनिमेशन को लगभग न के बराबर resources लेने चाहिए।

अगर आप किसी एक clip के बजाय किसी कैरेक्टर के लिए format चुन रहे हैं, तो फ़ाइलों की गिनती भी करें। लूप और रिएक्शन का एक सेट एक Rive file के रूप में एक request और एक parse है; वही सेट अलग-अलग Lottie files के रूप में कई requests हैं। हमारा अपना उदाहरण: Charmotion का एक कैरेक्टर सेट flat कैरेक्टर के लिए लगभग 35 से 45 KB की एक ही .riv में 17 एनिमेशन रखता है (3D या rendered आर्ट की फ़ाइल बड़ी होती है, क्योंकि उसमें images embed होती हैं), साथ में उन जगहों के लिए MP4, GIF और ट्रांसपेरेंट WebM/MOV copies भी मिलती हैं जहाँ कोई runtime load नहीं हो सकता।

speed के अलावा बाकी trade-offs के लिए Rive vs Lottie: 2026 में किसे इस्तेमाल करें देखें।

परफ़ॉर्मेंस के लिए कौन सा चुनें?

Lottie चुनें अगर आप वेब पर एक या दो सरल एनिमेशन ship करते हैं, जहाँ lottie-web के छोटे player से बेहतर विकल्प मिलना मुश्किल है; आपकी फ़ाइलें पहले से lottie-ios के Core Animation engine पर बिना fallback के चलती हैं; या आपकी team का pipeline After Effects है और testing में एनिमेशन ठीक perform करते हैं।

Rive चुनें अगर आपको एक कैरेक्टर से कई स्टेट या एनिमेशन चाहिए, low-end Android पर परफ़ॉर्मेंस मायने रखती है, या आपके अपने test में भी frame rate का वही अंतर दिखता है जो Callstack ने देखा था। Rive की हर फ़ाइल पर होने वाली बचत और settle होने वाली स्टेट मशीन का सबसे ज़्यादा फ़ायदा तब मिलता है जब runtime कई एनिमेशन के बीच share होता है।

दोनों ही स्थितियों में फ़ैसला अपने ऐप से मापे गए आँकड़ों पर करें, और runtime के बड़े upgrades के बाद फिर से test करें। दोनों projects तेज़ी से बदल रहे हैं: Rive का React Native runtime Nitro Modules पर फिर से लिखा गया है, और LottieFiles अब नए projects को अपने ThorVG-आधारित dotLottie players की ओर ले जा रहा है। दो साल पुराना नतीजा शायद अब किसी भी tool पर सही न बैठे।

अक्सर पूछे जाने वाले सवाल

क्या Rive, Lottie से तेज़ है?

अक्सर हाँ, लेकिन यह एनिमेशन, device और पैकेज पर निर्भर करता है। Callstack के 2023 के independent test में React Native पर Sony Xperia Z3 पर Rive के लिए लगभग 60 FPS और Lottie के लिए 17 FPS मापा गया, जबकि Rive ने थोड़ी ज़्यादा memory ली। इसके बाद का कोई independent आमने-सामने test नहीं मिला, इसलिए अपनी फ़ाइलें खुद test करें।

क्या Rive files सच में Lottie से 10 से 15 गुना छोटी होती हैं?

यह अनुपात Rive का अपना दावा है, और इसकी कोई methodology प्रकाशित नहीं की गई है। Callstack ने independent तौर पर 24.37 KB की एक Lottie को 2 KB की .riv के रूप में दोबारा बनाया, जो इसी दिशा में इशारा करता है। LottieFiles का कहना है कि compressed .lottie फ़ाइलें यह अंतर कम कर देती हैं। अपने एनिमेशन के लिए compressed file और runtime का कुल साइज़ मिलाकर तुलना करें।

कौन सा web player सबसे छोटा है?

lottie-web सबसे छोटा है: अक्टूबर 2026 के हमारे माप के अनुसार full build लगभग 76 KB gzipped और light build 46 KB है। Rive का सबसे हल्का web पैकेज, canvas-lite, Rive के आँकड़ों के अनुसार 222 KB brotli और हमारे माप में लगभग 373 KB है। dotLottie WASM player लगभग 433 KB brotli है।

Instruments में Lottie, Rive से सस्ता क्यों दिखता है?

Lottie का Core Animation engine आपके ऐप के बाहर, Apple के backboardd process में render करता है, जबकि Rive आपके ऐप के अंदर Metal से drawing करता है। सिर्फ़ अपने ऐप को profile करने पर Lottie के खर्च का एक हिस्सा छिप जाता है। Rive docs backboardd को भी profile करने की सलाह देते हैं, जो iOS पर किसी भी निष्पक्ष तुलना के लिए अच्छा तरीका है।

इस गाइड से झटपट जवाब

• क्या Rive, Lottie से तेज़ है?
• क्या Rive files, Lottie files से छोटी होती हैं?
• Rive runtime कितना बड़ा है?
• क्या iOS पर Lottie अब भी बहुत CPU लेता है?

स्रोत

• Lottie vs. Rive: Optimizing Mobile App Animation, Callstack
• Apple runtime: Resource usage, Rive
• Runtime sizes, Rive
• Choose a renderer, Rive
• lottie-ios 4.0.0 release notes, Airbnb (GitHub)
• lottie-web on npm, npm
• @lottiefiles/dotlottie-web on npm, npm
• Rive as a Lottie alternative, Rive