लाइटहाउस रिपोर्ट के 'ऑपर्च्यूनिटी' सेक्शन में, ऐनिमेशन वाले सभी GIF के साथ-साथ, इन GIF को वीडियो में बदलने के कुछ सेकंड में होने वाली अनुमानित बचत की जानकारी होती है:
ऐनिमेशन वाले GIF को वीडियो से बदलने की वजहें
बड़े GIF, ऐनिमेशन वाला कॉन्टेंट डिलीवर नहीं कर सकते. बड़े GIF को वीडियो में बदलकर, उपयोगकर्ताओं के बैंडविड्थ को बचाया जा सकता है. नेटवर्क बाइट बचाने के लिए, GIF का इस्तेमाल करने के बजाय, ऐनिमेशन के लिए MPEG4/WebM वीडियो फ़ॉर्मैट और स्टैटिक इमेज के लिए, PNG/WebP फ़ॉर्मैट का इस्तेमाल करें.
MPEG वीडियो बनाना
GIF को वीडियो में बदलने के कई तरीके हैं.
इस गाइड में FFmpeg टूल का इस्तेमाल किया गया है.
FFmpeg का इस्तेमाल करके, GIF my-animation.gif को MP4 वीडियो में बदलने के लिए, अपने कंसोल में यह कमांड चलाएं:
ffmpeg -i my-animation.gif my-animation.mp4
इससे FFmpeg को पता चलता है कि my-animation.gif को इनपुट के तौर पर इस्तेमाल करना है. -i फ़्लैग से यह पता चलता है. साथ ही, FFmpeg को यह भी पता चलता है कि my-animation.gif को 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 का इस्तेमाल करें. इससे, कॉन्टेंट के ऑफ़स्क्रीन होने पर सीपीयू का इस्तेमाल कम होगा.
Drupal
किसी ऐसी सेवा में अपनी GIF अपलोड करें जो उसे वीडियो के तौर पर जोड़ने के लिए उपलब्ध कराए.