क्या आपने कभी Imger या Gfycat जैसी सेवा पर ऐनिमेशन वाले GIF देखे हैं अपने डेवलपर टूल में दी है, तो पता लगाना है कि क्या GIF एक वीडियो था? कई की अच्छी वजह दी है. ऐनिमेशन वाले GIF, बड़े हो सकते हैं.
अच्छी बात यह है कि लोड होने की परफ़ॉर्मेंस से जुड़ी यह एक अहम भूमिका है, जहां बहुत कम मेहनत लगती है और बड़े फ़ायदे हासिल करने में मदद मिलती है! बड़े GIF को इस फ़ॉर्मैट में बदलकर तो आप बड़ी बचत कर सकते हैं. बैंडविथ.
पहले मापें
लाइटहाउस का इस्तेमाल करके, अपनी साइट पर उन GIF को देखें जिन्हें वीडियो में बदला जा सकता है. तय सीमा में DevTools के तौर पर, ऑडिट टैब पर क्लिक करें और परफ़ॉर्मेंस चेकबॉक्स पर सही का निशान लगाएं. इसके बाद, चलाएं लाइटहाउस पर जाएं और रिपोर्ट देखें. अगर आपके पास ऐसे GIF हैं जिन्हें बदला जा सकता है, तो आपको "इस्तेमाल करें" ऐनिमेशन वाले कॉन्टेंट के लिए वीडियो फ़ॉर्मैट":
MPEG वीडियो बनाएं
GIF को वीडियो में बदलने के कई तरीके हैं.
FFmpeg इस गाइड में इस्तेमाल किया जाने वाला टूल है.
GIF को FFmpeg का इस्तेमाल करके MP4 वीडियो में बदलने के लिए, 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 एन्कोडर सिर्फ़ उन फ़ाइलों के साथ काम करता है जिनमें समान डाइमेंशन होते हैं, जैसे कि 320px साइज़ 240 पिक्सल होना चाहिए. अगर इनपुट GIF में अजीब डाइमेंशन हैं, तो 'काटें' फ़िल्टर इस्तेमाल किया जा सकता है FFmpeg फ़ाइल में 'ऊँचाई/चौड़ाई 2 से भाज्य नहीं है' का इस्तेमाल करने से बचें गड़बड़ी:
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 के एमपी4 वर्शन की तुलना में 3.7 एमबी है. का साइज़ 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> का साइज़ बड़ा होता है और उन्हें डाउनलोड होने में समय लगता है. इसलिए, किसी दूसरे एलसीपी उम्मीदवार का इस्तेमाल करने से साइट का एलसीपी बेहतर हो सकता है.