झटपट जवाब
अपना GIF बॉक्स में डालें, अगर वीडियो वेब पेज पर लूप होगा तो ‘Once’ रहने दें, पारदर्शी हिस्सों के लिए बैकग्राउंड और चाहें तो अधिकतम साइज़ चुनें, फिर Convert to WebM दबाएँ। एनिमेशन हर फ़्रेम की मूल टाइमिंग के साथ VP9 वीडियो के रूप में री-एन्कोड होता है, जिससे वह आम तौर पर GIF से कहीं हल्का हो जाता है — वेबसाइट पर GIF बदलकर पेज लोड तेज़ करने के लिए बिल्कुल सही।
वेबसाइट को GIF क्यों बदलने चाहिए
एनिमेटेड GIF वेब पर हर जगह हैं — प्रोडक्ट डेमो, ट्यूटोरियल, रिएक्शन इमेज, लोडिंग एनिमेशन और हीरो ग्राफ़िक्स। लेकिन हलचल सेव करने का GIF बेहद अकुशल तरीका है: हर फ़्रेम अलग 256-रंग की इमेज है जिसमें साधारण कंप्रेशन होता है, इसलिए छोटा, सरल एनिमेशन भी आसानी से कई मेगाबाइट का हो सकता है। धीमे मोबाइल कनेक्शन पर यह बाकी पेज को रोकता है, विज़िटर का डेटा खाता है और सर्च इंजन जिन लोडिंग मैट्रिक्स को देखते हैं उन्हें नुकसान पहुँचा सकता है।
वीडियो कोडेक ठीक इसी काम के लिए बने हैं। VP9 वाली WebM पहला फ़्रेम सेव करती है और फिर सिर्फ़ बदलाव, जिससे वही एनिमेशन आम तौर पर कई गुना छोटा और बेहतर रंगों वाला हो जाता है। इसी वजह से ब्राउज़र बनाने वाले अपनी परफ़ॉर्मेंस गाइड में लंबे समय से बड़े GIF की जगह वीडियो लगाने की सलाह देते आए हैं। यह GIF से WebM कन्वर्टर (GIF से WebM) कन्वर्ज़न आपके ब्राउज़र में करता है और एनिमेशन की सटीक टाइमिंग बनाए रखता है।
इसे कैसे इस्तेमाल करें
- अगर वीडियो वेब पेज पर लूप होगा (लूपिंग पेज करता है), तो एनिमेशन चलाएँ के तहत “Once” चुनें। दोहराव का विकल्प सिर्फ़ उन प्लेटफ़ॉर्म के लिए चुनें जो लूप नहीं करते।
- पारदर्शी हिस्सों के लिए बैकग्राउंड चुनें — हल्के पेज के लिए सफ़ेद, गहरे पेज के लिए काला।
- अगर GIF आपके पेज पर दिखने वाली चौड़ाई से ज़्यादा चौड़ा है, तो अधिकतम साइज़ तय करें।
- GIF डालें। टाइल्स उसका साइज़, आयाम, फ़्रेम की संख्या और लूप की लंबाई दिखाती हैं।
- Convert to WebM दबाएँ, नतीजे का प्रीव्यू देखें और उसे डाउनलोड करें। नतीजे वाले कार्ड में GIF के साथ WebM का साइज़ दिखता है।
WebM को GIF की तरह चलाने के लिए एम्बेड करना
<img> टैग में GIF अपने आप चलता है, लूप होता है और उसमें आवाज़ नहीं होती। वीडियो भी चार एट्रिब्यूट से वही कर सकता है:
<video autoplay loop muted playsinline width="480" height="270" poster="demo.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
</video>- autoplay इसे बिना क्लिक के शुरू करता है — ब्राउज़र यह तभी चलने देते हैं जब वीडियो muted हो।
- loop इसे GIF की तरह हमेशा दोहराता है।
- playsinline iPhone को इसे फ़ुल-स्क्रीन में खोलने से रोकता है।
- width / height जगह रिज़र्व करते हैं और लोड होते समय लेआउट खिसकने से रोकते हैं।
- poster पहला फ़्रेम आने से पहले तुरंत एक इमेज दिखाता है।
दूसरे सोर्स के रूप में MP4 जोड़ने से पुराने Apple डिवाइस को चलने लायक वर्शन मिल जाता है; उसे हमारे GIF से MP4 टूल से बनाएँ।
सटीक टाइमिंग, पूरे फ़्रेम
कई GIF जगह बचाने के लिए हर फ़्रेम का सिर्फ़ वही हिस्सा सेव करते हैं जो बदलता है, और हर फ़्रेम की अपनी देरी हो सकती है। कन्वर्टर आपके ब्राउज़र के बिल्ट-इन ImageDecoder से हर पूरा फ़्रेम ठीक वैसे दोबारा बनाता है जैसा GIF चलने पर दिखता है, फिर वीडियो में हर फ़्रेम को उसकी मूल अवधि देता है। इसलिए ठहराव, स्पीड में बदलाव और रुकाव सब बने रहते हैं। ब्राउज़र की तरह, 20 मिलीसेकंड से कम की देरी को 100 मिलीसेकंड माना जाता है — यानी वही स्पीड जो लोग GIF देखते समय असल में देखते हैं।
GIF बनाम WebM बनाम MP4 बनाम APNG
| फ़ॉर्मेट | फ़ाइल साइज़ | रंग | पारदर्शिता | सबसे अच्छा इस्तेमाल |
|---|---|---|---|---|
| GIF | बड़ा | हर फ़्रेम में 256 | सिर्फ़ चालू/बंद | हर जगह चलने वाला फ़ॉलबैक |
| WebM (VP9) | बहुत छोटा | पूरे रंग | इस टूल में नहीं | वेबसाइट और वेब ऐप |
| MP4 (H.264) | स्मॉल | पूरे रंग | नहीं | सोशल मीडिया, पुराने डिवाइस के लिए फ़ॉलबैक |
| APNG | बड़ा (लॉसलेस) | पूरे रंग | स्मूद अल्फ़ा | पारदर्शिता चाहने वाले छोटे UI एनिमेशन |
पारदर्शिता के बिना ज़्यादातर वेब एनिमेशन के लिए MP4 फ़ॉलबैक के साथ WebM सबसे छोटी फ़ाइलें देती है। जिन छोटे एनिमेटेड आइकन को किसी भी बैकग्राउंड पर घुल-मिल जाना है, उनके लिए APNG पर विचार करें।
सही साइज़ चुनना
कई GIF उससे बड़े एक्सपोर्ट होते हैं जितने वे कभी दिखाए जाते हैं। अगर एनिमेशन 640 पिक्सल चौड़े कंटेंट कॉलम में दिखता है, तो 1200 पिक्सल का GIF ज़्यादातर बाइट्स बर्बाद करता है। एनिमेशन जिस सबसे बड़े साइज़ पर दिखेगा उसके क़रीब का अधिकतम साइज़ चुनें — हाई-डेंसिटी स्क्रीन को ध्यान में रखें तो दिखाई जाने वाली चौड़ाई का लगभग दोगुना काफ़ी है। कन्वर्टर एनिमेशन को कभी बड़ा नहीं करता, और आयाम सम रखता है, जैसा वीडियो एन्कोडर को चाहिए।
GIF का इस्तेमाल कब जारी रखें
GIF का अब भी एक बड़ा फ़ायदा है: यह लगभग हर उस जगह चलता है जहाँ इमेज चलती है। ईमेल न्यूज़लेटर इसका क्लासिक उदाहरण हैं — ज़्यादातर ईमेल ऐप एम्बेड किया वीडियो नहीं चलाते, इसलिए वहाँ एक छोटा, ऑप्टिमाइज़ किया GIF ही व्यावहारिक विकल्प रहता है। कुछ चैट ऐप, फ़ोरम और पुराने कंटेंट मैनेजमेंट सिस्टम भी सिर्फ़ इमेज लेते हैं। अपनी वेबसाइट और वेब ऐप में, जहाँ HTML आपके हाथ में है, WebM इस्तेमाल करें, और GIF वहाँ रखें जहाँ वीडियो नहीं चल सकता।
सुधार को मापना
अपने पेज पर असर देखने के लिए ब्राउज़र के डेवलपर टूल्स खोलें, Network पैनल में जाएँ और रीलोड करें: पुराने GIF और नए WebM का ट्रांसफ़र साइज़ तुलना करें। Lighthouse और PageSpeed Insights अक्सर बड़ी एनिमेटेड सामग्री को चिह्नित करके एनिमेशन के लिए वीडियो फ़ॉर्मैट इस्तेमाल करने का सुझाव देते हैं; GIF बदलने के बाद रिपोर्ट दोबारा चलाएँ। सबसे बड़ा फ़ायदा पेज के ऊपरी हिस्से के सबसे बड़े GIF बदलने से मिलता है, क्योंकि पेज पहली बार लोड होते समय वे बाकी कंटेंट से बैंडविड्थ के लिए होड़ करते हैं।
दूसरे प्लेटफ़ॉर्म के लिए दोहराव के विकल्प
अपनी साइट पर loop एट्रिब्यूट वीडियो को हमेशा दोहराता है, इसलिए एक बार के साथ कन्वर्ट करें। लेकिन कुछ प्लेटफ़ॉर्म अपलोड किए वीडियो को सिर्फ़ एक बार चलाते हैं। उनके लिए 3 बार या कम से कम 10 सेकंड तक चुनें: कन्वर्टर फ़ाइल के अंदर पूरे लूप दोहराता है, एनिमेशन को बीच में कभी नहीं काटता, और कारगर वीडियो कंप्रेशन की वजह से फ़ाइल फिर भी GIF से काफ़ी छोटी रहती है।
इन्फ़ो टाइल्स क्या बताती हैं
GIF जोड़ने के बाद कन्वर्टर उसका फ़ाइल साइज़, आयाम, फ़्रेम की संख्या और लूप की लंबाई दिखाता है। सैकड़ों फ़्रेम वाला या बहुत चौड़ा GIF कन्वर्ट करने का सबसे अच्छा उम्मीदवार है — यही फ़ाइलें सबसे भारी होती हैं। लूप की लंबाई यह भी बताती है कि “until 5 seconds” या “until 10 seconds” विकल्प कितने दोहराव जोड़ेंगे।
आम उपयोग
- लैंडिंग पेज और डॉक्यूमेंटेशन पर प्रोडक्ट और फ़ीचर डेमो।
- ब्लॉग, नॉलेज बेस और हेल्प सेंटर में ट्यूटोरियल के स्टेप, जहाँ एक पेज पर अक्सर कई एनिमेशन होते हैं।
- पेज के ऊपर हीरो एनिमेशन और सजावटी लूप, जहाँ हर किलोबाइट विज़िटर को पहली स्क्रीन दिखने की स्पीड पर असर डालता है।
- छोटी निर्देशात्मक क्लिप दिखाने वाले वेब ऐप और डैशबोर्ड।
- ईमेल से वेब लैंडिंग पेज जहाँ पेज का वज़न मायने रखता है।
- मोशन डिज़ाइन, UI एनिमेशन और इलस्ट्रेशन का काम दिखाने वाली पोर्टफ़ोलियो साइट, गैलरी को धीमा किए बिना।
हल किया गया उदाहरण
एक SaaS लैंडिंग पेज पर प्रोडक्ट का 6 सेकंड का स्क्रीन-कैप्चर GIF feature-demo.gif है, 1000×600 पिक्सल और 9.2 MB — पेज की सबसे भारी फ़ाइल। कंटेंट कॉलम 700 पिक्सल चौड़ा है। एक बार, सफ़ेद बैकग्राउंड चुनें और GIF जैसा ही रखें — 1000 पिक्सल पहले ही 700-पिक्सल कॉलम के दोगुने के भीतर है, इसलिए हाई-डेंसिटी स्क्रीन पर तस्वीर साफ़ रहती है — फिर कन्वर्ट करें। WebM में छह सेकंड की वही टाइमिंग वाली हलचल रहती है और वह 9.2 MB का एक छोटा-सा हिस्सा होती है। इसे autoplay loop muted playsinline और पोस्टर इमेज के साथ एम्बेड करने से पेज साफ़ तौर पर तेज़ लोड होता है।
एक्सेसिबिलिटी और यूज़र की सहूलियत
लूप होती हलचल कुछ विज़िटर का ध्यान भटका सकती है या उन्हें असहज कर सकती है। वीडियो में GIF से ज़्यादा कंट्रोल मिलता है: आप controls एट्रिब्यूट जोड़ सकते हैं ताकि लोग उसे रोक सकें, जिन यूज़र ने अपने ऑपरेटिंग सिस्टम में “reduce motion” सेट किया है उन्हें स्थिर पोस्टर दिखा सकते हैं (prefers-reduced-motion मीडिया क्वेरी से), और स्क्रीन-रीडर यूज़र के लिए एनिमेशन के पास टेक्स्ट विवरण दे सकते हैं। इमेज टैग में GIF इनमें से कोई विकल्प नहीं देते, और यह बदलने की एक और वजह है।
बनावट से निजी
अनरिलीज़्ड प्रोडक्ट डेमो और क्लाइंट का काम आपकी मशीन पर ही रहता है। GIF को आपका ब्राउज़र डिकोड करता है और WebM को WebCodecs और ओपन-सोर्स Mediabunny लाइब्रेरी से लोकल रूप से एन्कोड किया जाता है — कोई अपलोड, वॉटरमार्क या साइन-अप नहीं।
समस्या-समाधान
- “This browser cannot read GIF animation frames”: सबसे नया Chrome, Edge या Firefox इस्तेमाल करें, जो ImageDecoder सपोर्ट करते हैं।
- “Your browser cannot encode WEBM video”: कंप्यूटर पर सबसे नया Chrome या Edge इस्तेमाल करें।
- वीडियो पेज पर ऑटोप्ले नहीं होता: पक्का करें कि वह
mutedहै; ब्राउज़र आवाज़ वाले ऑटोप्ले को रोक देते हैं। - iPhone पर फ़ुल-स्क्रीन में चलता है:
playsinlineजोड़ें। - जहाँ GIF पारदर्शी था वहाँ रंगीन धब्बे: बैकग्राउंड का रंग अपने पेज से मिलाकर बदलें, या APNG इस्तेमाल करें।
सुझाव
- फ़ोल्ड के नीचे के वीडियो को लेज़ी-लोड करें
preload="none"के साथ, और उन्हें तब शुरू करें जब वे स्क्रॉल करके दिखने लगें। - अपनी दूसरी इमेज भी कंप्रेस करें इमेज कंप्रेसर से।
- असली वीडियो क्लिप बदलनी हैं? MP4 से WebM इस्तेमाल करें।
किसी भी डिवाइस पर काम करता है
कन्वर्ज़न के लिए ImageDecoder और WebCodecs वाला ब्राउज़र चाहिए — मौजूदा डेस्कटॉप Chrome और Edge सबसे भरोसेमंद हैं। बनी हुई WebM सभी आधुनिक ब्राउज़र में चलती है।
संक्षिप्त शब्दावली
- WebM: एक ओपन वेब वीडियो फ़ॉर्मैट।
- VP9: WebM में इस्तेमाल होने वाला कारगर ओपन वीडियो कोडेक।
- Autoplay: बिना क्लिक के वीडियो शुरू करना; म्यूट होने पर ही मंज़ूर।
- Poster: वीडियो शुरू होने से पहले दिखने वाली स्थिर इमेज।
यह कन्वर्टर क्यों इस्तेमाल करें?
यह भारी GIF को सटीक टाइमिंग के साथ हल्के VP9 वीडियो में बदलता है, उसे GIF की तरह इस्तेमाल करने का एम्बेड पैटर्न देता है, और आपकी फ़ाइलें कभी अपलोड नहीं करता — मुफ़्त। मिलते-जुलते टूल्स: GIF से MP4, GIF से APNG और MP4 से WebM।
GIF से WebM कन्वर्टर — मुख्य बातें
| इनपुट | एनिमेटेड GIF, 100 MB तक |
|---|---|
| आउटपुट | WebM (VP9, VP8 फ़ॉलबैक) |
| टाइमिंग | हर फ़्रेम की देरी बनी रहती है |
| किसके लिए सबसे अच्छा | वेबसाइट और वेब ऐप |
| आम साइज़ | GIF से काफ़ी छोटा |
| निजता | आपके ब्राउज़र में चलता है |
अक्सर पूछे जाने वाले सवाल
GIF को WebM में कैसे बदलूँ?
अपने विकल्प चुनें, GIF को बॉक्स में डालें और Convert to WebM दबाएँ। नतीजे का प्रीव्यू देखें और उसे डाउनलोड करें।
वेबसाइट पर GIF की जगह WebM क्यों लगाएँ?
एनिमेटेड GIF बहुत भारी होते हैं। उसी एनिमेशन का WebM वीडियो आम तौर पर कहीं छोटा होता है, इसलिए पेज तेज़ लोड होते हैं और मोबाइल डेटा कम लगता है।
WebM को GIF की तरह लूप कैसे कराऊँ?
इसे autoplay, loop, muted और playsinline एट्रिब्यूट के साथ HTML5 video एलिमेंट में एम्बेड करें। ‘Once’ के साथ कन्वर्ट करें, क्योंकि लूपिंग पेज संभालता है।
यह कौन-सा कोडेक इस्तेमाल करता है?
VP9, WebM में इस्तेमाल होने वाला कारगर ओपन कोडेक। अगर आपका ब्राउज़र VP9 एन्कोड नहीं कर सकता, तो यह VP8 या AV1 पर आ जाता है।
क्या एनिमेशन की स्पीड वही रहती है?
हाँ। हर फ़्रेम अपनी मूल देरी बनाए रखता है; 20 ms से कम की देरी को 100 ms माना जाता है, ठीक वैसे जैसे ब्राउज़र GIF दिखाते हैं।
पारदर्शी GIF का क्या होता है?
यह कन्वर्टर पारदर्शी हिस्सों को सफ़ेद या काले से भर देता है। जिन एनिमेशन को पारदर्शिता चाहिए, उनके लिए APNG बेहतर विकल्प है — हमारा GIF से APNG टूल आज़माएँ।
क्या सभी ब्राउज़र WebM चलाते हैं?
सभी आधुनिक डेस्कटॉप और Android ब्राउज़र चलाते हैं, और अप-टू-डेट macOS व iOS पर हाल का Safari भी। ज़्यादा से ज़्यादा लोगों तक पहुँचने के लिए MP4 फ़ॉलबैक भी दें (GIF से MP4 देखें)।
क्या इससे Core Web Vitals में मदद मिलेगी?
छोटा मीडिया आम तौर पर लोडिंग परफ़ॉर्मेंस सुधारता है। बड़े GIF की जगह कॉम्पैक्ट वीडियो लगाना एक व्यापक रूप से सुझाया जाने वाला ऑप्टिमाइज़ेशन है।
कौन-से ब्राउज़र कन्वर्ट कर सकते हैं?
सबसे नया Chrome या Edge सबसे अच्छा चलता है; ब्राउज़र में ImageDecoder और WebCodecs होने चाहिए।
साइज़ की सीमा क्या है?
100 MB और 1000 फ़्रेम तक के GIF।
क्या मेरी फ़ाइलें अपलोड होती हैं?
नहीं। सब कुछ आपके ब्राउज़र में होता है।
क्या यह मुफ़्त है?
हाँ, पूरी तरह मुफ़्त और बिना वॉटरमार्क।
GIF से हल्का!
तेज़ पेज के लिए VP9 WebM — मुफ़्त और निजी।
Prompt Minds के और टूल्स देखें
GIF से WebM कन्वर्टर हमारे दूसरे मुफ़्त टूल्स के साथ बढ़िया काम करता है। Prompt Minds का हर टूल पूरी तरह आपके ब्राउज़र में चलता है — न साइन-अप, न अपलोड, न वॉटरमार्क। सभी मुफ़्त टूल्स देखें।