AV1 व्हिडिओसह GIF बदलण्याची वेळ आली आहे

हे 2019 आहे आणि आम्ही GIF वर निर्णय घेण्याची वेळ आली आहे (नाही, आम्ही या निर्णयाबद्दल बोलत नाही आहोत! आम्ही येथे कधीही सहमत होणार नाही! - येथे आम्ही इंग्रजीमध्ये उच्चाराबद्दल बोलत आहोत, आमच्यासाठी हे संबंधित नाही - अंदाजे. भाषांतर). GIF मोठ्या प्रमाणात जागा घेतात (सामान्यत: अनेक मेगाबाइट्स!), जे तुम्ही वेब डेव्हलपर असल्यास, तुमच्या इच्छेच्या विरुद्ध आहे! वेब डेव्हलपर म्हणून, तुम्ही वापरकर्त्यांना डाउनलोड करण्यासाठी आवश्यक असलेल्या गोष्टी कमी करू इच्छिता जेणेकरून साइट लवकर लोड होईल. त्याच कारणास्तव, तुम्ही JavaScript लहान करा, PNG, JPEG ऑप्टिमाइझ करा आणि कधीकधी रूपांतरित करता. JPEG ते WebP. पण जुन्या जीआयएफचे काय करायचे?

आम्ही जिथे जात आहोत तिथे आम्हाला 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 सह का काम करत आहे.

लक्षात ठेवा, लोडिंग वेळा वेगवान करण्यासाठी मोठ्या GIFs शक्य तितक्या लहान आकारात कमी करणे हे आमचे ध्येय आहे. आमच्या शस्त्रागारात व्हिडिओ कॉम्प्रेशनसाठी नवीन मानक नसल्यास हे एक विचित्र 2019 असेल. पण ते अस्तित्वात आहे आणि त्याला AV1 म्हणतात. AV1 सह तुम्ही हे करू शकता VP30 च्या तुलनेत कॉम्प्रेशनमध्ये अंदाजे 9% सुधारणा साध्य करा. लेपोटा! 🙂

AV1 2019 पासून तुमच्या सेवेत आहे!

डेस्कटॉपवर

अलीकडे AV1 व्हिडिओ डीकोडिंगसाठी समर्थन डेस्कटॉप आवृत्त्यांमध्ये जोडले गेले Google Chrome 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 fps व्हिडिओ ऐवजी 12px रुंद आणि 24 fps पर्यंत GIF स्केल केले.

./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: खालील फाइल तुमच्यासाठी लोड होत नसल्यास, तुमचा ब्राउझर अपडेट करण्याची वेळ येऊ शकते. मी Chrome, Vivaldi, Brave किंवा Opera सारख्या Chromium आधारित ब्राउझरची शिफारस करतो. येथे AV1 समर्थनाची नवीनतम माहिती आहे https://caniuse.com/#feat=av1

टीप 2: Linux वरील Firefox 66 साठी तुम्हाला ध्वज सेट करणे आवश्यक आहे media.av1.enabled अर्थ मध्ये true в about:config

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

अनुवादकाची टीप: Habr तुम्हाला ऑटोप्ले सक्षम करण्याची आणि फाइल लूप करण्याची परवानगी देत ​​नाही, त्यामुळे तुम्ही केवळ गुणवत्तेचे मूल्यांकन करू शकता. "अ‍ॅनिमेटेड चित्रे" लाइव्ह कशी दिसतील ते तुम्ही पाहू शकता मूळ लेख.

दृश्य 1 @ 200 Kbps

येथे बरीच हालचाल आहे, जी कमी बिटरेट्सवर विशेषतः संवेदनशील आहे. या बिटरेटवर H.264 किती वाईट आहे हे तुम्ही लगेच पाहू शकता; चौरस लगेच दृश्यमान होतात. VP9 परिस्थिती थोडी सुधारते, परंतु स्क्वेअर अजूनही दृश्यमान आहेत. AV1 स्पष्टपणे जिंकतो, स्पष्टपणे चांगले चित्र निर्माण करतो.

H.264

VP9

AV1

दृश्य 2 @ 200 Kbps

येथे बरीच अर्धपारदर्शक CGI सामग्री आहे. परिणाम गेल्या वेळेपेक्षा वेगळे नाहीत, परंतु एकूणच AV1 अधिक चांगले दिसते.

H.264

VP9

AV1

दृश्य 3 @ 100 Kbps

या दृश्यात, आम्ही बिटरेट 100 Kbps पर्यंत खाली करतो आणि परिणाम सुसंगत आहेत. AV1 कमी बिटरेटमध्येही त्याचे नेतृत्व राखते!

H.264

VP9

AV1

केक वर चेरी

GIF च्या तुलनेत जतन केलेल्या बँडविड्थचे प्रमाण अनुभवून हा लेख पूर्ण करण्यासाठी - सर्व व्हिडिओंचा एकूण आकार जास्त आहे... 1.62 MB!! बरोबर. काही 1,708,032 बाइट्स! तुलनेसाठी, येथे प्रत्येक दृश्यासाठी GIF आणि AV1 व्हिडिओ आकार आहेत

जीआयएफ
AV1

दृश्य १
11.7 MB
0.33 MB

दृश्य १
7.27 MB
0.18 MB

दृश्य १
5.62 MB
0.088 MB

फक्त आश्चर्यकारक! नाही का?

टीप: VP9 आणि H264 चे फाइल आकार दिलेले नाहीत, कारण समान बिटरेट वापरल्यामुळे ते व्यावहारिकरित्या AV1 पेक्षा वेगळे नाहीत. समान आकारांसह आणखी दोन स्तंभ जोडणे निरर्थक आहे, फक्त हे हायलाइट करण्यासाठी की हे कोडेक खूपच लहान फाइल आकारात GIF पेक्षा अधिक चांगली गुणवत्ता तयार करतात.

स्त्रोत: www.habr.com