तेज़ पृष्ठ गति के लिए एनिमेटेड GIF को वीडियो से बदलना

तेज़ पृष्ठ गति के लिए एनिमेटेड GIF को वीडियो से बदलना

एनिमेटेड जीआईएफ, किसी भी अन्य डिजिटल फ़ाइल प्रारूप से अधिक, ने ऑनलाइन उपयोगकर्ताओं के दिल और दिमाग पर कब्जा कर लिया है। लेकिन आदमी, वे अनुकूलन करने के लिए बहुत कठिन हैं!
मैंने एक बार जीआईएफ की गुणवत्ता, फ्रेम दर और लंबाई को ट्विक करने की कोशिश में एक घंटा बिताया, आखिरकार हार मान ली क्योंकि मैं जीआईएफ के बिना 2 एमबी से नीचे की फाइल को हॉट मेस की तरह नहीं पा सका।

इसमें कोई आश्चर्य की बात नहीं है कि Giphy जैसी सेवाएं स्वयं GIF फ़ाइल स्वरूप का उपयोग भी नहीं करती हैं। इसके बजाय, वे HTML5 वीडियो का उपयोग करते हैं जो अक्सर आकार में 90% छोटे होते हैं। (और मेरे मामले में, जैसा कि आप नीचे देखेंगे, आकार में 94% छोटा।)

ऐसा लग सकता है कि जीआईएफ के स्थान पर जीआईएफ के स्थान पर वीडियो का उपयोग करने के लिए एक पुलिस-आउट है जो जीआईएफ को सभी चीजों को बढ़ावा देता है, लेकिन जब आप एक बिल्ली जीआईएफ की तुलना करते हैं जो 7 एमबी आकार में वीडियो प्रारूप में ठीक उसी एनीमेशन से तुलना करता है जो केवल 147 केबी है, तो ठीक है …

gif

इस पोस्ट में, मैं आपको दिखाऊंगा कि GIF को HTML5 वीडियो में बदलना और आपकी साइट के लिए अविश्वसनीय रूप से छोटे फ़ाइल आकार प्राप्त करना कितना आसान है।

कैसे जीआईएफ पहले स्थान पर छद्म वीडियो बन गए

GIF फ़ाइल स्वरूप का कभी भी एनिमेशन या वीडियो के लिए उपयोग करने का इरादा नहीं था। वास्तव में, यह 1990 में प्रकाशित GIF89a विनिर्देश में काले और सफेद रंग में ठीक वहीं कहता है:

ग्राफ़िक्स इंटरचेंज फ़ॉर्मेट का उद्देश्य एनीमेशन के लिए एक मंच के रूप में नहीं है, भले ही इसे सीमित तरीके से किया जा सकता है।

तो हम इस ऑनलाइन दुनिया में यहाँ कैसे पहुँचे, जहाँ GIFs एनिमेशन के लिए जाने-माने प्रारूप हैं?

जीआईएफ वास्तव में एक फ़ाइल में कई छवियों को रखने के लिए डिज़ाइन किए गए थे, छवियों के लिए एक ज़िप फ़ाइल की तरह। और इसी तरह उनका उपयोग 1995 में नेटस्केप 2.0 आने तक किया गया और लूपिंग एक्सटेंशन पेश किया गया जो जीआईएफ एनिमेशन को मुफ्त में सेट करता है, जिससे उन्हें जीवन मिलता है।

उन दिनों में, इंटरनेट निर्माणाधीन था, और इसी तरह GIF भी था। नाचते हुए बच्चे और नाचते हम्सटर थे। जीआईएफ हानिरहित मज़ेदार थे क्योंकि वे सरल एनिमेशन थे, अक्सर कुछ रंगों और फ़्रेमों के साथ, उनके फ़ाइल आकार को सीमित करते थे।

आज तेजी से आगे बढ़ें—जीआईएफ के आविष्कार के 30 साल बाद—और वे अपने आप में एक कला का रूप बन गए हैं। Reddit, Twitter और Tumblr ने GIFs को लोकप्रिय बनाने में मदद की, जिससे किसी के लिए भी एनिमेटेड GIF को जल्दी से साझा करना आसान हो गया। और Giphy और Imgur जैसी सेवाओं ने GIF को जल्दी से ढूंढना और प्रतिक्रिया साझा करना पहले से कहीं ज्यादा आसान बना दिया है।

