Það er kominn tími til að skipta út GIF fyrir AV1 myndband

Það er 2019 og það er kominn tími til að við ákveðum GIF (nei, við erum ekki að tala um þessa ákvörðun! Við verðum aldrei sammála hér! - hér erum við að tala um framburð á ensku, fyrir okkur á þetta ekki við - ca. þýðing). GIF-myndir taka mikið pláss (venjulega nokkur megabæti!), sem, ef þú ert vefhönnuður, er algjörlega þvert á óskir þínar! Sem vefhönnuður vilt þú lágmarka það sem notendur þurfa að hlaða niður svo að síðan hleðst hratt. Af sömu ástæðu minnkarðu JavaScript, fínstillir PNG, JPEG og breytir stundum JPEG til WebP. En hvað á að gera við gamla GIF?

Við munum ekki þurfa GIF þar sem við erum að fara!

Ef markmið þitt er að bæta hleðsluhraða vefsvæðis, þá þarftu að losna við GIF! En hvernig gerir maður þá hreyfimyndir? Svarið er myndband. Og í flestum tilfellum færðu betri gæði og plásssparnað upp á 50-90%! Í lífinu hefur flest sína kosti og galla. Þegar þú skiptir út GIF fyrir myndband muntu oftast ekki finna neina galla.

Niður með öll GIF!

Sem betur fer hefur það verið algengt að skipta út GIF fyrir myndbönd undanfarin ár, svo öll nauðsynleg verkfæri eru þegar í notkun. Í þessari færslu mun ég ekki finna upp hjólið upp á nýtt, heldur mun aðeins bæta núverandi lausnir. Svo hér er kjarni:

1. Taktu GIF og breyttu því í myndband
2. Kóðaðu myndbandið með H.264 eða VP9, ​​þ.e. þjappaðu því og pakkaðu því í MP4 eða WebM ílát
3. Skipta um <img> með hreyfimyndum á GIF <video> með rúllu
4. Kveiktu á sjálfvirkri spilun án hljóðs og lykkju fyrir GIF áhrif

Google hefur góð skjöl sem lýsa ferlinu.

Það er 2019

Það er 2019 núna. Framfarir þokast áfram og við verðum að halda í við það. Hingað til höfum við haft tvo merkjamálmöguleika sem eru víða studdir í öllum vöfrum og myndbandskóðunarverkfærum:

1. H.264 - kynnt árið 2003 og mest notað í dag
2. VP9 - kom fram árið 2013 og náði samþjöppunarbótum upp á tæp 50% miðað við H.264, þó eins og þeir skrifa hér það er ekki alltaf allt jafn bjart

Ath: Þó að H.265 sé næsta útgáfa af H.264 og sé fær um að keppa við VP9, ​​tel ég það ekki vegna lélegs vafrastuðnings, eins og sýnt er á síðunni https://caniuse.com/#feat=hevc. Lic

Mundu að markmið okkar er að minnka risastór GIF í minnstu mögulegu stærð til að flýta fyrir hleðslutíma. Það væri skrítið 2019 ef við hefðum ekki nýjan staðal fyrir myndþjöppun í vopnabúrinu okkar. En hann er til og heitir AV1. Með AV1 geturðu ná um það bil 30% framförum í þjöppun samanborið við VP9. Lepota! 🙂

AV1 er til þjónustu frá árinu 2019!

Á borðtölvum

Nýlega var stuðningi við AV1 myndbandsafkóðun bætt við skrifborðsútgáfur Google Chrome 70 и 65. Mozilla Firefox XNUMX. Núna er Firefox stuðningur gallaður og getur valdið hrunum, en hlutirnir ættu að batna með því að bæta við dav1d afkóðari þegar í Firefox 67 (þegar gefið út, en stuðningur hefur birst - ca. þýðing.). Fyrir frekari upplýsingar um nýju útgáfuna, lestu - dav1d 0.3.0 útgáfa: enn hraðari!

Á snjallsímum

Sem stendur er enginn vélbúnaðarstuðningur fyrir snjallsíma vegna skorts á viðeigandi afkóðarum. Þú getur gert hugbúnaðarafkóðun, þó það muni leiða til aukinnar rafhlöðunotkunar. Fyrstu farsíma SOC sem styðja AV1 vélbúnaðarafkóðun munu birtast árið 2020.

Og þá eru lesendur greinarinnar eins og, "þannig að ef farsímar styðja það ekki almennilega ennþá, af hverju að nota AV1?"

AV1 er frekar nýr merkjamál og við erum í byrjun aðlögunar hans. Hugsaðu um þessa grein sem stigið „meðan þú eldar mun mannfjöldinn fylgja“. Stuðningur við skrifborð mun í sjálfu sér flýta fyrir vefsvæðum fyrir suma áhorfendur. Og gamla merkjamál er hægt að nota sem varatilvik þegar AV1 er ekki studdur á marktækinu. En þegar notendur skipta yfir í tæki með AV1 stuðningi verður allt tilbúið. Til að ná þessu þurfum við að búa til myndbandsmerki eins og sýnt er hér að neðan, sem gerir vafranum kleift að velja valið snið - AV1 - >> VP9 - >> H.264. Jæja, ef notandinn er með mjög gamalt tæki eða stýrikerfi sem styður alls ekki myndband (sem er afar ólíklegt með H264), þá mun hann bara sjá 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>

