कंटेंट पर जाएँ
charmotion
शुरू करें

Lottie बनाम GIF: साइज़, क्वालिटी और कहाँ कौन चलता है

Charmotion टीम द्वारा · अपडेट:

तुलना गाइड का कवर illustration: Lottie बनाम GIF: साइज़, क्वालिटी और कौन कहाँ काम करता है

जिन वेबसाइट और ऐप पर आपका कंट्रोल है, उनमें वेक्टर एनिमेशन के लिए Lottie इस्तेमाल करें, जहाँ यह हर साइज़ पर शार्प रहता है और इसके ट्रांसपेरेंट किनारे smooth होते हैं। जहाँ कोई player नहीं चल सकता, जैसे ईमेल और कई चैट टूल्स, वहाँ GIF इस्तेमाल करें। फ़्लैट वेक्टर आर्ट के लिए Lottie आमतौर पर छोटा होता है, लेकिन इसे एक player library चाहिए, जो GIF को नहीं चाहिए।

मुख्य बातें

  • GIF 256 रंगों और 1-bit ट्रांसपेरेंसी तक सीमित है; Lottie smooth, anti-aliased किनारों वाले वेक्टर बनाता है।
  • फ़्लैट आर्ट के लिए Lottie फ़ाइलें अक्सर GIF से काफ़ी छोटी होती हैं, लेकिन player लगभग 46-76 KB (lottie-web, gzipped) या उससे ज़्यादा जोड़ देता है।
  • GIF हर उस जगह चलता है जहाँ इमेज दिखती है, ईमेल समेत; Lottie को JavaScript या native player चाहिए।
  • रास्टर या 3D-rendered आर्टवर्क के लिए, वीडियो आमतौर पर दोनों से बेहतर रहता है।

Lottie और GIF में क्या अंतर है?

GIF बिटमैप फ़्रेम का एक क्रम है, जिसे कोई भी इमेज व्यूअर दिखा सकता है। Lottie फ़ाइल वेक्टर शेप और keyframes का विवरण होती है, जो मूल रूप से After Effects से Bodymovin plugin के ज़रिए एक्सपोर्ट की जाती है। इसे एक प्लेयर लाइब्रेरी वेब, iOS, Android, React Native और Windows पर रनटाइम में ड्रॉ करती है। dotLottie (.lottie) वैरिएंट उस JSON को zip करता है और इसमें कई एनिमेशन, थीम और स्टेट मशीन एक साथ bundle किए जा सकते हैं।

LottieGIF
कंटेंटवेक्टर शेप और keyframes (JSON या .lottie)बिटमैप फ़्रेम, indexed color
रंगफ़ुल कलर, ग्रेडिएंटहर फ़्रेम में अधिकतम 256
Transparencyस्मूद, anti-aliased किनारे1-bit: हर पिक्सेल या तो पूरा दिखता है या बिल्कुल नहीं
स्केलिंगहर साइज़ पर शार्पबड़ा करने पर धुँधला या पिक्सेलेटेड
प्लेयर ज़रूरीहाँ (JavaScript या नेटिव लाइब्रेरी)No
ईमेल और चैटआमतौर पर नहीं चलतालगभग हर जगह सपोर्टेड
इंटरैक्टिविटीप्लेबैक कंट्रोल; dotLottie के ज़रिए स्टेट मशीनकोई नहीं

टेबल से जवाब का अंदाज़ा पहले ही मिल जाता है: ये दोनों फ़ॉर्मेट सिर्फ़ उन्हीं जगहों पर मुकाबले में हैं जो आपके कंट्रोल में हैं। बाकी हर जगह इन दोनों में से सिर्फ़ GIF ही चलता है।

क्या Lottie हमेशा GIF से छोटा होता है?

अक्सर, पर हमेशा नहीं। और इस तुलना के लिए दो आँकड़े चाहिए: एनिमेशन फ़ाइल और प्लेयर।

