Lighthouse रिपोर्ट के 'मौके' सेक्शन में, ऐनिमेशन वाले सभी 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 फ़ॉर्मैट के साथ काम नहीं करते. इसलिए, दोनों फ़ॉर्मैट जनरेट करना सही रहता है.
FFmpeg का इस्तेमाल करके, my-animation.gif को WebM वीडियो में बदलने के लिए,
अपनी कंसोल में यह कमांड चलाएं:
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 अपलोड किया जाता है. इसके बाद, इमेज सीडीएन, एचटीएमएल5 वीडियो दिखाता है.
स्टैक के हिसाब से सलाह
एएमपी
ऐनिमेशन वाले कॉन्टेंट के लिए, amp-anim का इस्तेमाल करें. इससे, कॉन्टेंट के ऑफ़स्क्रीन होने पर सीपीयू का इस्तेमाल कम होगा.
Drupal
किसी ऐसी सेवा में अपनी GIF अपलोड करें जो उसे वीडियो में जोड़ने के लिए तैयार रख सके.