GIF बनाम WebM बनाम MP4 बनाम Lottie बनाम Rive

कौन सा एनिमेशन फ़ॉर्मेट इस्तेमाल करें?

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

वीडियो फ़ॉर्मेट अपने आप में पूरे होते हैं: कोई भी प्लेयर उन्हें बिना अतिरिक्त कोड के दिखा देता है। Lottie और Rive को रनटाइम लाइब्रेरी चाहिए, लेकिन बदले में वे बिना धुँधले हुए किसी भी साइज़ तक scale होते हैं और ऐप की स्टेट पर रिएक्ट कर सकते हैं।

GIF की सीमाएँ क्या हैं?

GIF एक indexed-color फ़ॉर्मेट है। हर फ़्रेम ज़्यादा से ज़्यादा 256 रंगों की palette इस्तेमाल करता है, इसलिए gradients, सॉफ़्ट शैडो और 3D-रेंडर किए गए आर्टवर्क में साफ़ दिखने वाली banding या dithering आ जाती है।

इसकी ट्रांसपेरेंसी binary है। MDN इसे एक palette index बताता है जो पूरी तरह ट्रांसपेरेंट होता है, बिना किसी partial alpha के। किनारे का हर pixel या तो पूरी तरह opaque होता है या पूरी तरह पारदर्शी, इसलिए जब GIF को उस बैकग्राउंड से अलग बैकग्राउंड पर रखा जाता है जिसके लिए वह बना था, तो outline टेढ़ी-मेढ़ी या halo वाली दिखती है।

मोशन के लिए भी GIF ठीक से compress नहीं होता। web.dev के उदाहरण में 3.7 MB का GIF 551 KB का MP4 और 341 KB का WebM बन गया। MDN वेब पर image sequences के लिए animated WebP, AVIF या APNG जैसे आधुनिक फ़ॉर्मेट की सलाह देता है।

GIF अब भी एक मामले में आगे है: यह लगभग हर उस जगह चलता है जहाँ इमेज दिखाई जा सकती है, जिसमें email clients और पुराने चैट टूल्स भी शामिल हैं जो वीडियो नहीं चलाते।

वीडियो GIF से छोटा क्यों होता है?

आधुनिक वीडियो codecs ज़्यादातर वही स्टोर करते हैं जो फ़्रेम्स के बीच बदलता है, इसके लिए वे motion prediction और ऐसे lossy compression का इस्तेमाल करते हैं जो इंसानी नज़र के हिसाब से ट्यून किया गया है। GIF हर फ़्रेम को अलग से lossless LZW और सीमित palette के साथ compress करता है, इसलिए ठीक-ठाक साइज़ की छोटी क्लिप भी जल्दी भारी हो जाती है।

web.dev की सलाह है कि animated GIF को ऐसे वीडियो से बदलें जो GIF की तरह व्यवहार करे:

<video autoplay loop muted playsinline poster="/media/loop.jpg">
  <source src="/media/loop.webm" type="video/webm">
  <source src="/media/loop.mp4" type="video/mp4">
</video>

ये चार attributes GIF जैसा व्यवहार दोहराते हैं: लोड होते ही शुरू होना, बार-बार चलना, बिना आवाज़ के चलना, और iPhone पर पेज के अंदर ही चलना। Chrome और iOS Safari में muted autoplay की अनुमति है।

एक Charmotion सेट के असली आँकड़े भी यही पैटर्न दिखाते हैं। 4 सेकंड का idle लूप 1080×1080, 60 fps MP4 के रूप में 208 KB और 480 px GIF के रूप में 700 KB का है, यानी आधी से भी कम चौड़ाई पर GIF तीन गुना से ज़्यादा बड़ा है।

कौन से फ़ॉर्मेट ट्रांसपेरेंसी सपोर्ट करते हैं?

छह में से पाँच फ़ॉर्मेट ट्रांसपेरेंट हो सकते हैं, लेकिन बिल्कुल अलग-अलग तरीकों से:

