🥇Aeg on asendada GIF AV1 videoga

On aeg asendada GIF AV1 videoga.

Praegu on 2019. aasta ja on aeg otsustada GIF'ide üle (ei, see ei ole see otsus! Siin me kunagi ei lepita kokku! — siin on jutt hääldamisest inglise keeles, mis ei puuduta meid — märk. tõlk.). GIF'id võtavad tohutult ruumi (tavaliselt mitmeid megabaite!), mis, kui oled veebiarendaja, on täielik vastand sellele, mida soovid! Veebiarendajana tahad vähendada seda, mida kasutajad peavad allalaadima, et veebisait kiirelt laadida. Sama põhjuse tõttu optimeerid JavaScript'i, vähendad PNG-sid, JPEG'e ja vahel ka konverteerid JPEG'i WebP-ks. Kuid mis teha vanameister GIF'iga?

Kohas, kuhu me suundume, ei ole GIF'e vaja!

Kui sinu eesmärk on parandada veebisaidi laadimiskiirust, siis tuleb GIF'idest vabaneda! Kuid kuidas siis teha animeeritud pilte? Vastus — video. Ja enamikul juhtudel saad parema kvaliteedi ja ruumi kokkuhoiu 50-90%! Enamik asju elus toob endaga kaasa plussid ja miinused. Kui asendad GIF'i videoga, pole miinuseid tõenäoliselt lihtne leida.

Maha kõik GIF'id!

Õnneks on GIF'i asendamine videoga juba aastaid tavapärane asjaolu, seega on kõik vajalikud tööriistad juba käigus. Selles postituses ma ei hakka jalgratast leiutama, vaid täiendan olemasolevaid lahendusi. Niisiis, siin on see, mida tuleb teha:

Võta GIF ja konverteeri see videoks
Kodeeri video H.264 või VP9 abil, st kompressi see ja pakka MP4 või WebM konteinerisse
Asenda <img> animeeritud GIF'iga videosünkrooni
Käivita, ilma helita, ja tsüklite, et saavutada GIF'i effekt

Google'il on hea dokumentatsioon, mis kirjeldab protsessi.

Praegu on 2019. aasta

Praegu on 2019. aasta. Edusammud liiguvad edasi ja me ei tohiks maha jääda. Siiani on meil olnud kaks koodeki varianti, mis on laialdaselt toetatud kõigis brauserites ja video kodeerimise tööriistades:

H.264 — 2003. aastal esmakordselt ilmavalgust näinud ja tänaseks laialdaselt kasutatav
VP9 — 2013. aastal esmakordselt ilmavalgust näinud ja saavutanud peaaegu 50% paremast kompressioonist võrreldes H.264-ga, kuigi nagu siin öeldakse ei ole kõik ja alati nii roosilised

Märkus: kuigi H.265 standard on H.264 järgmine versioon ja suudab konkureerida VP9-ga, ei võta ma seda arvesse nõrga brauseritootmise tõttu, mida tõestab leht https://caniuse.com/#feat=hevc. Litsentsitasud on peamine põhjus, miks H.265 ei ole sama ulatuslik kui H.264 ning miks avatud meedia allianss töötab tasudeta koodeki — AV1 kallal.

Pea meeles, et meie eesmärk on vähendada tohutuid GIF'e kõige väiksema võimaliku suuruseni, et kiirendada laadimist. See oleks kummaline 2019. aasta, kui meil ei oleks oma arsenalis uut standardit videote kompressimiseks. Aga see on olemas ja seda nimetatakse AV1. AV1 võimaldab aidata saavutada umbes 30% paremat kompressiooni võrreldes VP9-ga. Ilus! 🙂

AV1 on saadaval alates 2019. aastast!

Töölauas

Hiljuti lisati AV1 video dekodeerimise toetus töölaua versioonidesse Google Chrome 70 ja Mozilla Firefox 65. Praegu on Firefox'is toetus tõrkeid ja võib põhjustada krahhe, kuid asjad peaksid paranema koos dav1d dekooderiga juba Firefox 67-s (on juba ilmunud, ja toetus on tekkinud — kt. tõlge). Uue versiooni kohta lisateabe saamiseks vaadake — dav1d 0.3.0 väljaanne: veel kiirem!

Nutitelefonides

Nutitelefonides puudub praegu riistvara toetus, kuna sobivaid dekoodereid pole. Saad teha tarkvaralise dekodeerimise, kuid see suurendab akut. Esimesed mobiilsed SOC-id, mis toetavad AV1 riistvara dekodeerimist, ilmuvad 2020. aastal.

Ja siin on artikli lugejad sellised: «Kui mobiilid ei toeta korralikult, miks siis kasutada AV1?»

AV1 on üsna uus koodek ja me oleme alles selle kohandamise alguses. Mõtle sellele artiklile kui etapp, kus «kui sa valmistad, siis inimesed liituvad». Tugi töölaual kiirendab juba saidid osa publikast. Ja vanu koodekeid saab kasutada tagasilangemise stsenaariumi, kui sihtseadmest AV1 ei toetata. Kuid kui kasutajad liiguvad seadmete poole, mis toetavad AV1, on kõik juba valmis. Selleks peame looma video sildi, nagu allpool näidatud, et lubada brauseril valida eelistatud vorming — AV1 ->> VP9 ->> H.264. Ja kui kasutajal on äärmiselt vana seade või brauser, mis ei toeta üldse videoid (mis on ülimalt ebatõenäoline H264 puhul), siis näeb ta lihtsalt GIF'i

<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 loomine

