यह AV1 वीडियो के साथ GIF को बदलने का समय है

अब वर्ष 2019 है, और हमारे लिए GIF के बारे में निर्णय लेने का समय है ( नहीं, यह उस निर्णय के बारे में नहीं है! यहाँ हम कभी भी सहमत नहीं होंगे! - यहाँ हम अंग्रेज़ी में उच्चारण की बात कर रहे हैं, हमारे लिए यह प्रासंगिक नहीं है - लगभग। अनुवाद ) जीआईएफ बड़ी मात्रा में जगह लेता है (आमतौर पर कुछ मेगाबाइट!) कि यदि आप एक वेब डेवलपर हैं, तो यह आपकी इच्छाओं का पूरी तरह से विरोधाभासी है! एक वेब डेवलपर के रूप में, आप उन चीजों को कम से कम करना चाहते हैं जिन्हें उपयोगकर्ताओं को डाउनलोड करने की आवश्यकता है ताकि साइट जल्दी से लोड हो। उसी कारण से, आप जावास्क्रिप्ट को कम करते हैं, PNG, JPEG का अनुकूलन करते हैं, और कभी-कभी JPEG को WebP में रूपांतरित करते हैं। लेकिन पुराने GIF के साथ क्या करना है?

जहाँ हम जाते हैं, हमें GIF की आवश्यकता नहीं है!

यदि आपका लक्ष्य साइट की लोडिंग गति में सुधार करना है, तो आपको जीआईएफ से छुटकारा पाने की आवश्यकता है! लेकिन फिर कैसे एनिमेटेड चित्र बनाने के लिए? जवाब वीडियो है। और ज्यादातर मामलों में, आपको सबसे अच्छी गुणवत्ता और अंतरिक्ष बचत 50-90% मिलेगी! जीवन में, अधिकांश चीजों में उनके पेशेवरों और विपक्ष हैं। जब आप GIFs को वीडियो से बदलते हैं, तो सबसे आम कमियां नहीं मिल सकती हैं।

सभी gifs के साथ नीचे!

सौभाग्य से, वीडियो के साथ GIF की जगह हाल के वर्षों में आम हो गया है, इसलिए सभी आवश्यक उपकरण पहले से ही उपयोग में हैं। इस पोस्ट में, मैं पहिया को सुदृढ़ नहीं करूंगा, लेकिन केवल मौजूदा समाधानों में थोड़ा सुधार करूंगा। तो यहाँ जिस्ट है:

1. एक GIF लें और इसे वीडियो में बदलें
2. वीडियो को H.264 या VP9 का उपयोग करते हुए, अर्थात इसे निचोड़ें और इसे MP4 या WebM कंटेनर में पैक करें
3. <img> को एनिमेटेड GIF के साथ <video> मूवी के साथ बदलें
4. जीआईएफ प्रभाव प्राप्त करने के लिए चुप ऑटो-प्ले और लूप चालू करें

Google के पास प्रक्रिया का वर्णन करने वाले कुछ अच्छे दस्तावेज़ हैं।

अब 2019 है

अब वर्ष 2019 है। प्रगति आगे बढ़ रही है, और हमें इसे जारी रखना चाहिए। अब तक, हमारे पास कोडेक्स के दो संस्करण हैं जो सभी ब्राउज़रों और वीडियो एन्कोडिंग टूल में व्यापक रूप से समर्थित हैं:

1. H.264 - 2003 में शुरू किया गया था और आज व्यापक रूप से उपयोग किया जाता है
2. VP9 - 2013 में दिखाई दिया और H.264 की तुलना में लगभग 50% तक संपीड़न सुधार प्राप्त किया, हालांकि जैसा कि वे यहां कहते हैं, सब कुछ नहीं है और हमेशा इतनी रसीली नहीं है

नोट: यद्यपि H.265 मानक H.264 का अगला संस्करण है और VP9 के साथ प्रतिस्पर्धा करने में सक्षम है, मैं इसे खराब ब्राउज़र समर्थन के कारण नहीं मानता, जो कि https://caniuse.com/#feat=hevc पृष्ठ पर दिखाया गया है। लाइसेंसिंग व्यय मुख्य कारण है कि H.265 H.264 के रूप में व्यापक नहीं हुआ है और एएल 1 के साथ ओपन मीडिया कंसोर्टियम का एलायंस रॉयल्टी-फ्री कोडेक के साथ क्यों काम करता है।

याद रखें कि हमारा लक्ष्य लोडिंग को तेज करने के लिए विशाल जीआईएफ को कम से कम संभव आकार में कम करना है। यह एक अजीब 2019 वर्ष होगा यदि हमारे पास हमारे शस्त्रागार में वीडियो संपीड़न के लिए एक नया मानक नहीं था। लेकिन वह है और कहा जाता है AV1। AV1 के साथ, आप VP9 की तुलना में संपीड़न में लगभग 30% सुधार प्राप्त कर सकते हैं। Lepota! :)

