🥇Aeg on asendada GIF AV1 videoga

On aeg asendada GIF AV1 videoga

Praegu on 2019. aasta ja meil on aeg teha otsus GIF-ide osas (ei, see ei ole see otsus! Siin me kunagi ei lepi kokku! — siin on jutt ingliskeelsest hääldusest, mis meie jaoks ei ole oluline — nt tõlk.). GIF-id võtavad tohutult ruumi (tavaliselt mitu megabaiti!), mis, kui olete veebiarendaja, on täielikult vastuolus teie soovidega! Veebiarendajana soovite minimeerida kõike, mida kasutajad peavad allalaadima, et leht kiiremini laadiks. Samal põhjusel minimeerite JavaScripti, optimeerite PNG-d, JPEG-i ja mõnikord ka konverteerite JPEG-i WebP-ks. Mis me aga teeme vana GIF-iga?

Kohtades, kuhu me suundume, ei ole GIF-e vaja!

Kui teie eesmärk on veebilehe laadimise kiirus, siis tuleb GIF-idest lahti saada! Aga kuidas siis teha animeeritud pilte? Vastus on video. Ja enamikul juhtudel saate parema kvaliteedi ja ruumi kokkuhoiu 50–90%! Elus on enamikul asjadel oma plussid ja miinused. Kui asendate GIF-i videoga, ei leia te enamasti miinuseid.

Käsi alla kõikidele GIF-idele!

Käesoleval ajal on GIF-ide asendamine videoga olnud tavapärane praktika viimastel aastatel, nii et kõik vajalikud tööriistad on juba olemas. Selles postituses ei hakka ma ratast leiutama, vaid natuke täiustan olemasolevaid lahendusi. Nii et siin on asi:

Võtke GIF ja konverteerige see videoks
Koodige video H.264 või VP9 abil, st tihendage see ja pakkige MP4 või WebM konteinerisse
Asendage <img> animeeritud GIF videoga
Lubage automaatne esitamine ilma helita ja tsüklit, et saavutada GIF-i efekt

Google'il on hea dokumentatsioon selle protsessi kirjeldamiseks.

Praegu on 2019. aasta

Praegu on 2019. aasta. Edusammud liiguvad edasi ja me peame sellest mitte maha jääma. Seni on meil olnud kaks koodekit, mis on laialdaselt toetatud kõigis brauserites ja videode kodeerimise tööriistades:

H.264 — esmakordselt tutvustatud 2003. aastal ja laialdaselt kasutusel tänapäeval
, mis on toetatud umbes ¾ browsereid (sealhulgas mobiilseadmeid). — esmakordselt tutvustatud 2013. aastal ja saavutanud peaaegu 50% parema tihenduse võrreldes H.264, kuigi nagu siin kirjutatakse ei ole kõik ja mitte alati nii roosilised

Märkus: kuigi H.265 standard on järgmine versioon H.264 ja suudab konkureerida VP9-ga, ei vaata ma seda nõrkade brauseritoe tõttu, nagu on näidatud lehelt https://caniuse.com/#feat=hevc. Üks peamisi põhjusi, miks H.265 ei ole saanud sama populaarseks kui H.264, on litsentsimise kulud, ning seetõttu töötab Alliance of Open Media avatud koodekiga AV1, mis ei nõua tasu.

Pidage meeles, et meie eesmärk on vähendada suuri GIF-e võimalikult väikseks, et kiirendada laadimist. 2019. aasta oleks olnud kummaline, kui meil poleks olnud uut videotihenduse standardit. Kuid see on olemas ja seda kutsutakse AV1. AV1 võimaldab saavutada umbes 30% paremat tihendust võrreldes VP9. Imeline! 🙂

AV1 on teie käsutuses alates 2019. aastast!

Arvutites

Hiljuti lisati AV1 video dekodeerimise tugi töölauaversioonidesse Google Chrome 70 ja Mozilla Firefox 65. Praegu on Firefoxi tugi veidi vigane ja võib põhjustada kokkupea, kuid asjad peaksid paranema koos dav1d dekoodri lisamisega juba Firefox 67 (on välja antud ning tugi on nüüd olemas — toimetaja märkus). Lisateabe jaoks lugeda — dav1d 0.3.0 väljaanne: veelgi kiirem!

Nutitelefonides

Nutitelefonides puudub praegu riistvaraline tugi, kuna sobivaid dekoodreid pole. Programmiline dekodeerimine on võimalik, kuid see suurendab aku kasutust. Esimesed mobiilised SOC-d, mis toetavad AV1 riistvaralist dekodeerimist, peaksid ilmuma 2020. aastal.

Ja siis on lugejad sellised: "Aga kui mobiilid ei toeta veel korralikult, miks siis kasutada AV1?"

