आपकी लाइटहाउस रिपोर्ट के ऑपर्च्यूनिटी सेक्शन में, ऐनिमेशन वाले सभी GIF की सूची होती है. साथ ही, इन GIF को वीडियो में बदलकर सेकंड में होने वाली अनुमानित बचत की जानकारी भी दी जाती है:
ऐनिमेशन वाले GIF की जगह वीडियो का इस्तेमाल क्यों करना चाहिए
बड़े GIF से ऐनिमेशन वाला कॉन्टेंट नहीं बनाया जा सकता. बड़े GIF को वीडियो में बदलकर, उपयोगकर्ताओं के बैंडविथ पर काफ़ी बचत की जा सकती है. नेटवर्क बाइट बचाने के लिए, GIF का इस्तेमाल करने के बजाय, ऐनिमेशन के लिए MPEG4/WebM वीडियो फ़ॉर्मैट और स्टैटिक इमेज के लिए, PNG/WebP फ़ॉर्मैट का इस्तेमाल करें.
MPEG वीडियो बनाएं
GIF को वीडियो में बदलने के कई तरीके हैं.
FFmpeg टूल का इस्तेमाल इस गाइड में किया गया है.
GIF, my-animation.gif को MP4 वीडियो में बदलने के लिए FFmpeg का इस्तेमाल करने के लिए,
अपने कंसोल में यह कमांड चलाएं:
ffmpeg -i my-animation.gif my-animation.mp4
यह FFmpeg को my-animation.gif को इनपुट के तौर पर लेने, -i फ़्लैग से बताए गए इनपुट, और इसे my-animation.mp4 वीडियो में बदलने के लिए कहता है.
WebM वीडियो बनाएं
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 में तीन खास बातें होती हैं, जिन्हें किसी वीडियो में बताना ज़रूरी होता है:
- वे अपने-आप चलते हैं.
- वे लगातार लूप में चलते हैं (आम तौर पर, लेकिन लूप को रोका जा सकता है).
- वे चुप हैं.
अच्छी बात यह है कि <video> एलिमेंट का इस्तेमाल करके, ये व्यवहार फिर से बनाए जा सकते हैं.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
GIF को HTML5 वीडियो में बदलने वाली सेवा का इस्तेमाल करना
कई इमेज सीडीएन के ज़रिए GIF से HTML5 वीडियो में बदलाव किया जा सकता है. इमेज सीडीएन में GIF अपलोड किया जाता है और इमेज सीडीएन HTML5 वीडियो दिखाता है.
स्टैक के हिसाब से सलाह
एएमपी
ऐनिमेशन वाले कॉन्टेंट के लिए, amp-anim का इस्तेमाल करें. इससे कॉन्टेंट के ऑफ़स्क्रीन होने पर, सीपीयू का इस्तेमाल कम होगा.