2019 के बाद से आपकी सेवा में AV1!

डेस्कटॉप पर

हाल ही में, Google Chrome 70 और मोज़िला फ़ायरफ़ॉक्स 65 के डेस्कटॉप संस्करणों पर AV1 वीडियो को डिकोड करने के लिए समर्थन जोड़ा गया है। अभी, फ़ायरफ़ॉक्स में समर्थन छोटी गाड़ी है और क्रैश का कारण हो सकता है, लेकिन फ़ायरफ़ॉक्स 67 में dav1d डिकोडर को जोड़ने के साथ चीजें बदलनी चाहिए ( पहले ही बाहर, लेकिन समर्थन दिखाई दिया है - लगभग। अनुवाद।) । नए संस्करण के बारे में जानकारी के लिए पढ़ें - dav1d 0.3.0 रिलीज़: और भी तेज़!

स्मार्टफोन पर

स्मार्टफ़ोन के लिए, वर्तमान में उपयुक्त डिकोडर की कमी के कारण हार्डवेयर समर्थन की कमी है। आप सॉफ्टवेयर डिकोडिंग कर सकते हैं, हालांकि इससे बैटरी की खपत बढ़ जाएगी। हार्डवेयर डीकोडिंग AV1 के समर्थन के साथ पहला मोबाइल एसओसी 2020 में दिखाई देगा।

और यहाँ लेख के पाठक हैं "तो अगर मोबाइल अभी तक सामान्य रूप से समर्थन नहीं करता है, तो AV1 का उपयोग क्यों करें?"

AV1 एक काफी नया कोडेक है, और हम इसके अनुकूलन की शुरुआत में हैं। इस लेख के बारे में सोचें कि "जब आप खाना बनाते हैं, तो लोग खुद को ऊपर खींच रहे होते हैं" चरण। अकेले डेस्कटॉप समर्थन दर्शकों के हिस्से के लिए साइटों को गति देगा। और पुराने कोडेक्स को एक फॉलबैक स्क्रिप्ट के रूप में इस्तेमाल किया जा सकता है, जब AV1 को लक्ष्य डिवाइस पर समर्थित नहीं किया जाता है। लेकिन जैसे ही उपयोगकर्ता AV1 के समर्थन के साथ उपकरणों पर स्विच करते हैं, सब कुछ तैयार हो जाएगा। इसे प्राप्त करने के लिए, हमें एक वीडियो टैग बनाने की आवश्यकता है, जैसा कि नीचे दिखाया गया है, जो ब्राउज़र को पसंदीदा प्रारूप - AV1 - >> VP9 - >> H.264 का चयन करने की अनुमति देता है। खैर, अगर उपयोगकर्ता के पास एक पूरी तरह से पुराना डिवाइस या नेविगेटर है जो वीडियो बिल्कुल भी समर्थन नहीं करता है (जो कि H264 के साथ चोरी होने की संभावना नहीं है) , तो वह सिर्फ एक GIF देखता है

 <video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg"> <source src="media/RollingCredits.av1.mp4" type="video/mp4"> <source src="media/RollingCredits.vp9.webm" type="video/webm"> <source src="media/RollingCredits.x264.mp4" type="video/mp4"> <img src="media/RollingCredits.gif"> </video> 

AV1 बनाना

AV1 में वीडियो बनाना आसान है। अपने सिस्टम के लिए नवीनतम ffmpeg बिल्ड यहां से डाउनलोड करें और नीचे दिए गए कमांड का उपयोग करें। हम लक्ष्य बिटरेट को प्राप्त करने के लिए 2 पास का उपयोग करते हैं। ऐसा करने के लिए, हम दो बार ffmpeg चलाएंगे। पहली बार जब हम परिणाम को बिना किसी फ़ाइल के लिखते हैं। यह ffmpeg के दूसरे रन के लिए जरूरी लॉग बनाएगा।

 # Linux or Mac ##  1 ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && \ ##  2 ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4 # Windows ##  1 ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^ ##  2 ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4 

यहाँ मापदंडों का विवरण दिया गया है:

 -i -  . -pix_fmt -   4:2:0       .     ,  4:2:0  . -c:v -   ,    - AV1.<br /> -b:v –  ,    . -filter:v scale -   ffmpeg     .   X:-1   ffmpeg    X,   . -strict experimental -  , .. AV1   . -cpu-used -   ,          .   0-4.   ,    , ,  ,   . -tile-columns -    .  AV1     ,         . -row-mt – ,    ,        . -threads -  . -pass -    . -f -     .    , .. MP4   . -movflags faststart -    ,      .         . 

