क्या आपने कभी Imgur या Gfycat जैसी किसी सेवा पर ऐनिमेशन वाला GIF देखा है? क्या आपने उसे अपने डेवलपर टूल में देखा है? क्या आपको पता चला है कि वह GIF असल में एक वीडियो था? इसकी एक वजह है. ऐनिमेशन वाले GIF का साइज़ बहुत बड़ा हो सकता है.
अच्छी बात यह है कि लोडिंग परफ़ॉर्मेंस के इस पहलू को बेहतर बनाने के लिए, आपको ज़्यादा मेहनत नहीं करनी पड़ेगी! बड़े GIF को वीडियो में बदलकर, उपयोगकर्ताओं के बैंडविथ को बचाया जा सकता है.
पहले मेज़रमेंट करें
लाइटहाउस का इस्तेमाल करके, अपनी साइट पर ऐसे GIF ढूंढें जिन्हें वीडियो में बदला जा सकता है. DevTools में, Audits टैब पर क्लिक करें और Performance चेकबॉक्स पर सही का निशान लगाएं. इसके बाद, Lighthouse चलाएं और रिपोर्ट देखें. अगर आपके पास कोई ऐसा GIF है जिसे बदला जा सकता है, तो आपको "ऐनिमेटेड कॉन्टेंट के लिए वीडियो फ़ॉर्मैट इस्तेमाल करें" सुझाव दिखेगा:
MPEG वीडियो बनाना
GIF को वीडियो में बदलने के कई तरीके हैं. इस गाइड में, FFmpeg टूल का इस्तेमाल किया गया है.
GIF को MP4 वीडियो में बदलने के लिए, FFmpeg का इस्तेमाल करें. इसके लिए, अपनी कंसोल में यह कमांड चलाएं:my-animation.gif
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 पिक्सल गुणा 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 केबी और 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> आम तौर पर बड़े होते हैं. इसलिए, इन्हें डाउनलोड होने में ज़्यादा समय लगता है. किसी दूसरे एलसीपी कैंडिडेट पर स्विच करने से, साइट के एलसीपी में भी सुधार हो सकता है.