फ़्लैट वेक्टर मोशन में फ़ाइल साइज़ का फ़र्क बहुत बड़ा हो सकता है। LottieFiles के मुताबिक The Washington Post ने 2 MB के GIF की जगह 385 KB की Lottie JSON इस्तेमाल की; यह vendor का प्रकाशित उदाहरण है, कोई स्वतंत्र टेस्ट नहीं। इसकी वजह संरचना में है: GIF हर फ़्रेम के पिक्सेल स्टोर करता है, इसलिए उसका साइज़ डाइमेंशन और अवधि के साथ बढ़ता है, जबकि Lottie फ़ाइल शेप और keyframes स्टोर करती है, इसलिए उसका साइज़ आर्टवर्क की जटिलता के साथ बढ़ता है।

यह स्थिति तब उलट जाती है जब Lottie में embedded बिटमैप, बहुत सारी layers या लंबे frame-by-frame sequence हों। जिस Lottie में बस फ़ोटो भरी हों, वह असल में रनटाइम के साथ आने वाला एक भारी GIF ही है।

इसके बाद प्लेयर का साइज़ जोड़ें। 12 अक्टूबर 2026 को npm पैकेज से Charmotion द्वारा मापे गए आँकड़ों के अनुसार, lottie-web 5.13.0 का full build gzip के बाद लगभग 76 KB और light build 46 KB है। LottieFiles का नया dotlottie-web प्लेयर एक WebAssembly engine लोड करता है, जो brotli के साथ लगभग 433 KB मापा गया, साथ में करीब 23 KB JavaScript। एक पेज पर एक छोटे एनिमेशन के लिए प्लेयर GIF से भारी पड़ सकता है; कई एनिमेशन होने पर यह खर्च जल्दी बँट जाता है।

GIF भी कुशल फ़ॉर्मेट नहीं है। web.dev के उदाहरण में 3.7 MB का GIF 551 KB का MP4 और 341 KB का WebM बन गया। इसीलिए raster कंटेंट के लिए वीडियो अक्सर बेहतर विकल्प होता है।

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

GIF में ट्रांसपेरेंसी binary होती है। MDN के अनुसार यह एक अकेला palette index होता है जो पूरी तरह ट्रांसपेरेंट है, इसमें partial alpha नहीं होता। anti-aliased किनारे को पीछे की चीज़ में घुलने के लिए semi-transparent पिक्सेल चाहिए, और GIF उन्हें स्टोर नहीं कर सकता।

ग्रेडिएंट पर अल्फ़ा चैनल वाले स्मूथ किनारे और one-bit GIF के टेढ़े-मेढ़े किनारे की ज़ूम की गई तुलना

Exporter इसका हल किनारे को एक तय matte रंग (आमतौर पर सफ़ेद) के साथ blend करके निकालते हैं। यह सफ़ेद पेज पर ठीक दिखता है, लेकिन गहरे पेज पर हल्का halo छोड़ देता है। matte के बिना किनारा सीढ़ी जैसा दिखता है। दोनों ही हालात में ट्रांसपेरेंट GIF सिर्फ़ उसी बैकग्राउंड पर सही दिखता है जिसके लिए उसे बनाया गया था।

Lottie वेक्टर शेप को ट्रांसपेरेंट canvas या SVG पर ड्रॉ करता है, इसलिए डिस्प्ले के समय किनारे असली बैकग्राउंड के हिसाब से anti-aliased होते हैं। वही फ़ाइल हल्के कार्ड, गहरे हीरो सेक्शन या ग्रेडिएंट, हर जगह साफ़ दिखती है।

256 रंगों की सीमा से एक और गड़बड़ी आती है: ग्रेडिएंट, सॉफ़्ट शैडो और 3D-rendered आर्ट में banding या dithering दिखती है। Lottie में वेक्टर fills के लिए कोई palette सीमा नहीं है। लेकिन अगर आपका आर्टवर्क फ़ोटो जैसा है, तो दोनों में से कोई भी फ़ॉर्मेट आदर्श नहीं है; ट्रांसपेरेंट WebM के साथ HEVC .mov फ़ुल कलर और असली अल्फ़ा चैनल, दोनों बनाए रखते हैं।

