तेज़ी से पेज लोड करने के लिए, ऐनिमेशन वाले GIF की जगह वीडियो का इस्तेमाल करें

जेरेमी वैगनर
जेरेमी वैगनर

क्या आपने कभी वीडियाे गुर या Gfycat जैसी सेवा पर कोई ऐनिमेटेड GIF देखा है और अपने डेवलपर टूल में उसकी जांच की है, ताकि आपको पता चल पाए कि GIF वाकई में एक वीडियो था? यह एक अच्छी वजह है. ऐनिमेशन वाले GIF, पूरी तरह गहरा हो सकते हैं.

DevTools नेटवर्क पैनल, जिसमें 13.7 एमबी का GIF दिख रहा है.

अच्छी बात यह है कि यह लोडिंग परफ़ॉर्मेंस के उन क्षेत्रों में से एक है, जहां बड़े फ़ायदे पाने के लिए आप बहुत कम काम कर सकते हैं! बड़े GIF को वीडियो में बदलकर, उपयोगकर्ताओं के बैंडविथ पर बड़ी बचत की जा सकती है.

पहले मापें

लाइटहाउस की मदद से अपनी साइट पर ऐसे GIF देखें जिन्हें वीडियो में बदला जा सकता है. DevTool में, 'ऑडिट' टैब पर क्लिक करें और 'परफ़ॉर्मेंस' चेकबॉक्स को चुनें. इसके बाद, Lighthouse चलाएं और रिपोर्ट देखें. अगर आपके पास ऐसे GIF हैं जिन्हें बदला जा सकता है, तो आपको "ऐनिमेट किए गए कॉन्टेंट के लिए वीडियो फ़ॉर्मैट इस्तेमाल करें" का सुझाव दिखेगा:

लाइटहाउस ऑडिट नहीं हो सका. ऐनिमेशन वाले कॉन्टेंट के लिए, वीडियो फ़ॉर्मैट इस्तेमाल करें.

MPEG वीडियो बनाएं

GIF को वीडियो में बदलने के कई तरीके हैं. FFmpeg एक टूल है, जिसका इस्तेमाल इस गाइड में किया गया है. GIF को बदलने के लिए FFmpeg का इस्तेमाल करने के लिए, my-animation.gif को MP4 वीडियो में बदलने के लिए, अपने कंसोल में नीचे दिया गया कमांड चलाएं:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

यह FFmpeg को my-animation.gif को इनपुट के तौर पर लेने, -i फ़्लैग से दिखाने, और उसे my-animation.mp4 नाम के वीडियो में बदलने के लिए कहता है.

libx264 एन्कोडर सिर्फ़ उन फ़ाइलों के साथ काम करता है जिनमें एक जैसे डाइमेंशन होते हैं, जैसे कि 320 पिक्सल x 240 पिक्सल. अगर इनपुट GIF के डाइमेंशन का डाइमेंशन अजीब है, तो 'ऊंचाई/चौड़ाई को 2 से भाग नहीं दिया जा सकता' गड़बड़ी से FFmpeg रोकने के लिए, आप क्रॉप फ़िल्टर शामिल कर सकते हैं:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

WebM वीडियो बनाएं

MP4, साल 1999 से इस्तेमाल किया जा रहा है, लेकिन WebM एक नया फ़ाइल फ़ॉर्मैट है जिसे शुरुआती तौर पर 2010 में रिलीज़ किया गया था. WebM वीडियो, MP4 वीडियो की तुलना में काफ़ी छोटे होते हैं, लेकिन सभी ब्राउज़र पर WebM काम नहीं करता, इसलिए दोनों को जनरेट करना बेहतर होता है.

my-animation.gif को WebM वीडियो में बदलने के लिए FFmpeg का इस्तेमाल करने के लिए, अपने कंसोल में यह कमांड चलाएं:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

अंतर की तुलना करें

GIF और वीडियो के बीच पैसे की बचत काफ़ी हो सकती है.

फ़ाइल के साइज़ की तुलना में यह तुलना की जा रही है कि GIF के लिए 3.7 एमबी, mp4 के लिए 551 केबी, और वेबम के लिए 341 केबी है.

इस उदाहरण में, शुरुआत का GIF 3.7 एमबी का है, जो कि 551 केबी वाले MP4 वर्शन और WebM वर्शन यानी सिर्फ़ 341 केबी का है!

GIF की जगह पर कोई वीडियो अपलोड करें

ऐनिमेशन वाले GIF की तीन खास बातें, किसी वीडियो में कॉपी करना ज़रूरी होती हैं:

  • वे अपने-आप चलते हैं.
  • वे लगातार लूप में रहते हैं (आम तौर पर, लेकिन लूपिंग को रोका जा सकता है).
  • वे चुप हैं.

अच्छी बात यह है कि <video> एलिमेंट का इस्तेमाल करके, ये व्यवहार फिर से बनाए जा सकते हैं.

<video autoplay loop muted playsinline></video>

इन एट्रिब्यूट वाला <video> एलिमेंट अपने-आप चलता है, बार-बार लूप में चलता है, ऑडियो के बिना चलता है, और इनलाइन (फ़ुल स्क्रीन नहीं) चलता है. ऐनिमेशन वाले GIF से वे सभी चीज़ें होती हैं जिनकी उम्मीद की जाती है! 🎉

आखिर में, <video> एलिमेंट को एक या ज़्यादा <source> चाइल्ड एलिमेंट की ज़रूरत होती है. ये ऐसे अलग-अलग वीडियो फ़ाइलों पर ले जाते हैं जिन्हें ब्राउज़र चुन सकता है. यह ब्राउज़र के फ़ॉर्मैट पर निर्भर करता है. WebM और MP4, दोनों उपलब्ध कराएं, ताकि अगर कोई ब्राउज़र WebM पर काम नहीं करता, तो वह वापस MP4 पर काम कर सके.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर होने वाला असर

ध्यान रखें कि <img> एलिमेंट, एलसीपी के लिए इस्तेमाल होते हैं, लेकिन बिना poster इमेज वाले <video> एलिमेंट एलसीपी उम्मीदवार नहीं हैं. ऐनिमेशन वाले GIF एम्युलेट करने के मामले में, यह हल है कि आप अपने <video> एलिमेंट में poster एट्रिब्यूट नहीं जोड़ें. ऐसा करने पर, इमेज का इस्तेमाल नहीं होगा.

आपकी वेबसाइट पर इसका क्या असर होगा? हमारी सलाह है कि आप ऐनिमेशन वाले GIF के बजाय <video> का इस्तेमाल करें. हालांकि, यह ध्यान में रखें कि ऐसे मीडिया को एलसीपी के लिए इस्तेमाल नहीं किया जाएगा और इसकी जगह अगले सबसे बड़े उम्मीदवार का इस्तेमाल किया जाएगा. आम तौर पर, GIF और <video> बड़े होते हैं और डाउनलोड होने में बहुत ज़्यादा समय लगता है, इसलिए किसी दूसरे एलसीपी कैंडिडेट का इस्तेमाल करने से साइट की एलसीपी भी बेहतर हो सकती है.