ऐनिमेट किए गए कॉन्टेंट के लिए वीडियो फ़ॉर्मैट इस्तेमाल करना

Lighthouse रिपोर्ट के 'अवसर' सेक्शन में, सभी ऐनिमेशन वाले 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 का इस्तेमाल करें. इससे, कॉन्टेंट के ऑफ़स्क्रीन होने पर सीपीयू का इस्तेमाल कम होगा.

संसाधन