2019. je i vrijeme je da se odlučimo za GIF-ove ( - ovdje govorimo o izgovoru na engleskom, za nas to nije relevantno - cca. prevod). GIF-ovi zauzimaju ogromnu količinu prostora (obično nekoliko megabajta!), što je, ako ste web programer, potpuno suprotno vašim željama! Kao web programer, želite da minimizirate stvari koje korisnici trebaju preuzeti kako bi se stranica brzo učitavala. Iz istog razloga minimizirate JavaScript, optimizujete PNG, JPEG, a ponekad i konvertujete . Ali šta učiniti sa starim GIF-om?
Neće nam trebati GIF-ovi tamo gdje idemo!
Ako vam je cilj poboljšati brzinu učitavanja web-lokacije, onda se morate riješiti GIF-ova! Ali kako onda napraviti animirane slike? Odgovor je video. I u većini slučajeva, dobit ćete bolji kvalitet i uštedu prostora od 50-90%! U životu, većina stvari ima svoje prednosti i mane. Kada GIF zamijenite videom, najčešće nećete moći pronaći nikakve nedostatke.
Dole sa svim GIF-ovima!
Srećom, zamjena GIF-ova video zapisima je uobičajena posljednjih godina, tako da su svi potrebni alati već u upotrebi. U ovom postu neću ponovo izmišljati točak, već ću samo malo poboljšati postojeća rješenja. Dakle, evo suštine:
- Uzmite GIF i pretvorite ga u video
- Kodirajte video pomoću H.264 ili VP9, tj. komprimirajte ga i upakujte u MP4 ili WebM kontejner
- Zamijenite
<img>sa uključenim animiranim GIF-om<video>sa valjkom - Uključite automatsku reprodukciju bez zvuka i petlju za GIF efekat
2019. je
Sada je 2019. Napredak ide naprijed, i moramo ga pratiti. Do sada smo imali dvije opcije kodeka koje su široko podržane u svim pretraživačima i alatima za video kodiranje:
- H.264 - uveden 2003. godine i danas se najviše koristi
- VP9 - pojavio se 2013. godine i postigao poboljšanje kompresije od skoro 50% u odnosu na H.264, iako nije sve uvek tako ružičasto
Napomena: Iako je H.265 sljedeća verzija H.264 i može se takmičiti sa VP9, ne smatram to zbog loše podrške preglednika, kao što je prikazano na stranici . Troškovi licenciranja su glavni razlog zašto H.265 nije postao toliko raširen kao H.264 i zašto konzorcijum Alijanse otvorenih medija radi sa kodekom bez naknade, AV1.
Zapamtite, naš cilj je smanjiti ogromne GIF-ove na najmanju moguću veličinu kako bismo ubrzali vrijeme učitavanja. Bila bi čudna 2019. da u našem arsenalu nemamo novi standard za video kompresiju. Ali postoji i zove se AV1. Sa AV1 možete . Babble! 🙂
AV1 Vam stoji na usluzi od 2019. godine!
Na desktop računarima
Nedavno je u desktop verzije dodata podrška za AV1 video dekodiranje и . Trenutno je podrška za Firefox pogrešna i može uzrokovati padove, ali stvari bi se trebale poboljšati dodatkom već u Firefoxu 67 ( - cca. prevod). Za detalje o novoj verziji pročitajte -
Na pametnim telefonima
Trenutno ne postoji hardverska podrška za pametne telefone zbog nedostatka odgovarajućih dekodera. Možete izvršiti softversko dekodiranje, iako će to dovesti do povećane potrošnje baterije. Prvi mobilni SOC koji podržavaju AV1 hardversko dekodiranje pojavit će se 2020.
A onda čitaoci članka kažu, "pa ako mobilni telefoni to još ne podržavaju kako treba, zašto koristiti AV1?"
AV1 je prilično nov kodek, a mi smo na samom početku njegove adaptacije. Zamislite ovaj članak kao fazu „dok kuhate, publika će vas pratiti“. Podrška za desktop će sama po sebi ubrzati web stranice za dio publike. I stari kodeci se mogu koristiti kao rezervni scenarij kada AV1 nije podržan na ciljnom uređaju. Ali kako korisnici pređu na uređaje sa AV1 podrškom, sve će biti spremno. Da bismo to postigli, moramo kreirati video oznaku kao što je prikazano u nastavku, što će omogućiti pretraživaču da odabere željeni format − AV1 - >> VP9 - >> H.264. Pa, ako korisnik ima vrlo star uređaj ili navigator koji uopće ne podržava video (što je krajnje malo vjerovatno sa H264), tada će samo vidjeti 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>Kreiranje AV1
Kreiranje video zapisa u AV1 je jednostavno. i koristite naredbe ispod. Koristimo 2 prolaza za postizanje ciljne brzine prijenosa. Da bismo to učinili, dvaput ćemo pokrenuti ffmpeg. Prvi put zapisujemo rezultat u nepostojeći fajl. Ovo će kreirati dnevnik koji će biti potreban za drugo pokretanje ffmpeg-a.
# 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.mp4Evo podjele parametara:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Pravljenje GIF-a
Za kreiranje GIF-a koristio sam donju naredbu. Da smanjim veličinu, skalirao sam GIF na 720 piksela širine i 12 fps umjesto originalnog videa od 24 fps.
./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.gifRezultati ispitivanja
Bolje je jednom vidjeti nego sto puta pročitati, zar ne? Uvjerimo se da je AV1 pravi izbor za naše potrebe. Snimio sam besplatni video Tears Of Steel koji je dostupan ovdje , i konvertovao ga koristeći približno isti bitrate za AV1, VP9, H.264 kodeke. Rezultati su u nastavku kako biste ih sami mogli uporediti.
Napomena 1: Ako se datoteka ispod ne učita umjesto vas, možda je vrijeme da ažurirate svoj pretraživač. Preporučio bih pretraživač baziran na Chromiumu kao što je Chrome, Vivaldi, Brave ili Opera. Evo najnovijih informacija o AV1 podršci
Napomena 2: Za Firefox 66 na Linuxu morat ćete postaviti zastavicu media.av1.enabled u značenje true в about:config
Napomena 3: Odlučio sam da ne uključim obične GIF-ove u nastavku zbog njihove velike veličine i količine podataka koja bi bila potrebna za učitavanje ove stranice! (Što bi bilo ironično, pošto je ova stranica o smanjenju količine podataka na stranici :)). Ali konačne GIF-ove možete vidjeti ovdje
Napomena prevodioca: Habr vam ne dozvoljava da omogućite autoplay i petlju fajla, tako da možete samo procijeniti kvalitet. Kako će izgledati “animirane slike” možete vidjeti uživo .
Scena 1 @ 200 Kbps
Ovdje ima dosta kretanja, što je posebno osjetljivo pri niskim brzinama prijenosa. Odmah možete vidjeti koliko je H.264 loš pri ovoj brzini prijenosa; kvadrati su odmah vidljivi. VP9 malo popravlja situaciju, ali se kvadrati i dalje vide. AV1 jasno pobjeđuje, stvarajući očigledno bolju sliku.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Ovdje ima puno prozirnog CGI sadržaja. Rezultati nisu drugačiji kao prošli put, ali sveukupno AV1 izgleda bolje.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
U ovoj sceni smanjujemo bitrate na 100 Kbps i rezultati su konzistentni. AV1 održava svoje vodstvo čak i pri malim brzinama prijenosa!
H.264
VP9
AV1
Višnja na torti
Da završite ovaj članak tako što ćete osjetiti količinu spremljene propusnosti u odnosu na GIF - ukupna veličina svih videozapisa je veća... 1.62 MB!! U redu. Nekih jebenih 1,708,032 bajtova! Za poređenje, ovdje su veličine GIF i AV1 videa za svaku scenu
GIF
AV1
Scena 1
11.7 MB
0.33 MB
Scena 2
7.27 MB
0.18 MB
Scena 3
5.62 MB
0.088 MB
Simply stunning! Nije li?
Napomena: Veličine datoteka VP9 i H264 nisu navedene, jer se praktično ne razlikuju od AV1 zbog korištenja istog bitrate-a. Bilo bi suvišno dodati još dvije kolone iste veličine, samo da naglasimo da ovi kodeci proizvode mnogo bolji kvalitet od GIF-a pri mnogo manjim veličinama datoteka.
izvor: www.habr.com