Lottie कहाँ इस्तेमाल नहीं हो सकता?

हर उस जगह जहाँ इमेज तो दिखती है, पर आपका code नहीं चलता। Lottie फ़ाइल सिर्फ़ डेटा है; उसे पिक्सेल में बदलने के लिए किसी चीज़ को प्लेयर चलाना पड़ता है। इसलिए यह इन जगहों पर नहीं चलता:

  • ईमेल। ईमेल clients मैसेज में scripts नहीं चलाते, इसलिए Lottie प्लेयर लोड करने का कोई तरीका नहीं है। ईमेल में मोशन के लिए GIF ही स्टैंडर्ड विकल्प है।
  • चैट और सोशल अपलोड। मैसेजिंग टूल्स और सोशल नेटवर्क इमेज और वीडियो फ़ाइलें स्वीकार करते हैं, कोई भी JSON और उसके साथ प्लेयर नहीं।
  • डॉक्युमेंट, स्लाइड और README फ़ाइलें, जो इमेज तो लेती हैं पर scripts नहीं।
  • सिर्फ़ इमेज वाले CMS fields, जब तक प्लेटफ़ॉर्म अपना Lottie element न दे, जैसा Webflow और Wix देते हैं।

आपकी अपनी वेबसाइट या ऐप में, जहाँ भी प्लेयर इंस्टॉल है, Lottie चलता है। ऐसी जगहों पर सवाल Lottie बनाम वीडियो बनाम Rive का हो जाता है, जिसे GIF vs WebM vs MP4 vs Lottie vs Rive में हर फ़ॉर्मेट के हिसाब से समझाया गया है।

ईमेल वाले GIF छोटे, हल्के और पहले फ़्रेम पर ही समझ आने लायक रखें, क्योंकि कुछ clients सिर्फ़ वही फ़्रेम दिखाते हैं।

क्या Lottie ऐसा CPU खर्च करता है जो GIF नहीं करता?

हाँ, सिद्धांत रूप में। ब्राउज़र GIF को नेटिव तरीके से decode करता है। Lottie प्लेयर हर फ़्रेम में शेप और keyframes को evaluate करके दोबारा ड्रॉ करता है: वेब पर JavaScript में (lottie-web SVG, canvas या HTML में render करता है) या मोबाइल पर नेटिव code में।

इसका असर कितना होगा, यह प्लेटफ़ॉर्म और फ़ाइल पर निर्भर करता है:

  • iOS। lottie-ios 4.0 ने सपोर्टेड एनिमेशन के लिए अपने Core Animation rendering engine को डिफ़ॉल्ट बना दिया, इसलिए प्लेबैक अब main thread पर हर फ़्रेम का काम नहीं करता। जिन एनिमेशन में असमर्थित features हैं, वे पुराने main-thread engine पर लौट जाते हैं, जो InfoQ की रिपोर्ट के अनुसार 5 से 20% या उससे ज़्यादा CPU ले सकता है।
  • Android पर React Native। जनवरी 2023 में Callstack के टेस्ट में, पुराने Sony Xperia Z3 पर एक Lottie एनिमेशन लगभग 17 FPS पर चला। यह एक डिवाइस और एक फ़ाइल का नतीजा है, इसलिए इसे सामान्य नियम नहीं, बल्कि low-end हार्डवेयर के बारे में चेतावनी समझें।

कुछ व्यावहारिक आदतें ज़्यादातर फ़र्क मिटा देती हैं: स्क्रीन से बाहर के एनिमेशन pause करें, एक साथ दर्जनों प्लेयर न चलाएँ, और layers व masks कम रखें। GIF में ऐसे कोई कंट्रोल नहीं होते, लेकिन जब तक वह दिखता है, decode होता रहता है और इमेज बदले बिना उसे pause नहीं किया जा सकता।

वीडियो कब दोनों से बेहतर होता है?