• VP9 (या VP8) WebM में पूरा अल्फ़ा चैनल होता है। Chrome, Edge और Firefox इसे सही दिखाते हैं; Safari वीडियो चला देता है, लेकिन अल्फ़ा हटा देता है।
• अल्फ़ा वाला HEVC .mov फ़ाइल में Apple प्लेटफ़ॉर्म पर पूरा अल्फ़ा चैनल देता है, जिसमें iOS 13+ और macOS Catalina+ पर Safari भी शामिल है।
• Rive और Lottie ट्रांसपेरेंट कैनवस पर वेक्टर शेप बनाते हैं, इसलिए इनमें ट्रांसपेरेंसी डिफ़ॉल्ट रूप से होती है।
• GIF सिर्फ़ एक पूरी तरह ट्रांसपेरेंट रंग सपोर्ट करता है, जिससे किनारे कड़े (हार्ड) दिखते हैं।
• H.264 MP4 में कोई अल्फ़ा चैनल नहीं होता।

हर बड़े ब्राउज़र में चलने वाले ट्रांसपेरेंट वीडियो के लिए, एक ही <video> एलिमेंट में पहले HEVC फ़ाइल और फिर WebM दें। पूरा मार्कअप और एन्कोडिंग कमांड वेबसाइट पर ट्रांसपेरेंट वीडियो गाइड में हैं।

वीडियो की बजाय Rive या Lottie कब बेहतर है?

जब एनिमेशन को किसी चीज़ पर प्रतिक्रिया देनी हो। वीडियो सिर्फ़ चल सकता है, रुक सकता है और आगे-पीछे हो सकता है। Rive या Lottie फ़ाइल आपके code से मिले इनपुट के आधार पर स्टेट बदल सकती है: जैसे एक मैस्कॉट जो loading के दौरान लूप करता है, और request पूरी होने पर success रिएक्शन चलाता है।

Lottie उन After Effects एनिमेशन को रेंडर करता है जो Bodymovin प्लगइन से JSON के रूप में एक्सपोर्ट किए गए हों, और इसके प्लेयर web, iOS, Android, React Native और Windows के लिए उपलब्ध हैं। dotLottie (.lottie) कंटेनर उस JSON को कंप्रेस करता है और इसमें कई एनिमेशन, थीम और स्टेट मशीन एक साथ रखे जा सकते हैं। LottieFiles ने 2025 में Lottie Creator में नो-कोड स्टेट मशीन जोड़ीं, इसलिए "Lottie इंटरैक्टिव नहीं है" कहना अब सही नहीं है।

Rive फ़ाइलें Rive editor में डिज़ाइन की जाती हैं और बाइनरी .riv के रूप में एक्सपोर्ट होती हैं, जिसके फ़ॉर्मेट के केंद्र में स्टेट मशीन होती है। Rive के आधिकारिक रनटाइम MIT License के तहत ओपन सोर्स हैं। Rive के ब्लॉग में 240 KB की एक Lottie फ़ाइल का उदाहरण है जो 16 KB की .riv के रूप में दोबारा बनाई गई; यह वेंडर का उदाहरण है, कोई स्वतंत्र बेंचमार्क नहीं।

दोनों को एक प्लेयर चाहिए। पैकेज के हिसाब से Rive का web रनटाइम brotli कंप्रेशन के बाद लगभग 222 से 648 KB का होता है, इसलिए एक अकेले सजावटी लूप के लिए वीडियो अक्सर कुल मिलाकर हल्का पड़ता है। ज़्यादा विस्तार से तुलना के लिए Rive vs Lottie देखें।

ईमेल, सोशल, स्लाइड और ऐप के लिए कौन सा फ़ॉर्मेट?

• सोशल पोस्ट और विज्ञापन: MP4। 1080×1080 या 9:16 वाला MP4 हर जगह स्वीकार होता है।
• स्लाइड और डॉक्स: क्वालिटी के लिए MP4। GIF तभी इस्तेमाल करें जब टूल वीडियो एम्बेड न करता हो।
• ईमेल: GIF, क्योंकि कई ईमेल क्लाइंट वीडियो नहीं चलाते। इसे छोटा और हल्का रखें, और ध्यान रखें कि पहला फ़्रेम स्थिर तस्वीर के रूप में भी ठीक लगे।
• बिना ट्रांसपेरेंसी वाले web लूप: GIF की जगह <video autoplay loop muted playsinline> एलिमेंट में MP4 (और चाहें तो WebM)।
• ट्रांसपेरेंट web ओवरले: HEVC MOV के साथ VP9 WebM।
• इंटरैक्टिव web और ऐप UI: Rive या Lottie, जिन्हें आपका code चलाए। React और Next.js में Rive और SwiftUI में Rive देखें।

