დროა შეცვალოთ GIF AV1 ვიდეოთი

2019 წელია და დროა გადავწყვიტოთ GIF-ებზე (არა, ჩვენ არ ვსაუბრობთ ამ გადაწყვეტილებაზე! ჩვენ აქ არასოდეს შევთანხმდებით! - აქ საუბარია ინგლისურ ენაზე გამოთქმაზე, ჩვენთვის ეს არ არის აქტუალური - დაახლ. თარგმანი). GIF-ები უზარმაზარ ადგილს იკავებს (ჩვეულებრივ რამდენიმე მეგაბაიტს!), რაც, თუ ვებ დეველოპერი ხართ, სრულიად ეწინააღმდეგება თქვენს სურვილებს! როგორც ვებ დეველოპერს, გსურთ მინიმუმამდე დაიყვანოთ ის, რაც მომხმარებლებს სჭირდებათ ჩამოტვირთოთ, რათა საიტი სწრაფად იტვირთოს. ამავე მიზეზით, თქვენ ამცირებთ JavaScript-ს, ოპტიმიზაციას უკეთებთ PNG-ს, JPEG-ს და ზოგჯერ გარდაქმნით JPEG WebP-ზე. მაგრამ რა უნდა გავაკეთოთ ძველ 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 წელს და მიაღწია შეკუმშვის გაუმჯობესებას თითქმის 50%-ით H.264-თან შედარებით, თუმცა როგორც აქ წერენ ყველაფერი ყოველთვის ასე ვარდისფერი არ არის

შენიშვნა: მიუხედავად იმისა, რომ H.265 არის H.264-ის შემდეგი ვერსია და შეუძლია კონკურენცია გაუწიოს VP9-ს, მე არ ვთვლი მას ცუდი ბრაუზერის მხარდაჭერის გამო, როგორც ნაჩვენებია გვერდზე. https://caniuse.com/#feat=hevc. ლიცენზირების ხარჯები არის მთავარი მიზეზი იმისა, რომ H.265 არ გახდა ისეთივე გავრცელებული, როგორც H.264 და რატომ მუშაობს Alliance of Open Media კონსორციუმი ჰონორარის გარეშე კოდეკთან, AV1.

დაიმახსოვრეთ, ჩვენი მიზანია შევამციროთ უზარმაზარი GIF-ები მაქსიმალურად მცირე ზომამდე, რათა დააჩქაროს დატვირთვის დრო. უცნაური 2019 წელი იქნებოდა, ჩვენს არსენალში რომ არ გვქონდეს ვიდეო შეკუმშვის ახალი სტანდარტი. მაგრამ ის არსებობს და ჰქვია AV1. AV1-ით შეგიძლიათ მიაღწიეთ შეკუმშვის დაახლოებით 30% გაუმჯობესებას VP9-თან შედარებით. ლეპოტა! 🙂

AV1 თქვენს სამსახურშია 2019 წლიდან!

დესკტოპებზე

ახლახან AV1 ვიდეოს დეკოდირების მხარდაჭერა დაემატა დესკტოპის ვერსიებს Google Chrome 70 и Mozilla Firefox 65. ამჟამად Firefox-ის მხარდაჭერა გაფუჭებულია და შეიძლება გამოიწვიოს ავარია, მაგრამ ყველაფერი უნდა გაუმჯობესდეს dav1d დეკოდერი უკვე Firefox 67-ში (უკვე გამოვიდა, მაგრამ მხარდაჭერა გამოჩნდა - დაახლ. თარგმანი.). ახალი ვერსიის შესახებ დეტალებისთვის წაიკითხეთ - dav1d 0.3.0 გამოშვება: კიდევ უფრო სწრაფად!

სმარტფონებზე

ამჟამად არ არსებობს სმარტფონებისთვის ტექნიკის მხარდაჭერა შესაბამისი დეკოდერების არარსებობის გამო. შეგიძლიათ გააკეთოთ პროგრამული დეკოდირება, თუმცა ეს გამოიწვევს ბატარეის მოხმარებას. პირველი მობილური SOC-ები, რომლებიც მხარს უჭერენ 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 build აქედან და გამოიყენეთ ქვემოთ მოცემული ბრძანებები. ჩვენ ვიყენებთ 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-ის შესაქმნელად გამოვიყენე ქვემოთ მოცემული ბრძანება. ზომის შესამცირებლად, მე გავაფართოვე GIF 720 პიქსელის სიგანეზე და 12 კადრი/წმ-მდე, ორიგინალური 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 არის სწორი არჩევანი ჩვენი მიზნებისთვის. მე გადავიღე უფასო Tears Of Steel ვიდეო, რომელიც ხელმისაწვდომია აქ https://mango.blender.org/და გადააკეთეს იგი დაახლოებით იგივე ბიტის სიჩქარის გამოყენებით AV1, VP9, ​​H.264 კოდეკებისთვის. შედეგები მოცემულია ქვემოთ, ასე რომ თქვენ შეგიძლიათ შეადაროთ ისინი საკუთარ თავს.

შენიშვნა 1: თუ ქვემოთ მოცემული ფაილი არ იტვირთება თქვენთვის, შესაძლოა დროა განაახლოთ თქვენი ბრაუზერი. მე გირჩევთ Chromium-ზე დაფუძნებულ ბრაუზერს, როგორიცაა Chrome, Vivaldi, Brave ან Opera. აქ არის უახლესი ინფორმაცია AV1 მხარდაჭერის შესახებ https://caniuse.com/#feat=av1

შენიშვნა 2: Firefox 66-ისთვის Linux-ზე დაგჭირდებათ დროშის დაყენება 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 ვიდეოს ზომები თითოეული სცენისთვის

GIF
AV1

სცენა 1
11.7 MB
0.33 MB

სცენა 2
7.27 MB
0.18 MB

სცენა 3
5.62 MB
0.088 MB

უბრალოდ განსაცვიფრებელი! Ეს არ არის?

შენიშვნა: VP9 და H264 ფაილის ზომები არ არის მოცემული, რადგან ისინი პრაქტიკულად არ განსხვავდებიან AV1-ისგან იმავე ბიტის სიჩქარის გამოყენების გამო. ზედმეტი იქნებოდა კიდევ ორი ​​იმავე ზომის სვეტის დამატება, მხოლოდ იმის ხაზგასასმელად, რომ ეს კოდეკები აწარმოებენ ბევრად უკეთეს ხარისხს, ვიდრე GIF ფაილების გაცილებით მცირე ზომებში.

წყარო: www.habr.com