2019. je i krajnje je vrijeme da se odlučimo za GIF-ove ( - ovdje govorimo o izgovoru na engleskom, za nas to nije relevantno - cca. prijevod). GIF-ovi zauzimaju ogroman prostor (obično nekoliko megabajta!), što je, ako ste web developer, potpuno suprotno vašim željama! Kao web programer, želite minimizirati stvari koje korisnici moraju preuzeti kako bi se stranica brzo učitavala. Iz istog razloga smanjujete JavaScript, optimizirate PNG, JPEG i ponekad pretvarate . Ali što učiniti sa starim GIF-om?
Neće nam trebati GIF-ovi tamo gdje idemo!
Ako vam je cilj poboljšati brzinu učitavanja stranice, onda se morate riješiti GIF-ova! Ali kako onda napraviti animirane slike? Odgovor je video. I u većini slučajeva, dobit ćete bolju kvalitetu 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.
Dolje sa svim GIF-ovima!
Srećom, zamjena GIF-ova video zapisima je uobičajena pojava posljednjih godina, tako da su svi potrebni alati već u upotrebi. U ovom postu neću ponovno izmišljati kotač, već ću samo malo poboljšati postojeća rješenja. Dakle, evo suštine:
- Snimite GIF i pretvorite ga u video
- Kodirajte video pomoću H.264 ili VP9, tj. komprimirajte ga i spakirajte u MP4 ili WebM spremnik
- Zamijeniti
<img>s uključenim animiranim GIF-om<video>s valjkom - Uključite automatsku reprodukciju bez zvuka i petlje za GIF efekt
2019. je
Sad je 2019. Napredak ide naprijed i mi moramo ići u korak s njim. Do sada smo imali dvije opcije kodeka koje su široko podržane u svim preglednicima i alatima za kodiranje videa:
- H.264 - uveden 2003. i danas se najviše koristi
- VP9 - pojavio se 2013. i postigao je poboljšanje kompresije od gotovo 50% u usporedbi s H.264, iako nije sve uvijek tako ružičasto
Napomena: Iako je H.265 sljedeća verzija H.264 i može se natjecati s VP9, ne uzimam ga u obzir zbog slabe podrške preglednika, kao što je prikazano na stranici . Troškovi licenciranja glavni su razlog zašto H.265 nije postao toliko raširen kao H.264 i zašto konzorcij Alliance of Open Media radi s besplatnim kodekom AV1.
Zapamtite, naš je cilj 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. S AV1 možete . Lepota! 🙂
AV1 vam stoji na usluzi od 2019.!
Na stolnim računalima
Nedavno je podrška za AV1 video dekodiranje dodana verzijama za stolna računala и . Trenutačno podrška za Firefox ima pogreške i može uzrokovati padove, ali stvari bi se trebale poboljšati dodatkom već u Firefoxu 67 ( - cca. prev.). 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 napraviti softversko dekodiranje, iako će to dovesti do povećane potrošnje baterije. Prvi mobilni SOC-ovi koji podržavaju AV1 hardversko dekodiranje pojavit će se 2020. godine.
A onda čitatelji članka kažu: "Ako ga mobilni telefoni još ne podržavaju ispravno, 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 vi kuhate, publika će vas pratiti". Podrška za stolna računala sama po sebi će ubrzati stranice za dio publike. A stari kodeci mogu se koristiti kao rezervni scenarij kada AV1 nije podržan na ciljnom uređaju. Ali kako se korisnici prebacuju na uređaje s podrškom za AV1, sve će biti spremno. Da bismo to postigli, moramo stvoriti video oznaku kao što je prikazano u nastavku, što će omogućiti pregledniku da odabere željeni format − AV1 - >> VP9 - >> H.264. Pa, ako korisnik ima vrlo stari uređaj ili navigator koji uopće ne podržava video (što je vrlo malo vjerojatno s H264), onda ć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>Stvaranje AV1
Izrada videa u AV1 je jednostavna. i koristite donje naredbe. Koristimo 2 prolaza za postizanje ciljne brzine prijenosa. Da bismo to učinili, dvaput ćemo pokrenuti ffmpeg. Prvi put zapisujemo rezultat u nepostojeću datoteku. Ovo će stvoriti zapisnik 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.mp4Ovdje je pregled 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Izrada GIF-ova
Za izradu GIF-a koristio sam naredbu u nastavku. Kako bih smanjio veličinu, smanjio sam GIF na širinu od 720 piksela i 12 fps umjesto izvornog 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 dostupan ovdje , i pretvorio ga koristeći približno istu bitrate za AV1, VP9, H.264 kodeke. Rezultati su ispod pa ih možete sami usporediti.
Napomena 1: Ako vam se datoteka u nastavku ne učitava, možda je vrijeme da ažurirate svoj preglednik. Preporučio bih preglednik temeljen na Chromiumu kao što su Chrome, Vivaldi, Brave ili Opera. Evo najnovijih informacija o podršci za AV1
Napomena 2: Za Firefox 66 na Linuxu morat ćete postaviti zastavicu media.av1.enabled u vrijednosti true в about:config
Napomena 3: Odlučio sam ne uključiti 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, budući da se na ovoj stranici radi o smanjenju količine podataka na stranici :)). Ali možete vidjeti konačne GIF-ove ovdje
Napomena prevoditelja: Habr vam ne dopušta da omogućite automatsku reprodukciju i petlju datoteke, tako da možete samo procijeniti kvalitetu. Kako će “animirane slike” izgledati možete vidjeti uživo .
Scena 1 @ 200 Kbps
Ovdje ima puno kretanja, što je posebno osjetljivo na niskim bitrate-ima. Odmah se vidi koliko je H.264 loš na ovom bitrateu, odmah se vide kvadratići. VP9 malo popravlja situaciju, ali kvadratići su i dalje vidljivi. AV1 očito pobjeđuje, stvarajući očito bolju sliku.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Ovdje ima puno prozirnog CGI sadržaja. Rezultati nisu toliko različiti kao prošli put, ali sve u svemu AV1 izgleda bolje.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
U ovoj sceni smanjujemo brzinu prijenosa na 100 Kbps i rezultati su dosljedni. AV1 zadržava svoje vodstvo čak i pri niskim brzinama prijenosa!
H.264
VP9
AV1
Višnja na torti
Da završim ovaj članak osjećajem količine ušteđene propusnosti u usporedbi s GIF-om - ukupna veličina svih videozapisa je veća... 1.62 MB!! Pravo. Nekih jebenih 1,708,032 bajta! Za usporedbu, ovdje su GIF i AV1 video veličine 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
Jednostavno zapanjujuće! Nije li?
Napomena: Veličine datoteka VP9 i H264 nisu navedene, jer se praktički ne razlikuju od AV1 zbog korištenja iste brzine prijenosa. Bilo bi suvišno dodati još dva stupca s istim veličinama, samo da naglasimo da ovi kodeci proizvode puno bolju kvalitetu od GIF-a pri puno manjim veličinama datoteka.
Izvor: www.habr.com