जब आर्टवर्क raster हो: फ़ोटो, 3D renders, पेंटेड इलस्ट्रेशन या स्क्रीन रिकॉर्डिंग। वीडियो codecs ज़्यादातर सिर्फ़ वही स्टोर करते हैं जो फ़्रेम के बीच बदलता है, इसलिए ऐसे कंटेंट को वे GIF से कहीं बेहतर compress करते हैं, और वेक्टर फ़ॉर्मेट इसे कुशलता से दर्शा ही नहीं सकता।

web.dev सलाह देता है कि वेब पेजों पर animated GIF की जगह <video autoplay loop muted playsinline> element इस्तेमाल करें, जो GIF जैसा ही व्यवहार करता है पर बहुत कम bytes डाउनलोड करता है। ट्रांसपेरेंट overlay के लिए Safari को HEVC-with-alpha .mov और बाकी ब्राउज़र को VP9 WebM दें; markup वेबसाइट पर ट्रांसपेरेंट वीडियो में दिया गया है।

ऐप के अंदर वीडियो में भी GIF वाली मुख्य कमी है: यह play, pause और seek कर सकता है, पर स्टेट पर रिएक्ट नहीं कर सकता। अगर एनिमेशन को loading, success और error के बीच बदलना है, तो Lottie (dotLottie के ज़रिए) या Rive में स्टेट मशीन बेहतर विकल्प है।

एक काम का नियम: अपने प्रोडक्ट के अंदर वेक्टर और इंटरैक्टिव, अपने कंट्रोल वाली raster क्लिप के लिए वीडियो, और GIF सिर्फ़ वहाँ जहाँ बाकी दोनों नहीं चल सकते।

Lottie चुनें या GIF?

Lottie चुनें, अगर:

  • एनिमेशन आपकी अपनी वेबसाइट या ऐप के अंदर चलता है, जहाँ आप प्लेयर लोड कर सकते हैं;
  • आर्टवर्क फ़्लैट वेक्टर इलस्ट्रेशन, आइकन या UI मोशन है;
  • इसे अलग-अलग बैकग्राउंड पर दिखना है, या अलग-अलग screen densities पर स्केल होना है;
  • आपको प्लेबैक कंट्रोल चाहिए, या dotLottie स्टेट मशीन के ज़रिए स्टेट के हिसाब से व्यवहार;
  • आपकी टीम पहले से After Effects या Lottie Creator में मोशन बनाती है।

GIF चुनें, अगर:

  • एनिमेशन ईमेल, चैट ऐप, डॉक्युमेंट या ऐसी किसी जगह जाना है जो इमेज दिखाती है पर code नहीं चलाती;
  • आपको एक ऐसी फ़ाइल चाहिए जो बिना किसी integration के चल जाए;
  • क्लिप इतनी छोटी और हल्की है कि GIF का बड़ा साइज़ मायने नहीं रखता।

अगर दोनों में से कोई सूची फ़िट नहीं होती, क्योंकि कंटेंट raster है या उसे फ़ुल कलर में ट्रांसपेरेंट होना है, तो वीडियो इस्तेमाल करें। कई टीमें तीनों इस्तेमाल करती हैं: प्रोडक्ट में Lottie, मार्केटिंग साइट पर वीडियो और ईमेल में GIF।

एक ही source से दोनों कैसे बनाएँ?

हाथ से बने दो अलग वर्ज़न रखने के बजाय, जो समय के साथ एक-दूसरे से अलग हो जाते हैं, एक master एनिमेशन रखें और उसी से GIF render करें। After Effects में Bodymovin के ज़रिए Lottie export करें और GIF के लिए एक वीडियो render करें; Lottie Creator में उसके exports इस्तेमाल करें। फिर generated palette के साथ वीडियो को GIF में बदलें, जो डिफ़ॉल्ट conversion से कहीं बेहतर दिखता है:

ffmpeg -i loop.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" loop.gif

