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

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

हम जहां जा रहे हैं वहां हमें GIF की आवश्यकता नहीं होगी!

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

सभी GIF नीचे!

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

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

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

यह 2019 है

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

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

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

याद रखें, हमारा लक्ष्य लोडिंग समय को तेज करने के लिए विशाल GIF को यथासंभव छोटे आकार में छोटा करना है। यह एक अजीब 2019 होगा अगर हमारे शस्त्रागार में वीडियो संपीड़न के लिए कोई नया मानक नहीं होगा। लेकिन यह मौजूद है और इसे AV1 कहा जाता है। AV1 के साथ आप कर सकते हैं VP30 की तुलना में संपीड़न में लगभग 9% सुधार प्राप्त करें. लेपोटा! 🙂

AV1 2019 से आपकी सेवा में है!

डेस्कटॉप पर

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

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

उपयुक्त डिकोडर्स की कमी के कारण वर्तमान में स्मार्टफ़ोन के लिए कोई हार्डवेयर समर्थन नहीं है। आप सॉफ़्टवेयर डिकोडिंग कर सकते हैं, हालाँकि इससे बैटरी की खपत बढ़ जाएगी। AV1 हार्डवेयर डिकोडिंग का समर्थन करने वाला पहला मोबाइल SOC 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 बनाने के लिए मैंने नीचे दिए गए कमांड का उपयोग किया। आकार को कम करने के लिए, मैंने GIF को मूल 720 एफपीएस वीडियो के बजाय 12px चौड़ा और 24 एफपीएस तक बढ़ाया।

./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: Linux पर फ़ायरफ़ॉक्स 66 के लिए आपको फ़्लैग सेट करना होगा media.av1.enabled अर्थ में true в about:config

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

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

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

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

H.264

VP9

AV1

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

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

H.264

VP9

AV1

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

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

H.264

VP9

AV1

केक पर सफेद पदार्थ से सजाना

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

GIF
AV1

दृश्य 1
11.7 एमबी
0.33 एमबी

दृश्य 2
7.27 एमबी
0.18 एमबी

दृश्य 3
5.62 एमबी
0.088 एमबी

बिल्कुल लाजवाब! क्या यह नहीं?

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

स्रोत: www.habr.com