अगर पक्का न हो, तो उस जगह की सबसे सख्त शर्त से शुरू करें जहाँ एनिमेशन लगेगा। ईमेल में वीडियो नहीं चलता, ट्रांसपेरेंट ओवरले में MP4 नहीं चलता, और यूज़र इनपुट पर रिएक्शन के लिए कोई भी वीडियो फ़ॉर्मेट काम नहीं करता। जो बचता है, वही आमतौर पर जवाब होता है।

ज़्यादातर प्रोडक्ट आखिर में एक से ज़्यादा फ़ॉर्मेट इस्तेमाल करते हैं। एक मैस्कॉट ऐप में Rive फ़ाइल के रूप में, मार्केटिंग वेबसाइट पर ट्रांसपेरेंट वीडियो के रूप में, और ऑनबोर्डिंग ईमेल में GIF के रूप में हो सकता है। हर एक्सपोर्ट को एक ही सोर्स से बनाने से इनके बीच अंतर नहीं आता।

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

क्या WebM, MP4 से बेहतर है?

Web के लिए WebM (VP9) अक्सर बेहतर कंप्रेस होता है और अल्फ़ा ट्रांसपेरेंसी सपोर्ट करता है, जबकि H.264 MP4 की कम्पैटिबिलिटी सबसे ज़्यादा है पर उसमें ट्रांसपेरेंसी नहीं होती। WebM और MP4 दोनों दें और ब्राउज़र को चुनने दें। सोशल मीडिया और स्लाइड के लिए अकेले विकल्प के तौर पर MP4 ज़्यादा सुरक्षित है।

मेरे ट्रांसपेरेंट GIF के किनारे सफ़ेद या टेढ़े-मेढ़े क्यों दिखते हैं?

GIF सिर्फ़ 1-bit ट्रांसपेरेंसी सपोर्ट करता है, यानी हर पिक्सेल या तो पूरी तरह अपारदर्शी होता है या पूरी तरह ट्रांसपेरेंट। एंटी-एलियास्ड किनारे एक्सपोर्ट के समय इस्तेमाल हुए बैकग्राउंड रंग के साथ पक्के हो जाते हैं। साफ़ किनारों के लिए ट्रांसपेरेंट WebM के साथ HEVC MOV, या Rive या Lottie जैसा वेक्टर फ़ॉर्मेट इस्तेमाल करें।

क्या Lottie एनिमेशन इंटरैक्टिव हो सकते हैं?

हाँ। Lottie प्लेयर लंबे समय से प्लेबैक कंट्रोल देते आए हैं, और 2025 से LottieFiles का Lottie Creator नो-कोड स्टेट मशीन बना सकता है जो dotLottie फ़ाइल के अंदर जाती हैं और dotLottie प्लेयर में चलती हैं। Rive अपनी बिल्ट-इन स्टेट मशीन के ज़रिए ऐसा ही लॉजिक देता है।

क्या Rive फ़ाइल हमेशा वीडियो से छोटी होती है?

.riv फ़ाइल खुद आमतौर पर काफ़ी छोटी होती है, कई एनिमेशन के लिए भी अक्सर कुछ दसियों किलोबाइट। लेकिन Rive की साइज़ टेबल के अनुसार web रनटाइम कंप्रेशन के बाद लगभग 222 से 648 KB और जोड़ता है। एक छोटे सजावटी लूप के लिए MP4 कुल मिलाकर हल्का हो सकता है; कई स्टेट के लिए आमतौर पर Rive बेहतर रहता है।

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

• Web एनिमेशन के लिए GIF खराब क्यों है?
• वीडियो को GIF की तरह कैसे चलाएँ?
• Charmotion सेट में कौन से फ़ाइल फ़ॉर्मेट शामिल हैं?

स्रोत

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Video with alpha transparency on the web, Jake Archibald
• Alpha transparency in Chrome video, Chrome for Developers
• lottie-web, Airbnb on GitHub
• dotLottie: the open format, LottieFiles
• State machines are finally in Lottie Creator, LottieFiles
• Runtime sizes, Rive