अगर फ़ाइल बहुत बड़ी है, तो पहले frame rate और चौड़ाई कम करें; ये दोनों किसी भी दूसरी सेटिंग से तेज़ी से GIF को छोटा करते हैं।

खास तौर पर किसी कैरेक्टर या मैस्कॉट के लिए Charmotion उल्टा रास्ता अपनाता है: आप कैरेक्टर, मैस्कॉट या लोगो अपलोड करते हैं और आमतौर पर कुछ ही मिनटों में एक Rive फ़ाइल के रूप में 17 एनिमेशन पाते हैं, साथ में हर पेड प्लान पर MP4, GIF और ट्रांसपेरेंट WebM और MOV ज़रूरत पर एक्सपोर्ट। यह Lottie फ़ाइलें नहीं बनाता, इसलिए अगर आपका प्रोडक्ट Lottie पर चलता है, तो अपनी मौजूदा पाइपलाइन रखें और GIF के लिए ऊपर का ffmpeg स्टेप इस्तेमाल करें।

17 एनिमेशन वाले एक सेट के असली फ़ाइल साइज़ का बार चार्ट: Rive 40 KB, जबकि MP4 2.6 MB, ट्रांसपेरेंट WebM 6.1 MB, GIF 8.0 MB और HEVC MOV 9.4 MB
एक असली Charmotion सेट (Pip) के फ़ाइल साइज़। वीडियो साइज़ एक 4 सेकंड के एनिमेशन के हैं।

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

क्या मैं ईमेल में Lottie एनिमेशन इस्तेमाल कर सकता हूँ?

भरोसेमंद तरीके से नहीं। ईमेल clients scripts नहीं चलाते, इसलिए Lottie फ़ाइल के लिए ज़रूरी प्लेयर लोड करने का कोई तरीका नहीं है। ईमेल के लिए एनिमेशन को GIF के रूप में एक्सपोर्ट करें, उसे छोटा और हल्का रखें, और पक्का करें कि पहला फ़्रेम अपने आप में समझ आए, क्योंकि कुछ clients सिर्फ़ वही फ़्रेम दिखाते हैं।

GIF को Lottie में कैसे बदलें?

आमतौर पर GIF को साफ़-सुथरे तरीके से Lottie में convert नहीं किया जा सकता। GIF bitmap फ़्रेम से बना होता है और Lottie वेक्टर shapes से, इसलिए convert की गई फ़ाइल फ़्रेम को सिर्फ़ इमेज के रूप में एम्बेड कर देती है और GIF की सारी सीमाएँ बनी रहती हैं। असली फ़ायदे के लिए एनिमेशन को After Effects या Lottie Creator में वेक्टर के रूप में दोबारा बनाएँ, या raster कंटेंट के लिए वीडियो फ़ॉर्मेट इस्तेमाल करें।

क्या Lottie ट्रांसपेरेंसी सपोर्ट करता है?

हाँ। Lottie players वेक्टर shapes को ट्रांसपेरेंट canvas या SVG पर बनाते हैं, इसलिए किनारे पीछे की किसी भी चीज़ के साथ anti-aliased रहते हैं। GIF में सिर्फ़ 1-bit ट्रांसपेरेंसी होती है, जिससे किनारे खुरदुरे दिखते हैं या एक्सपोर्ट के समय इस्तेमाल हुए matte color का halo दिखता है। Lottie हल्के, गहरे और gradient बैकग्राउंड पर साफ़ दिखता है।

क्या वेबसाइट की loading speed के लिए Lottie, GIF से बेहतर है?

अगर आप कई एनिमेशन दिखाते हैं तो आमतौर पर हाँ, क्योंकि वेक्टर फ़ाइलें छोटी होती हैं और एक ही player सबको चला देता है। किसी एक छोटे एनिमेशन के लिए player library का साइज़ GIF से ज़्यादा हो सकता है। फ़ाइल और player दोनों का साइज़ मापें, और आर्टवर्क raster हो तो MP4 या WebM वीडियो पर विचार करें।

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

स्रोत

संबंधित गाइड