Leto 2019 je in skrajni čas je, da se odločimo za GIF ( - tukaj govorimo o izgovorjavi v angleščini, za nas to ni pomembno - cca. prevod). GIF-ji zavzamejo ogromno prostora (običajno več megabajtov!), kar je, če ste spletni razvijalec, povsem v nasprotju z vašimi željami! Kot spletni razvijalec želite zmanjšati število stvari, ki jih morajo uporabniki prenesti, da se spletno mesto hitro naloži. Iz istega razloga zmanjšate JavaScript, optimizirate PNG, JPEG in včasih pretvorite . Toda kaj storiti s starim GIF-om?
Tja, kamor gremo, ne bomo potrebovali GIF-ov!
Če je vaš cilj izboljšati hitrost nalaganja spletnega mesta, se morate znebiti GIF-ov! Toda kako potem narediti animirane slike? Odgovor je video. In v večini primerov boste dobili boljšo kakovost in prihranek prostora od 50 do 90 %! V življenju ima večina stvari svoje prednosti in slabosti. Ko zamenjate GIF z videom, največkrat ne boste mogli najti nobenih slabosti.
Dol z vsemi GIF-ji!
Na srečo je zamenjava GIF-ov z videoposnetki v zadnjih letih nekaj običajnega, tako da so vsa potrebna orodja že v uporabi. V tem prispevku ne bom na novo izumil kolesa, ampak bom le nekoliko izboljšal obstoječe rešitve. Torej, tukaj je bistvo:
- Posnemite GIF in ga pretvorite v video
- Kodirajte video z uporabo H.264 ali VP9, tj. ga stisnite in zapakirajte v vsebnik MP4 ali WebM
- Zamenjati
<img>z vključenim animiranim GIF-om<video>z valjčkom - Vklopite samodejno predvajanje brez zvoka in zanke za učinek GIF
Piše se 2019
Zdaj je leto 2019. Napredek gre naprej in moramo mu slediti. Doslej smo imeli dve možnosti kodeka, ki sta široko podprti v vseh brskalnikih in orodjih za kodiranje videa:
- H.264 - predstavljen leta 2003 in danes najbolj razširjen
- VP9 - se je pojavil leta 2013 in dosegel izboljšave stiskanja za skoraj 50 % v primerjavi s H.264, čeprav ni vedno vse tako rožnato
Opomba: Čeprav je H.265 naslednja različica H.264 in je sposoben tekmovati z VP9, je ne upoštevam zaradi slabe podpore brskalnika, kot je prikazano na strani . Stroški licenciranja so glavni razlog, zakaj H.265 ni postal tako razširjen kot H.264 in zakaj konzorcij Alliance of Open Media dela z brezplačnim kodekom AV1.
Ne pozabite, naš cilj je skrčiti ogromne GIF-e na najmanjšo možno velikost, da bi pospešili čas nalaganja. Leto 2019 bi bilo čudno, če v našem arzenalu ne bi imeli novega standarda za stiskanje videa. Ampak obstaja in se imenuje AV1. Z AV1 lahko . blebetanje! 🙂
AV1 vam je na voljo od leta 2019!
Na namiznih računalnikih
Pred kratkim je bila v namizne različice dodana podpora za video dekodiranje AV1 и . Trenutno ima podpora za Firefox napake in lahko povzroči zrušitve, vendar bi se stvari morale izboljšati z dodatkom že v Firefoxu 67 ( — pribl. prev.). Za podrobnosti o novi različici preberite -
Na pametnih telefonih
Strojna podpora za pametne telefone trenutno ni na voljo zaradi pomanjkanja ustreznih dekodirnikov. Programsko dekodiranje lahko izvajate, vendar bo to povzročilo večjo porabo baterije. Prvi mobilni SOC, ki podpirajo strojno dekodiranje AV1, se bodo pojavili leta 2020.
In potem si bralci članka rečejo, "če torej mobilni telefoni tega še ne podpirajo pravilno, zakaj uporabljati AV1?"
AV1 je dokaj nov kodek in smo na samem začetku prilagajanja. Ta članek si predstavljajte kot fazo »medtem ko kuhate, vam bo množica sledila«. Podpora za namizne računalnike bo sama po sebi pospešila spletna mesta za del občinstva. Stare kodeke je mogoče uporabiti kot nadomestni scenarij, ko AV1 ni podprt v ciljni napravi. Toda ko uporabniki preklopijo na naprave s podporo AV1, bo vse pripravljeno. Da bi to dosegli, moramo ustvariti video oznako, kot je prikazano spodaj, kar bo brskalniku omogočilo, da izbere želeno obliko − AV1 - >> VP9 - >> H.264. No, če ima uporabnik zelo staro napravo ali navigator, ki sploh ne podpira videa (kar je zelo malo verjetno pri H264), potem bo samo videl 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>Ustvarjanje AV1
Ustvarjanje videoposnetkov v AV1 je enostavno. in uporabite spodnje ukaze. Za doseganje ciljne bitne hitrosti uporabljamo 2 prehoda. Za to bomo dvakrat zagnali ffmpeg. Prvič zapišemo rezultat v neobstoječo datoteko. To bo ustvarilo dnevnik, ki bo potreben za drugi zagon 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.mp4Tukaj je razčlenitev parametrov:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Izdelava GIF-jev
Za ustvarjanje GIF-a sem uporabil spodnji ukaz. Da bi zmanjšal velikost, sem GIF spremenil na širino 720 slikovnih pik in 12 sličic na sekundo namesto prvotnega videa s 24 sličicami na sekundo.
./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 testiranja
Bolje enkrat videti kot stokrat prebrati, kajne? Prepričajmo se, da je AV1 prava izbira za naše namene. Posnel sem brezplačen video Tears Of Steel, ki je na voljo tukaj , in ga pretvoril s približno enako bitno hitrostjo za kodeke AV1, VP9, H.264. Rezultati so spodaj, da jih lahko primerjate sami.
Opomba 1: Če se vam spodnja datoteka ne naloži, je morda čas, da posodobite brskalnik. Priporočam brskalnik, ki temelji na Chromiumu, kot je Chrome, Vivaldi, Brave ali Opera. Tukaj so najnovejše informacije o podpori za AV1
Opomba 2: Za Firefox 66 v sistemu Linux boste morali nastaviti zastavico media.av1.enabled v pomen true в about:config
Opomba 3: Odločil sem se, da spodaj ne bom vključil navadnih GIF-ov zaradi njihove velike velikosti in količine podatkov, ki bi jih potreboval za nalaganje te strani! (Kar bi bilo ironično, saj gre pri tej strani za zmanjšanje količine podatkov na strani :)). Končne GIF-je pa si lahko ogledate tukaj
Opomba prevajalca: Habr vam ne omogoča omogočanja samodejnega predvajanja in zanke datoteke, tako da lahko ocenite samo kakovost. Kako bodo izgledale “animirane slike” si lahko ogledate v živo .
Scena 1 pri 200 Kbps
Tukaj je veliko gibanja, kar je še posebej občutljivo pri nizkih bitnih hitrostih. Takoj lahko vidite, kako slab je H.264 pri tej bitni hitrosti; kvadratki so takoj vidni. VP9 nekoliko izboljša situacijo, vendar so kvadrati še vedno vidni. AV1 očitno zmaga, saj ustvarja očitno boljšo sliko.
H.264
VP9
AV1
Scena 2 pri 200 Kbps
Tukaj je veliko prosojne vsebine CGI. Rezultati niso tako drugačni kot zadnjič, a na splošno je AV1 videti bolje.
H.264
VP9
AV1
Scena 3 pri 100 Kbps
V tem prizoru znižamo bitno hitrost na 100 Kb/s in rezultati so dosledni. AV1 ohranja vodstvo tudi pri nizkih bitnih hitrostih!
H.264
VP9
AV1
Češnja na torti
Če želite zaključiti ta članek z občutkom količine prihranjene pasovne širine v primerjavi z GIF - skupna velikost vseh videoposnetkov je višja ... 1.62 MB!! Prav. Nekaj prekletih 1,708,032 bajtov! Za primerjavo so tukaj velikosti videoposnetkov GIF in AV1 za vsak prizor
GIF
AV1
1. prizor
11.7 MB
0.33 MB
2. prizor
7.27 MB
0.18 MB
3. prizor
5.62 MB
0.088 MB
Preprosto osupljivo! Ali ni?
Opomba: Velikosti datotek VP9 in H264 niso navedene, saj se praktično ne razlikujejo od AV1 zaradi uporabe enake bitne hitrosti. Odveč bi bilo dodati še dva stolpca z enakimi velikostmi, samo da bi poudarili, da ti kodeki proizvajajo veliko boljšo kakovost kot GIF pri veliko manjših velikostih datotek.
Vir: www.habr.com