ProHoster > Blogi > Haldamine > On aeg asendada GIF AV1 videoga

On aeg asendada GIF AV1 videoga

On aeg asendada GIF AV1 videoga

On aasta 2019 ja on aeg otsustada GIF-ide kasuks (ei, me ei räägi sellest otsusest! Me ei nõustu siin kunagi! - siin räägime inglise keeles hääldusest, meie jaoks pole see asjakohane - u. tõlge). GIF-id võtavad tohutult ruumi (tavaliselt mitu megabaiti!), mis on veebiarendaja puhul täiesti vastuolus sinu soovidega! Veebiarendajana soovite minimeerida asju, mida kasutajad peavad alla laadima, et sait kiiresti laaditaks. Samal põhjusel vähendate JavaScripti, optimeerite PNG-d, JPEG-e ja mõnikord teisendate JPEG-st WebP-ks. Aga mida teha vana GIF-iga?

Me ei vaja sinna, kuhu läheme, GIF-e!

Kui teie eesmärk on parandada saidi laadimiskiirust, peate GIF-idest lahti saama! Aga kuidas siis animeeritud pilte teha? Vastus on video. Ja enamikul juhtudel saavutate parema kvaliteedi ja ruumisäästu 50-90%! Elus on enamikul asjadel oma plussid ja miinused. Kui asendate GIF-i videoga, ei leia te enamasti miinuseid.

Alla kõik GIF-id!

Õnneks on GIF-ide asendamine videotega viimastel aastatel olnud tavaline, nii et kõik vajalikud tööriistad on juba kasutusel. Selles postituses ma jalgratast uuesti leiutama ei hakka, vaid ainult veidi täiustan olemasolevaid lahendusi. Nii et siin on sisu:

  1. Tehke GIF ja teisendage see videoks
  2. Kodeerige video H.264 või VP9 abil, st. tihendage see ja pakkige see MP4 või WebM konteinerisse
  3. Asenda <img> animeeritud GIF-iga <video> rulliga
  4. GIF-efekti saamiseks lülitage sisse automaatesitus ilma helita ja silmus

Google'il on protsessi kirjeldav hea dokumentatsioon.

On aasta 2019

Praegu on aasta 2019. Edusammud liiguvad edasi ja me peame sellega sammu pidama. Seni on meil olnud kaks kodekivalikut, mida laialdaselt toetatakse kõigis brauserites ja videokodeerimistööriistades.

  1. H.264 — võeti kasutusele 2003. aastal ja kasutatakse tänapäeval kõige laialdasemalt
  2. VP9 - ilmus 2013. aastal ja saavutas tihendustäiustused peaaegu 50% võrreldes H.264-ga, kuigi nagu nad siin kirjutavad kõik ei ole alati nii roosiline

Märkus: Kuigi H.265 on H.264 järgmine versioon ja on võimeline konkureerima VP9-ga, ei pea ma seda kehva brauseri toe tõttu, nagu on näidatud lehel https://caniuse.com/#feat=hevc. Litsentsikulud on peamine põhjus, miks H.265 pole nii laialt levinud kui H.264 ja miks Alliance of Open Media konsortsium töötab autoritasuvaba koodekiga AV1.

Pidage meeles, et meie eesmärk on kahandada tohutud GIF-id võimalikult väikseks, et laadimisaegu kiirendada. Oleks veider 2019, kui meie arsenalis poleks uut video tihendamise standardit. Kuid see on olemas ja seda nimetatakse AV1-ks. AV1-ga saate saavutada ligikaudu 30% parem tihendus võrreldes VP9-ga. Lausa! 🙂

AV1 on teie teenistuses alates 2019. aastast!

Lauaarvutitel

Hiljuti lisati töölauaversioonidele AV1-videodekodeerimise tugi Google Chrome 70 и Mozilla Firefox 65. Praegu on Firefoxi tugi lollakas ja võib põhjustada krahhe, kuid asjad peaksid paranema, kui lisate selle dav1d dekooder juba Firefox 67-s (juba välja antud, kuid toetus on ilmunud - u. tõlge.). Uue versiooni kohta lisateabe saamiseks lugege - dav1d 0.3.0 väljalase: veelgi kiirem!

Nutitelefonides

Praegu puudub nutitelefonidele riistvaratugi, kuna puuduvad vastavad dekooderid. Saate teha tarkvara dekodeerimist, kuigi see suurendab aku tarbimist. Esimesed AV1 riistvaradekodeerimist toetavad mobiilsed SOC-id ilmuvad 2020. aastal.

Ja siis on artikli lugejad nagu: "Kui mobiiltelefonid seda veel korralikult ei toeta, siis milleks kasutada AV1?"

AV1 on üsna uus koodek ja me oleme selle kohandamise alguses. Mõelge sellele artiklile kui etapile „sel ajal, kui teed süüa, järgneb rahvas”. Töölaua tugi iseenesest kiirendab mõne vaatajaskonna jaoks saite. Ja vanu koodekeid saab kasutada varustsenaariumina, kui sihtseade AV1-d ei toeta. Kuid kui kasutajad lülituvad üle AV1 toega seadmetele, on kõik valmis. Selle saavutamiseks peame looma videosildi, nagu allpool näidatud, mis võimaldab brauseril valida eelistatud vormingu − AV1 - >> VP9 - >> H.264. Noh, kui kasutajal on väga vana seade või navigaator, mis videot üldse ei toeta (mis on H264 puhul äärmiselt ebatõenäoline), 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

Videote loomine AV1-s on lihtne. Laadige siit alla oma süsteemi uusim ffmpeg-versioon ja kasutage allolevaid käske. Sihtbitikiiruse saavutamiseks kasutame 2 läbimist. Selleks käivitame ffmpeg kaks korda. Esimesel korral kirjutame tulemuse olematusse faili. See loob logi, mida läheb vaja ffmpegi teisel käitamisel.

# 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 jaotus:

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

GIF-ide tegemine

GIF-i loomiseks kasutasin allolevat käsku. Suuruse vähendamiseks skaleerisin GIF-i algse 720 kaadrit sekundis video asemel 12 piksli laiusele ja 24 kaadrit sekundis.

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

Katsetulemused

Parem on üks kord näha kui sada korda lugeda, eks? Veenduge, et AV1 oleks meie eesmärkide jaoks õige valik. Tegin siin saadaval oleva tasuta Tears Of Steeli video https://mango.blender.org/, ja teisendas selle AV1, VP9, ​​H.264 koodekite jaoks ligikaudu sama bitikiirusega. Tulemused on allpool, et saaksite neid ise võrrelda.

Märkus 1: Kui allolevat faili teie eest ei laadita, võib olla aeg oma brauserit värskendada. Soovitaksin Chromiumil põhinevat brauserit, nagu Chrome, Vivaldi, Brave või Opera. Siin on uusim teave AV1 toe kohta https://caniuse.com/#feat=av1

Märkus 2: Firefox 66 jaoks Linuxis peate määrama lipu media.av1.enabled tähendusse true в about:config

Märkus 3: Otsustasin tavalisi GIF-e alla mitte lisada nende suure suuruse ja selle lehe laadimiseks vajaliku andmemahu tõttu! (Mis oleks irooniline, kuna see leht on seotud lehe andmemahu vähendamisega :)). Kuid siin näete lõplikke GIF-e https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Tõlkija märkus: Habr ei luba lubada automaatesitust ja faili silmust, nii et saate hinnata ainult kvaliteeti. Saate vaadata, kuidas "animeeritud pildid" välja näevad originaalartikkel.

Stseen 1 @ 200 Kbps

Siin on palju liikumist, mis on eriti tundlik madala bitikiiruse korral. Näete kohe, kui halb H.264 selle bitikiirusega on, ruudud on kohe näha. VP9 parandab veidi olukorda, kuid ruudud on siiski näha. AV1 võidab selgelt, luues ilmselgelt parema pildi.

H.264

VP9

AV1

Stseen 2 @ 200 Kbps

Siin on palju läbipaistvat CGI-sisu. Tulemused ei ole nii erinevad 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 on ühtsed. AV1 säilitab oma juhtpositsiooni isegi madala bitikiirusega!

H.264

VP9

AV1

Kirss tordil

Selle artikli lõpetuseks tunnetades salvestatud ribalaiust võrreldes GIF-iga – kõigi videote kogumaht on suurem... 1.62 MB!! Õige. Mingid kuradi 1,708,032 1 XNUMX baiti! Võrdluseks on siin iga stseeni jaoks GIF- ja AVXNUMX-video suurused

GIF
AV1

1. stseen
11.7 MB
0.33 MB

2. stseen
7.27 MB
0.18 MB

3. stseen
5.62 MB
0.088 MB

Lihtsalt vapustav! Pole see?

Märkus: VP9 ja H264 failisuurusi pole antud, kuna need ei erine sama bitikiiruse kasutamise tõttu praktiliselt AV1-st. Oleks üleliigne lisada veel kaks sama suurusega veergu, rõhutamaks, et need koodekid toodavad palju paremat kvaliteeti kui GIF-i palju väiksema failisuurusega.

Allikas: www.habr.com

Lisa kommentaar