AV1 on üsna uus koodek ja me oleme alles selle kohandamise alguses. Vaadake sellele artiklile kui staadiumile "kui te valmistate, rahvas on eelnevalt valmis". Tugi töölauaarvutites kiirendab juba mõnes mõttes veebisaite. Vanemaid koodekeid saab kasutada varuvariantidena, kui sihtseadmel pole AV1 toe. Samasugused seadmeid toetavatele seadmetele üleminekuga on kõik juba valmis. Selle saavutamiseks peame looma video sildi, nagu allpool näidatud, mis võimaldab brauseril valida eelistatud formaadi — AV1 ->> , mis on toetatud umbes ¾ browsereid (sealhulgas mobiilseadmeid). ->> H.264. Kui kasutajal on siiski väga vana seade või brauser, mis ei toeta videot üldse (mida on väga ebatõenäoline H264 puhul), siis ta lihtsalt näeb 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. Laadige alla uusim FFmpeg versioon oma süsteemile siit ja kasutage allpool toodud käsku. Me saavutame siht-bitikiirusest kahe vooruga. Selleks käivitame ffmpeg kaks korda. Esmakordselt salvestame tulemuse mitteeksisteerivasse faili. See loob logi, mida on vaja teiseks 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 - Sissefail.

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

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

-filter:v scale - ffmpeg'i skaalafilter, mida kasutatakse video eraldussvõime vähendamiseks. Seame X:-1, mis ütleb ffmpeg'ile vähendada laius X-ks, säilitades kuvasuhe.

-strict experimental - Tuleb märgata, kuna AV1 on piisavalt uus kodek.

-cpu-used - Kohutavalt nimetatud parameeter, mida tegelikult kasutatakse video kvaliteedi taseme valimiseks. Võimalikud väärtused 0-4. Mida madalam väärtus, seda parem kvaliteet ja vastavalt pikem kodeerimisaeg.

-tile-columns - Kasutamiseks mitme niidi puhul. Ütleb AV1-le jagada video eraldi veergudeks, mida saab iseseisvalt ümber kodeerida, et paremini kasutada protsessorit.

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

-threads - Niitide arv.

-pass - Milline läbimine praegu toimub.

-f - Kasutatakse ainult esimesel läbimisel. Näitab väljundfaili formaati, st MP4 meie puhul.

-movflags faststart - Lülitame sisse kiire video alguse, nihutades osa andmetest faili algusesse. See võimaldab vaatamist alustada enne, kui fail on täielikult laaditud.

GIFi loomine

GIFi loomiseks kasutasin allolevat käsku. GIFi suuruse vähendamiseks skaalasin selle laiuseks 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

Testi tulemused

Parim on üks kord näha kui sada korda lugeda, kas pole? Veendugem, et AV1 oleks meie eesmärkide jaoks õige valik. Võtsin tasuta video Tears Of Steel, mis on saadaval siin https://mango.blender.org/, ja konvertisin selle, kasutades ligikaudu sama bitikiirus, et AV1, VP9, H.264 koodekite vahel. Tulemused on allpool, et saaksite neid ise võrrelda.

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

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

Märkus 3: Otsustasin allpool mitte lisada tavalisi GIF-e nende suuruse ja andmemahtude tõttu, mis oleks vajalik selle lehe laadimiseks! (Mis oleks iroonia, kuna see leht käsitleb andmemahtude vähendamist :)). Kuid saate 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 automaatset esitust ja faili tsüklit, seega saab hinnata vaid kvaliteeti. Vaadata, kuidas "animeeritud pildid" reaalajas välja näevad, saab siin originaalartiklis.

Stseen 1 @ 200 Kbps

Siin on palju liikumist, mis on madalatel bitikiirusel eriti tundlik. On kohe näha, kui halb on H.264 sellel bitikiirusel, tulevad välja ruudud. VP9 parandab olukorda veidi, kuid ruudud on endiselt nähtavad. AV1 võidab selgelt, esitades ilmselgelt parema pildi.

H.264 , mis on toetatud umbes ¾ browsereid (sealhulgas mobiilseadmeid).

AV1

Stseen 2 @ 200 Kbps

Siin on palju poolläbipaistvat CGI sisu. Tulemused ei erine enam nii palju kui eelmine kord, kuid kokkuvõttes näeb AV1 parem välja.

H.264 , mis on toetatud umbes ¾ browsereid (sealhulgas mobiilseadmeid).

AV1

Stseen 3 @ 100 Kbps

Selles stseenis vähendame bitikiirus 100 Kbps-ni ja tulemused vastavad sellele. AV1 hoiab juhtpositsiooni ka madalatel bitikiirusel!

H.264 , mis on toetatud umbes ¾ browsereid (sealhulgas mobiilseadmeid).

AV1

Kirsiks tordil

Artikli lõpetamiseks, tundes säästetud liiklust võrreldes GIF-iga — kõikide ülaltoodud videote kogumaht… 1.62 MB!! Õige. Need on 1,708,032 bitti! Võrdluseks on siin GIF- ja AV1-videote 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 imeline! Ei ole nii?

Märkus: VP9 ja H264 failimõõte ei ole esitatud, kuna need on praktiliselt samad kui AV1, kuna kasutatakse sama bittide kiirus. Veel kahte veergu oleks üleliigne lisada, et rõhutada, et need koodekid pakuvad palju paremat kvaliteeti kui GIF palju väiksemate failimõõtmetega.

Allikas: habr.com