रिएक्शन जीआईएफ अब अभिव्यक्ति का एक रूप है। यदि आप मेरे जैसे हैं, तो आपने शायद शब्दों के बजाय जीआईएफ का उपयोग करके स्लैक पर एक टिप्पणी का जवाब दिया है क्योंकि अक्सर एक जीआईएफ एक भावना को व्यक्त कर सकता है – या अंदर के मजाक को ले जाने में मदद कर सकता है – शब्दों से ज्यादा।

विगल जिफ

उपयोग में मज़ेदार होने के अलावा, GIF के कई लाभ हैं:

  • ब्राउज़रों द्वारा सार्वभौमिक रूप से समर्थित
  • सार्वभौमिक रूप से समझा। जीआईएफ क्या है, सभी जानते हैं
  • उन्हें बनाने के लिए उपयोग में आसान और व्यापक रूप से उपलब्ध उपकरण
  • सामान्य वीडियो कोडेक पर लागू होने वाली कोई पेटेंट या लाइसेंस संबंधी चिंता नहीं है
  • उपयोग करने वाली साइटों में सम्मिलित करना आसान है img
  • सोशल प्लेटफॉर्म पर साझा करना आसान है

जीआईएफ! = वीडियो

2018 में जीआईएफ अब केवल साधारण छवियों का एक संग्रह नहीं है, जैसा कि वे 1995 में वापस आ गए थे। अक्सर, एनिमेटेड जीआईएफ टीवी और फिल्मों से ली गई क्लिप होती हैं – मूल रूप से, गलत प्रारूप में सहेजा गया वीडियो।

वास्तविक, वीडियो प्रारूपों के विपरीत, GIF किसी भी प्रकार की वीडियो एन्कोडिंग या संपीड़न तकनीकों का उपयोग नहीं करते हैं। तो फ्रेम दर और गुणवत्ता के आधार पर एक जीआईएफ जो केवल कुछ सेकंड लंबा होता है, आकार में कई मेगाबाइट तक तेजी से फैल सकता है।

इसके शीर्ष पर जीआईएफ में वीडियो की गुणवत्ता की कमी होती है और इसमें रंग सीमाएं और धीमी फ्रेम दर होती है।

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

GIF के बजाय HTML5 वीडियो का उपयोग करने का मामला

HTML5 से पहले, वीडियो केवल फ़्लैश जैसे प्लग-इन का उपयोग करने वाले ब्राउज़र में ही चलाए जा सकते थे। HTML5 ने वीडियो को उल्टा कर दिया, वेब पर वीडियो दिखाने का एक मानक तरीका प्रदान किया <video> उपनाम।

जबकि वीडियो को एन्कोड करने में अधिक समय लग सकता है, HTML5 GIF की तुलना में कई लाभ प्रदान करता है:

  • <वीडियो> का उपयोग करके साइटों में वीडियो डालना आसान है
  • छोटा फ़ाइल आकार
  • बेहतर प्रदर्शन
  • अधिक रंग और विवरण

तीन समर्थित HTML5 वीडियो प्रारूप हैं: MP4, WebM, और Ogg। इन तीन प्रारूपों में, MP4 सबसे व्यापक रूप से है, जिसमें 94% ब्राउज़र इस वीडियो संपीड़न प्रारूप का उपयोग करते हैं।

mpeg4 वीडियो संपीड़न

वेबएम, एक वीडियो और ऑडियो प्रारूप जिसे Google ने रॉयल्टी-मुक्त कोडेक के रूप में विकसित किया है, 79% (नीचे देखें) पर बहुत पीछे नहीं है। हालाँकि, Apple WebM का समर्थन नहीं करता है और जल्द ही ऐसा करने की संभावना नहीं है।

वेबएम वीडियो प्रारूप
ogg vorbis ऑडियो प्रारूप

अंत में, 78% ब्राउज़रों पर OGG समर्थित है। लेकिन यह भी, Apple ब्राउज़र पर उपलब्ध नहीं है।

एचटीएमएल 5 बनाम जीआईएफ

तो HTML5 वीडियो की गुणवत्ता GIF से तुलना कैसे करती है? जैसा कि हमने अब तक पता लगाया है, वीडियो प्रारूप वास्तव में वीडियो के लिए डिज़ाइन किए गए हैं। तो, जाहिर है, वे चलती छवियों को संभालने जा रहे हैं- यानी वीडियो और एनीमेशन-जीआईएफ की तुलना में बहुत बेहतर है।