जीआईएफ क्रिएशन

GIF बनाने के लिए, मैंने नीचे कमांड का उपयोग किया। आकार को कम करने के लिए, मैंने जीआईएफ को मूल 24 एफपीएस वीडियो के बजाय 720px चौड़े और 12 एफपीएस पर बढ़ाया।

 ./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12 -filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif 

परीक्षण के परिणाम

सौ बार पढ़ने की अपेक्षा एक बार देखना सही है? आइए सुनिश्चित करें कि AV1 हमारे उद्देश्यों के लिए सही विकल्प है। मैंने यहाँ उपलब्ध https://mango.blender.org/ पर स्टील के वीडियो के मुफ्त आँसू लिए, और इसे AV1, VP9, ​​H.264 कोडेक के लिए लगभग एक ही बिटरेट का उपयोग करके परिवर्तित किया। परिणाम नीचे हैं, इसलिए आप उनकी तुलना स्वयं कर सकते हैं।

नोट 1: यदि नीचे दी गई फ़ाइल आपसे डाउनलोड नहीं हो रही है, तो आपको अपना ब्राउज़र अपडेट करना होगा। मैं क्रोम, विवाल्डी, बहादुर या ओपेरा जैसे क्रोमियम-आधारित ब्राउज़र की सिफारिश करूंगा। यहां AV1 https://caniuse.com/#feat=av1 के लिए नवीनतम समर्थन जानकारी दी गई है

नोट 2: लिनक्स पर फ़ायरफ़ॉक्स 66 के लिए, आपको media.av1.enabled फ्लैग को इस about:config में true करने के लिए सेट करना होगा about:config

नोट 3: मैंने अपने बड़े आकार और इस पृष्ठ को लोड करने के लिए आवश्यक डेटा की मात्रा के कारण नियमित GIF शामिल नहीं करने का निर्णय लिया! (जो विडंबना होगी, क्योंकि यह पृष्ठ :) पर डेटा की मात्रा कम करने के बारे में है)। लेकिन आप यहाँ पर अंतिम GIF देख सकते हैं https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIF

अनुवादक का ध्यान दें: हैबर आपको ऑटो प्ले को सक्षम करने और फ़ाइल को लूप करने की अनुमति नहीं देता है, इसलिए केवल गुणवत्ता का मूल्यांकन किया जाएगा। आप देख सकते हैं कि मूल लेख में "एनिमेटेड चित्र" कैसे जीवंत दिखते हैं।

दृश्य 1 @ 200 केबीपीएस

बहुत सी हलचल है, जो कम बिटरेट पर विशेष रूप से संवेदनशील है। आप तुरंत देख सकते हैं कि इस बिटरेट पर H.264 कितना खराब है, वर्ग तुरंत दिखाई देते हैं। वीपी 9 स्थिति को थोड़ा सुधारता है, लेकिन वर्ग अभी भी दिखाई देते हैं। AV1 स्पष्ट रूप से जीतता है, जिससे स्पष्ट रूप से सबसे अच्छी तस्वीर मिलती है।

264

VP9

AV1

दृश्य 2 @ 200 केबीपीएस

बहुत सारी पारभासी CGI सामग्री हैं। परिणाम अब पिछली बार जितना नहीं है, लेकिन कुल मिलाकर AV1 बेहतर दिखता है।

264

VP9

AV1

दृश्य 3 @ 100 केबीपीएस

इस दृश्य में, हम बिटरेट को 100 केबीपीएस तक मोड़ देते हैं और परिणाम सुसंगत होते हैं। AV1 कम बिट दर पर नेतृत्व बनाए रखता है!

264

VP9

AV1

केक पर चेरी

आलेख को पूरा करने के लिए, GIF की तुलना में सहेजे गए ट्रैफ़िक की मात्रा महसूस करना - सभी वीडियो का कुल आकार अधिक है ... 1.62 MB !! यह सही है। कुछ कमबख्त 1,708,032 बाइट्स! तुलना के लिए, यहां प्रत्येक दृश्य के लिए GIF और AV1 वीडियो का आकार है

बस तेजस्वी! है ना?

नोट: फ़ाइल आकार VP9 और H264 नहीं दिखाए गए हैं, क्योंकि वे व्यावहारिक रूप से एक ही बिटरेट के उपयोग के कारण AV1 से भिन्न नहीं हैं। एक ही आयाम के साथ दो और कॉलम जोड़ना बेमानी होगा, केवल इस बात पर जोर देने के लिए कि ये कोडक बहुत छोटे फ़ाइल आकार वाले GIF की तुलना में बहुत बेहतर गुणवत्ता का उत्पादन करते हैं।