AV1-s video loomine ei ole keeruline. Laadi alla viimased ffmpeg'i ehitused oma süsteemi jaoks siit ja kasuta allolevaid käske. Me kasutame sihtbitrate saavutamiseks kahte läbimist. Selleks käivitame ffmpeg'i kaks korda. Esmakordselt salvestame tulemuse mitteolemasolevasse faili. See loob logi, mida vajatakse teise ffmpeg'i käivitamiseks.

# 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

Siin on parameetrite selgitus:

-i - Sissekanne.

-pix_fmt - Kasutame 4:2:0 formaati video värvinformatsiooni valimiseks. On palju teisi võimalikke formaate, kuid 4:2:0 on kõige ühilduvam.

-c:v - Millist koodekit kasutada, meie puhul - AV1.<br />
-b:v – Keskmine bitikiirus, mida soovime saavutada.

-filter:v scale - ffmpeg'i suurendamisfilter, mida kasutatakse video eraldusvõime vähendamiseks. Seame X:-1, mis ütleb ffmpeg'ile, et vähendada laiust X, säilitades kuvasuhte.

-strict experimental - Tuleb määrata, kuna AV1 on piisavalt uus koodek.

-cpu-used - Kohutavalt nimetatud parameeter, mida tegelikult kasutatakse video kvaliteeditaseme valimiseks. Võimalikud väärtused 0-4. Mida väiksem väärtus, seda parem kvaliteet ja vastavalt sellele kauem aega, mis kulub kodeerimiseks.

-tile-columns - Kogub mitmeid lõime. Ütleb AV1-le, et jagada video eraldi veergudeks, mis võivad sõltumatult kodeeritud olla, et paremini ära kasutada protsessorit.

-row-mt – Sama, mis eelmine parameeter, kuid jagab ka read veergude sees.

-threads - Lõimede arv.

-pass - Milline läbimine toimub hetkel.

-f - Kasutatakse ainult esimesel läbimisel. Määrab väljundfaili formaadi, st MP4 meie puhul.

-movflags faststart - Lülitame sisse video kiire alguse, nihutades osa andmeid faili algusesse. See võimaldab mängimist alustada enne faili täielikku laadimist.

GIFi loomine

GIFi loomiseks kasutasin allpool olevat käsku. GIFi suuruse vähendamiseks skaleerisin selle laiusel 720px ja 12 fps asemel algse video 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.gif

Testide tulemused

Üks kord on parem kui sada korda lugeda, eks? Veendume, et AV1 on meie eesmärkide jaoks õige valik. Kasutasin tasuta videot Tears Of Steel, mis on saadaval siin https://mango.blender.org/, ja muutsin selle, kasutades AV1, VP9 ja H.264 koodekite jaoks umbkaudu sama bitikiirus. Tulemused on allpool, et saaksite neid ise võrrelda.

Märkus 1: Kui allolev fail ei laadi, võib olla aeg oma brauserit uuendada. Soovitan Chromiumi põhist brauserit, nagu Chrome, Vivaldi, Brave või Opera. Siin on viimane teave AV1 toe kohta https://caniuse.com/#feat=av1

Märkus 2: Firefox 66 puhul Linuxis peate seadistama lipu media.av1.enabled väärtuse true ühes about:config

Märkus 3: Otsustasin mitte lisada tavalisi GIF-e allpool nende suure suuruse ja andmemahtude tõttu, mis võiksid selle lehe laadimiseks vajalikud olla! (Mis oleks iroonia, sest see leht käsitleb andmemahtude vähendamist :)). Kuid võite vaadata lõplikke GIF-e siin https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Tõlkija märkus: Habr ei luba autolaadimist ega faili tsüklit, seega on kvaliteedi hindamine ainus võimalik. Elavas vormis saab "animeeritud pilte" näha originaalses artiklis.

Stseen 1 @ 200 Kbps

Siin on palju liikumist, mis on madalatel bitikiirusel eriti tundlik. On kohe näha, kui halb H.264 selle bitikiirusel on, ruudud on kohe nähtavad. VP9 parandab olukorda veidi, kuid ruudud on endiselt nähtavad. AV1 on selgelt parem, pakkudes ilmselgelt paremat pilti.

H.264 VP9

AV1

Stseen 2 @ 200 Kbps

Siin on palju poolläbipaistvat CGI sisu. Tulemused ei erine enam nii palju kui eelmisel korral, kuid üldiselt näeb AV1 parem välja.

H.264 VP9

AV1

Stseen 3 @ 100 Kbps

Selles stseenis vähendame bitikiirust 100 Kbps-ni ja tulemused vastavad sellele. AV1 püsib madalatel bitikiirusel endiselt parim!

H.264 VP9

AV1

Tordi kirsike

Lõpetamaks artiklit, tunne, kui palju liiklust on kokku hoitud võrreldes GIF-iga - kõigi ülaltoodud videotega kokkuvõtlik suurus… 1.62 MB!! Just nii. Need on kuradi 1,708,032 baiti! Võrdluseks, siin on GIF ja AV1 suurused iga stseeni jaoks

GIF
AV1

Stseen 1
11.7 MB
0.33 MB

Stseen 2
7.27 MB
0.18 MB

Stseen 3
5.62 MB
0.088 MB

Lihtsalt hämmastav! Kas pole?

Märkus: VP9 ja H264 failide suurust ei ole esitatud, kuna need ei erine AV1-st praktiliselt nende sama bitikiiruse tõttu. Oleks liialdus lisada veel kaks samasugust veergu, et rõhutada, et need koodekid pakuvad palju paremat kvaliteeti kui GIF palju väiksemate failisuurustega.

Allikas: habr.com