गेम ऑफ थ्रोन्स से एनिमेटेड जीआईएफ का यह उदाहरण देखें:

तेज़ पृष्ठ गति के लिए एनिमेटेड GIF को वीडियो से बदलना

यह आकार में 2 एमबी के रूप में आता है। यह एक एनीमेशन के लिए बहुत बड़ा है जिसकी लंबाई मुश्किल से 3 सेकंड है।

अब, यहाँ एक MP4 वीडियो है जिसे मैंने उपरोक्त GIF फ़ाइल से परिवर्तित किया है:

एनिमेटेड GIFs को HTML5 वीडियो में कनवर्ट करना

ऐसे कई तरीके हैं जिनसे आप जीआईएफ को वीडियो में बदल सकते हैं, जिसमें ezgif.com जैसे मुफ्त ऑनलाइन टूल शामिल हैं, लेकिन इस ट्यूटोरियल में, मैं आपको दिखाना चाहता हूं कि एफएफएमपीईजी का उपयोग कैसे करें। यह मुफ़्त ओपन-सोर्स कमांड-लाइन टूल वीडियो, ऑडियो और अन्य मल्टीमीडिया फ़ाइलों और स्ट्रीम को संभालता है, और इसका उपयोग एनिमेटेड GIF को MP4, WebM और OGG सहित वीडियो प्रारूपों में बदलने के लिए भी किया जा सकता है।

यदि आपके पास पहले से ही FFmpeg संस्थापित है, तो बस टर्मिनल चालू करें और ffmpeg आज्ञा। यह स्थापित है, आपको कुछ नैदानिक ​​जानकारी दिखाई देगी। यदि यह स्थापित नहीं है और आपको एक त्रुटि संदेश दिखाई देता है, तो आपको इसे स्थापित करने की आवश्यकता होगी:

इंस्टॉल हो जाने के बाद, वह GIF ढूंढें जिसे आप वीडियो में बदलना चाहते हैं। इस उदाहरण के लिए, मैं GIF को MP4 में बदलने जा रहा हूं, क्योंकि MP4 सबसे व्यापक रूप से समर्थित वीडियो प्रारूप है।

एक टर्मिनल विंडो खोलें, अपनी GIF वाली निर्देशिका में बदलें, और निम्न आदेश दर्ज करें:

ffmpeg -i input.gif output.mp4

GIF को MP4 में बदलने के लिए यह सबसे बुनियादी सिंटैक्स है। -i इनपुट निर्दिष्ट करता है (इस मामले में, input.gif), और आउटपुट फ़ाइल का नाम बाद में रखा गया है (इस मामले में, output.mp4)।

यदि आप इस गाइड के साथ अनुसरण कर रहे हैं, तो जब आप इस आदेश को दर्ज करते हैं, तो आपको अपनी निर्देशिका में एक नई फ़ाइल, output.mp4, जादुई रूप से दिखाई देनी चाहिए।

FFmpeg ढेर सारे विकल्पों के साथ आता है, जिनका उपयोग आप वीडियो आउटपुट को बेहतर बनाने के लिए कर सकते हैं। जब वीडियो की गुणवत्ता उच्च प्राथमिकता हो तो ऐसा ही एक विकल्प लगातार दर कारक (सीआरएफ) नामक एक एन्कोडिंग मोड को नियोजित कर रहा है:

ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4

यह कमांड का उपयोग करता है -b:v flagजो आम तौर पर आउटपुट बिटरेट को सीमित करेगा, लेकिन जब सीआरएफ मोड के साथ प्रयोग किया जाता है तो इसे 0 पर सेट किया जाना चाहिए -crf 0 और 51 के बीच मान स्वीकार करता है; कम मूल्य, उच्च गुणवत्ता और बड़ा फ़ाइल आकार।

इस आदेश का उपयोग करते हुए, मैंने गेम ऑफ थ्रोन्स GIF को तीसरी बार चलाया, और यह एक MP4 फ़ाइल 111 KB आकार में आउटपुट करता है, जिसकी गुणवत्ता में कोई ध्यान देने योग्य गिरावट नहीं है। यह आकार में 94% की कमी या मूल फ़ाइल आकार का 6% है।