Sköpun AV1

Það er auðvelt að búa til myndbönd í AV1. Sæktu nýjustu ffmpeg bygginguna fyrir kerfið þitt héðan og notaðu skipanirnar hér að neðan. Við notum 2 sendingar til að ná markmiðinu bitahraða. Til að gera þetta munum við keyra ffmpeg tvisvar. Í fyrsta skipti sem við skrifum niðurstöðuna í skrá sem ekki er til. Þetta mun búa til log sem þarf fyrir seinni keyrslu 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.mp4

Hér er sundurliðun á breytum:

-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

Að búa til GIF

Til að búa til GIF notaði ég skipunina hér að neðan. Til að minnka stærðina skalaði ég GIF í 720px á breidd og 12 ramma á sekúndu í stað upprunalega 24 ramma á sekúndu.

./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

Niðurstöður prófana

Það er betra að sjá einu sinni en að lesa hundrað sinnum, ekki satt? Við skulum ganga úr skugga um að AV1 sé rétti kosturinn fyrir okkar tilgang. Ég tók ókeypis Tears Of Steel myndbandið sem er fáanlegt hér https://mango.blender.org/, og breytti því með því að nota um það bil sama bitahraða fyrir AV1, VP9, ​​​​H.264 merkjamál. Niðurstöðurnar eru hér að neðan svo þú getir borið þær saman sjálfur.

Athugasemd 1: Ef skráin hér að neðan hleðst ekki fyrir þig gæti verið kominn tími til að uppfæra vafrann þinn. Ég myndi mæla með Chromium vafra eins og Chrome, Vivaldi, Brave eða Opera. Hér eru nýjustu upplýsingarnar um AV1 stuðning https://caniuse.com/#feat=av1

Athugasemd 2: Fyrir Firefox 66 á Linux þarftu að stilla fánann media.av1.enabled í merkingu true в about:config

Athugasemd 3: Ég hef ákveðið að hafa ekki venjulega GIF-mynd hér að neðan vegna stórrar stærðar þeirra og gagnamagns sem það þyrfti til að hlaða þessari síðu! (Sem væri kaldhæðnislegt, þar sem þessi síða snýst um að minnka gagnamagn á síðu :)). En þú getur séð síðustu GIF myndirnar hér https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Athugasemd þýðanda: Habr leyfir þér ekki að virkja sjálfvirka spilun og lykkja skrána, svo þú getur aðeins metið gæðin. Þú getur séð hvernig „teiknimyndirnar“ munu líta út í beinni útsendingu upprunalega grein.

Vettvangur 1 @ 200 Kbps

Hér er mikil hreyfing sem er sérstaklega viðkvæm við lágan bitahraða. Þú getur strax séð hversu slæmt H.264 er á þessum bitahraða, ferningar sjást strax. VP9 bætir ástandið aðeins, en reitirnir sjást enn. AV1 vinnur greinilega og gefur augljóslega betri mynd.

H.264

VP9

AV1

Vettvangur 2 @ 200 Kbps

Það er mikið af hálfgagnsæru CGI efni hér. Niðurstöðurnar eru ekki eins ólíkar og síðast, en á heildina litið lítur AV1 betur út.

H.264

VP9

AV1

Vettvangur 3 @ 100 Kbps

Í þessu atriði lækkum við bitahraða niður í 100 Kbps og niðurstöðurnar eru í samræmi. AV1 heldur forystu sinni jafnvel á lágum bitahraða!

H.264

VP9

AV1

Kirsuber á köku

Til að klára þessa grein með því að finna hversu mikið bandbreidd er vistuð miðað við GIF - heildarstærð allra myndbanda er hærri... 1.62 MB!! Rétt. Sum helvítis 1,708,032 bæti! Til samanburðar eru hér GIF og AV1 myndbandsstærðir fyrir hverja senu

GIF
AV1

Atriði 1
11.7 MB
0.33 MB

Atriði 2
7.27 MB
0.18 MB

Atriði 3
5.62 MB
0.088 MB

Einfaldlega töfrandi! Er það ekki?

Ath: Skráarstærðir VP9 og H264 eru ekki gefnar upp, þar sem þær eru nánast ekki frábrugðnar AV1 vegna notkunar á sama bitahraða. Það væri óþarfi að bæta við tveimur dálkum til viðbótar með sömu stærðum, bara til að leggja áherslu á að þessir merkjamál framleiða miklu betri gæði en GIF í miklu minni skráarstærðum.

Heimild: www.habr.com