Është koha për të zëvendësuar GIF me video AV1

Është viti 2019 dhe është koha që të vendosim për GIF (jo, nuk po flasim për këtë vendim! Nuk do të pajtohemi kurrë këtu! - këtu po flasim për shqiptimin në anglisht, për ne kjo nuk është e rëndësishme - përafërsisht. përkthimi). GIF-të zënë një hapësirë ​​të madhe (zakonisht disa megabajt!), e cila, nëse jeni një zhvillues ueb, është plotësisht në kundërshtim me dëshirat tuaja! Si një zhvillues ueb, ju dëshironi të minimizoni gjërat që përdoruesit duhet të shkarkojnë në mënyrë që faqja të ngarkohet shpejt. Për të njëjtën arsye, ju minimizoni JavaScript, optimizoni PNG, JPEG dhe ndonjëherë konvertoni JPEG në WebP. Por çfarë të bëni me GIF-in e vjetër?

Nuk do të na duhen GIF ku po shkojmë!

Nëse qëllimi juaj është të përmirësoni shpejtësinë e ngarkimit të faqes, atëherë duhet të hiqni qafe GIF-të! Por si mund të bëni fotografi të animuara? Përgjigja është video. Dhe në shumicën e rasteve, ju do të merrni cilësi më të mirë dhe kursim hapësire prej 50-90%! Në jetë, shumica e gjërave kanë të mirat dhe të këqijat e tyre. Kur zëvendësoni GIF-in me video, më shpesh nuk do të jeni në gjendje të gjeni ndonjë kundër.

Poshtë me të gjitha GIF-të!

Për fat të mirë, zëvendësimi i GIF-ve me video ka qenë i zakonshëm vitet e fundit, kështu që të gjitha mjetet e nevojshme janë tashmë në përdorim. Në këtë postim, unë nuk do të rishpik timonin, por vetëm do të përmirësoj pak zgjidhjet ekzistuese. Pra, këtu është thelbi:

1. Merrni një GIF dhe kthejeni atë në një video
2. Kodoni videon duke përdorur H.264 ose VP9, ​​d.m.th. ngjesh dhe paketoje në kontejner MP4 ose WebM
3. zëvendësoj <img> me GIF të animuar të ndezur <video> me rul
4. Aktivizo luajtjen automatike pa zë dhe lak për një efekt GIF

Google ka dokumentacion të mirë që përshkruan procesin.

Është viti 2019

Tani është viti 2019. Progresi ecën përpara dhe ne duhet të vazhdojmë me të. Deri më tani kemi pasur dy opsione të kodikut që mbështeten gjerësisht në të gjithë shfletuesit dhe mjetet e kodimit të videove:

1. H.264 - i prezantuar në vitin 2003 dhe më i përdorur sot
2. VP9 - u shfaq në vitin 2013 dhe arriti përmirësime të ngjeshjes prej gati 50% në krahasim me H.264, megjithëse siç shkruajnë këtu jo çdo gjë është gjithmonë kaq rozë

Shenim: Megjithëse H.265 është versioni tjetër i H.264 dhe është i aftë të konkurrojë me VP9, ​​nuk e konsideroj atë për shkak të mbështetjes së dobët të shfletuesit, siç tregohet në faqe https://caniuse.com/#feat=hevc. Kostot e licencimit janë arsyeja kryesore pse H.265 nuk është bërë aq i përhapur sa H.264 dhe pse konsorciumi Alliance of Open Media po punon me një kodek pa pagesë, AV1.

Mos harroni, qëllimi ynë është të zvogëlojmë GIF-të e mëdha në madhësinë më të vogël të mundshme për të shpejtuar kohën e ngarkimit. Do të ishte një 2019 e çuditshme nëse nuk do të kishim një standard të ri për kompresimin e videos në arsenalin tonë. Por ekziston dhe quhet AV1. Me AV1 mundesh të arrijë afërsisht 30% përmirësim në kompresim në krahasim me VP9. Lepota! 🙂

AV1 është në shërbimin tuaj që nga viti 2019!

Në desktop

Së fundmi, mbështetja për dekodimin e videos AV1 u shtua në versionet e desktopit Google Chrome 70 и Mozilla Firefox 65. Për momentin, mbështetja e Firefox-it është me probleme dhe mund të shkaktojë përplasje, por gjërat duhet të përmirësohen me shtimin e dekoder dav1d tashmë në Firefox 67 (tashmë është lëshuar, por mbështetja është shfaqur - përafërsisht. përkth.). Për detaje rreth versionit të ri lexoni - Lirimi i dav1d 0.3.0: edhe më i shpejtë!

Në telefonat inteligjentë

Aktualisht nuk ka mbështetje harduerike për telefonat inteligjentë për shkak të mungesës së dekoderave të duhur. Ju mund të bëni dekodimin e softuerit, megjithëse kjo do të çojë në rritjen e konsumit të baterisë. SOC-të e para celulare që mbështesin dekodimin e harduerit AV1 do të shfaqen në vitin 2020.

Dhe pastaj lexuesit e artikullit janë si, "pra, nëse telefonat celularë nuk e mbështesin atë ende siç duhet, pse të përdorni AV1?"

AV1 është një kodek mjaft i ri dhe ne jemi në fillimin e përshtatjes së tij. Mendoni për këtë artikull si fazën "ndërsa gatuani, turma do të ndjekë". Mbështetja e desktopit në vetvete do të shpejtojë faqet për disa nga audienca. Dhe kodekët e vjetër mund të përdoren si një skenar kthimi kur AV1 nuk mbështetet në pajisjen e synuar. Por ndërsa përdoruesit kalojnë te pajisjet me mbështetje AV1, gjithçka do të jetë gati. Për ta arritur këtë, ne duhet të krijojmë një etiketë video siç tregohet më poshtë, e cila do të lejojë shfletuesin të zgjedhë formatin e tij të preferuar − AV1 - >> VP9 - >> H.264. Epo, nëse përdoruesi ka një pajisje ose navigator shumë të vjetër që nuk mbështet fare video (gjë që është jashtëzakonisht e pamundur me H264), atëherë ai thjesht do të shohë GIF-in

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

Krijimi i AV1

Krijimi i videove në AV1 është i lehtë. Shkarkoni ndërtimin më të fundit ffmpeg për sistemin tuaj nga këtu dhe përdorni komandat e mëposhtme. Ne përdorim 2 kalime për të arritur shpejtësinë e synuar të biteve. Për ta bërë këtë, ne do të ekzekutojmë ffmpeg dy herë. Herën e parë që shkruajmë rezultatin në një skedar që nuk ekziston. Kjo do të krijojë një regjistër që do të nevojitet për ekzekutimin e dytë të 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

Këtu është një ndarje e parametrave:

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

Bërja e një GIF

Për të krijuar GIF-in përdora komandën e mëposhtme. Për të reduktuar madhësinë, e rrita GIF-in në 720 pikselë të gjerë dhe 12 fps në vend të videos origjinale 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

Rezultatet e provës

Është më mirë të shohësh një herë sesa të lexosh njëqind herë, apo jo? Le të sigurohemi që AV1 është zgjedhja e duhur për qëllimet tona. Kam marrë videon falas të Tears Of Steel të disponueshme këtu https://mango.blender.org/, dhe e konvertoi atë duke përdorur afërsisht të njëjtin shpejtësi bit për kodekët AV1, VP9, ​​H.264. Rezultatet janë më poshtë, kështu që ju mund t'i krahasoni ato vetë.

Shënim 1: Nëse skedari më poshtë nuk ngarkohet për ju, mund të jetë koha për të përditësuar shfletuesin tuaj. Unë do të rekomandoja një shfletues të bazuar në Chromium si Chrome, Vivaldi, Brave ose Opera. Këtu janë informacionet më të fundit për mbështetjen e AV1 https://caniuse.com/#feat=av1

Shënim 2: Për Firefox 66 në Linux do t'ju duhet të vendosni flamurin media.av1.enabled në kuptim true в about:config

Shënim 3: Kam vendosur të mos përfshij GIF-të e rregullta më poshtë për shkak të madhësisë së tyre të madhe dhe sasisë së të dhënave që do të kërkonte për të ngarkuar këtë faqe! (Gjë që do të ishte ironike, pasi kjo faqe ka të bëjë me zvogëlimin e sasisë së të dhënave në një faqe :)). Por ju mund të shihni GIF-et përfundimtare këtu https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Shënim i përkthyesit: Habr nuk ju lejon të aktivizoni luajtjen automatike dhe të bëni ciklin e skedarit, kështu që mund të vlerësoni vetëm cilësinë. Ju mund të shihni se si do të duken "fotografitë e animuara" drejtpërdrejt artikull origjinal.

Skena 1 @ 200 Kbps

Këtu ka shumë lëvizje, e cila është veçanërisht e ndjeshme në shpejtësi të ulët bit. Ju mund të shihni menjëherë se sa i keq është H.264 në këtë shpejtësi bit; katrorët duken menjëherë. VP9 përmirëson pak situatën, por sheshet janë ende të dukshme. AV1 fiton qartë, duke prodhuar një pamje dukshëm më të mirë.

H.264

VP9

AV1

Skena 2 @ 200 Kbps

Këtu ka shumë përmbajtje CGI të tejdukshme. Rezultatet nuk janë aq të ndryshme sa herën e kaluar, por në përgjithësi AV1 duket më mirë.

H.264

VP9

AV1

Skena 3 @ 100 Kbps

Në këtë skenë, ne ulim shpejtësinë e biteve në 100 Kbps dhe rezultatet janë të qëndrueshme. AV1 ruan lidershipin e tij edhe me shpejtësi të ulët bit!

H.264

VP9

AV1

Qershi mbi tortë

Për ta përfunduar këtë artikull duke ndjerë sasinë e gjerësisë së brezit të kursyer në krahasim me GIF - madhësia totale e të gjitha videove është më e lartë... 1.62 MB!! E drejta. Disa ndyrë 1,708,032 byte! Për krahasim, këtu janë madhësitë e videos GIF dhe AV1 për secilën skenë

GIF
AV1

Skena 1
11.7 MB
0.33 MB

Skena 2
7.27 MB
0.18 MB

Skena 3
5.62 MB
0.088 MB

Thjesht mahnitëse! A nuk është ajo?

Shenim: Madhësitë e skedarëve të VP9 dhe H264 nuk janë dhënë, pasi ato praktikisht nuk janë të ndryshme nga AV1 për shkak të përdorimit të të njëjtit bitrate. Do të ishte e tepërt të shtoheshin dy kolona të tjera me të njëjtat madhësi, vetëm për të theksuar se këta kodekë prodhojnë cilësi shumë më të mirë se GIF në madhësi skedarësh shumë më të vogla.

Burimi: www.habr.com