प्रयोग करने लायक एक और विकल्प है movflags, जो MP4 फ़ाइल की संरचना का अनुकूलन करता है। आमतौर पर, MP4 फ़ाइलों में फ़ाइल के अंत में संग्रहीत सभी मेटाडेटा होते हैं, और -movflags faststart आप इसे तेजी से लोड करने के लिए प्रारंभ में ले जा सकते हैं:

ffmpeg -i input.gif -movflags faststart output.mp4

वीडियो आउटपुट को अनुकूलित करने के लिए बहुत अधिक विकल्प हैं। अधिक विवरण के लिए FFmpeg प्रारूप दस्तावेज़ देखें।

HTML5 वीडियो के साथ GIF की जगह

किसी वेबपेज में GIF डालना बेहद आसान है—आपको बस इसे उसी तरह अपलोड करना है जैसे आप कोई इमेज फ़ाइल करते हैं। सौभाग्य से, का उपयोग कर <video> टैग भी सीधा है। आपको बस तीन बातों का ध्यान रखना है:

  1. जीआईएफ स्वचालित रूप से खेलते हैं
  2. जीआईएफ लगातार लूप करता है
  3. जीआईएफ में आवाज नहीं होती है

जब आप अपनी साइट पर GIF जोड़ रहे हों, तो आपको इन लक्षणों के बारे में चिंता करने की आवश्यकता नहीं है क्योंकि। जीआईएफ बस … काम करते हैं। लेकिन जब आप अपनी साइट पर एक वीडियो जोड़ रहे हैं जिसे आप GIF की तरह व्यवहार करना चाहते हैं, तो आपको इन व्यवहारों को ध्यान में रखना होगा।

अपनी साइट में GIF जोड़ने के लिए आप इसके समान HTML मार्कअप का उपयोग करेंगे:

< img src="https://wp-rocket.me/blog/replacing-animated-gifs-with-html5-video-for-faster-page-speed/cat.gif" alt="" width="400" height="300" />

एक वीडियो सम्मिलित करने के लिए, आप उपरोक्त को इसके साथ बदल देंगे:

< video autoplay loop muted playsinline >
< source src="https://wp-rocket.me/blog/replacing-animated-gifs-with-html5-video-for-faster-page-speed/cat.mp4" type="video/mp4" >
</video>

आपको कुछ विशेषताएँ दिखाई देंगी: autoplay वीडियो को स्वचालित रूप से चलने के लिए कहता है, जबकि loop वीडियो लूप को लगातार सुनिश्चित करता है। muted विशेषता किसी भी ध्वनि को बंद कर देती है, लेकिन वीडियो के ऑटोप्ले के लिए भी मौजूद होनी चाहिए, भले ही उनके पास ऑडियो न हो। आईओएस उपकरणों पर, playsinline काम करने के लिए ऑटोप्ले के लिए भी आवश्यक है।

निष्कर्ष

GIF को किसी भी वेब पेज में जोड़ना बेहद आसान है—बस अपलोड करें और उन्हें किसी भी अन्य छवि की तरह मानें। लेकिन वे एनीमेशन और वीडियो प्रदर्शित करने के लिए एक भयानक प्रारूप हैं और आमतौर पर आकार में बड़े होते हैं। जब आप अपनी साइट को अनुकूलित करने और इसके प्रदर्शन को बेहतर बनाने का प्रयास कर रहे हैं, तो GIF केवल आपके पृष्ठ की गति को नीचे खींचेंगे।

HTML5 वीडियो बिना ब्लोट के आपकी साइट पर GIF-जैसे एनिमेशन जोड़ने का एक सुव्यवस्थित तरीका प्रदान करता है। उपरोक्त स्निपेट्स का उपयोग करके, आप GIFs को MP4 और आउटपुट फ़ाइलों में परिवर्तित कर सकते हैं जो मूल का केवल 6% हैं! और गुणवत्ता में कोई ध्यान देने योग्य हानि के साथ।

यदि आप अपने वेब प्रदर्शन को बेहतर बनाने के बारे में अधिक जानना चाहते हैं, तो वर्डप्रेस के लिए कोर वेब विटल्स के लिए हमारी गाइड देखें और जानें कि उन्हें कैसे अनुकूलित किया जाए!



तेज़ पृष्ठ गति के लिए एनिमेटेड GIF को वीडियो से बदलना तेज़ पृष्ठ गति के लिए एनिमेटेड GIF को वीडियो से बदलना

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *