Panahon na nga ilisan ang GIF sa AV1 nga video

2019 na ug panahon na nga magdesisyon kami sa mga GIF (dili, wala kami maghisgot bahin niini nga desisyon! Dili gyud ta mouyon dinhi! - dinhi naghisgot kami bahin sa paglitok sa English, alang kanamo kini dili angay - gibanabana. paghubad). Gikuha sa GIF ang daghang luna (kasagaran daghang megabytes!), Nga, kung ikaw usa ka web developer, hingpit nga sukwahi sa imong mga gusto! Ingon usa ka web developer, gusto nimo nga maminusan ang mga butang nga kinahanglan i-download sa mga tiggamit aron dali nga ma-load ang site. Sa parehas nga hinungdan, imong giminusan ang JavaScript, gi-optimize ang PNG, JPEG, ug usahay mag-convert JPEG ngadto sa WebP. Apan unsa ang buhaton sa daan nga GIF?

Dili namo kinahanglan ang mga GIF kung asa kami moadto!

Kung ang imong katuyoan mao ang pagpauswag sa katulin sa pagkarga sa site, kinahanglan nimo nga tangtangon ang mga GIF! Apan giunsa nimo paghimo ang mga animated nga litrato? Ang tubag kay video. Ug sa kadaghanan nga mga kaso, makakuha ka labi ka maayo nga kalidad ug pagtipig sa wanang nga 50-90%! Sa kinabuhi, kadaghanan sa mga butang adunay mga bentaha ug disbentaha. Kung gipulihan nimo ang GIF sa video, kasagaran dili nimo makit-an ang bisan unsang mga kontra.

Ubos sa tanang GIF!

Maayo na lang, ang pag-ilis sa mga GIF sa mga video kasagaran sa bag-ohay nga mga tuig, mao nga ang tanan nga gikinahanglan nga mga himan gigamit na. Sa kini nga post, dili nako usbon pag-usab ang ligid, apan gamay ra nga mapaayo ang mga naa na nga solusyon. Busa ania ang diwa:

1. Pagkuha ug GIF ug i-convert kini sa usa ka video
2. I-encode ang video gamit ang H.264 o VP9, ​​i.e. i-compress kini ug i-pack kini sa MP4 o WebM nga sudlanan
3. Ilisan <img> uban sa animated GIF sa <video> uban sa roller
4. I-on ang autoplay nga walay sound ug loop para sa GIF effect

Ang Google adunay maayong dokumentasyon nga naghulagway sa proseso.

2019 na diay

2019 na karon. Ang pag-uswag nagpadayon sa unahan, ug kita kinahanglan nga magpadayon niini. Sa pagkakaron kami adunay duha ka mga kapilian sa codec nga kaylap nga gisuportahan sa tanan nga mga browser ug mga himan sa pag-encode sa video:

1. H.264 - gipaila sa 2003 ug labing kaylap nga gigamit karon
2. VP9 - nagpakita sa 2013 ug nakab-ot ang compression improvements sa halos 50% kumpara sa H.264, bisan pa samtang sila nagsulat dinhi dili ang tanan dili kanunay nga rosy

Mubo nga sulat: Bisan kung ang H.265 mao ang sunod nga bersyon sa H.264 ug adunay katakus nga makigkompetensya sa VP9, ​​​​wala nako kini isipa tungod sa dili maayo nga suporta sa browser, ingon sa gipakita sa panid https://caniuse.com/#feat=hevc. Ang mga gasto sa paglilisensya mao ang nag-unang rason ngano nga ang H.265 wala mahimong kaylap sama sa H.264 ug nganong ang Alliance of Open Media consortium nagtrabaho uban sa royalty-free codec, AV1.

Hinumdumi, ang among katuyoan mao ang pagpamubu sa dagkong mga GIF sa labing gamay nga posible nga gidak-on aron mapadali ang mga oras sa pagkarga. Kini usa ka katingad-an nga 2019 kung wala kami bag-ong sumbanan alang sa pag-compress sa video sa among arsenal. Apan kini anaa ug gitawag nga AV1. Sa AV1 mahimo nimo makab-ot ang gibana-bana nga 30% nga pag-uswag sa compression kumpara sa VP9. Lepota! 🙂

Ang AV1 anaa sa imong serbisyo sukad 2019!

Sa mga desktop

Bag-ohay lang nga suporta alang sa AV1 video decoding gidugang sa mga bersyon sa desktop Google Chrome 70 и Mozilla Firefox 65. Sa pagkakaron ang suporta sa Firefox buggy ug mahimong hinungdan sa mga pag-crash, apan ang mga butang kinahanglan nga molambo sa pagdugang sa dav1d decoder naa na sa Firefox 67 (gipagawas na, apan ang suporta nagpakita - gibanabana. transl.). Alang sa mga detalye bahin sa bag-ong bersyon basaha - dav1d 0.3.0 release: mas paspas pa!

Sa mga smartphone

Sa pagkakaron walay suporta sa hardware alang sa mga smartphone tungod sa kakulang sa angay nga mga decoder. Mahimo nimong buhaton ang software decoding, bisan kung kini mosangput sa pagtaas sa konsumo sa baterya. Ang una nga mobile SOCs nga nagsuporta sa AV1 hardware decoding makita sa 2020.

Ug unya ang mga magbabasa sa artikulo sama sa, "busa kung ang mga mobile phone dili pa kini suportahan sa husto, nganong gamiton ang AV1?"

Ang AV1 usa ka bag-o nga codec, ug naa na kami sa sinugdanan sa pagpahiangay niini. Hunahunaa kini nga artikulo isip ang "samtang magluto ka, ang panon mosunod" nga yugto. Ang suporta sa desktop sa iyang kaugalingon makapadali sa mga site alang sa pipila sa mga mamiminaw. Ug ang daan nga mga codec mahimong magamit ingon usa ka fallback nga senaryo kung ang AV1 dili suportado sa target nga aparato. Apan samtang ang mga tiggamit mobalhin sa mga himan nga adunay suporta sa AV1, ang tanan mahimong andam. Aron makab-ot kini, kinahanglan namong maghimo ug video tag sama sa gipakita sa ubos, nga magtugot sa browser sa pagpili sa iyang gusto nga format - AV1 - >> VP9 - >> H.264. Aw, kung ang tiggamit adunay usa ka karaan nga aparato o navigator nga wala’y suporta sa video (nga dili mahimo sa H264), unya makita ra niya ang 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>

Paghimo sa AV1

Ang paghimo og mga video sa AV1 sayon. I-download ang pinakabag-o nga ffmpeg build para sa imong sistema gikan dinhi ug gamita ang mga sugo sa ubos. Gigamit namo ang 2 pass para makab-ot ang target nga bitrate. Sa pagbuhat niini kita modagan ffmpeg kaduha. Sa unang higayon nga atong isulat ang resulta ngadto sa usa ka wala nga file. Maghimo kini usa ka log nga kinahanglan alang sa ikaduha nga pagdagan sa 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

Ania ang usa ka pagkahugno sa mga parameter:

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

Paghimo og mga GIF

Sa paghimo sa GIF gigamit nako ang sugo sa ubos. Aron makunhuran ang gidak-on, akong gi-scale ang GIF sa 720px ang gilapdon ug 12 fps imbes sa orihinal nga 24 fps nga video.

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

Mga resulta sa pagsulay

Mas maayo nga makakita ka usa ka higayon kaysa magbasa usa ka gatos ka beses, di ba? Atong siguroon nga ang AV1 mao ang husto nga pagpili alang sa atong mga katuyoan. Gikuha nako ang libre nga Tears Of Steel nga video nga anaa dinhi https://mango.blender.org/, ug gi-convert kini gamit ang halos parehas nga bitrate para sa AV1, VP9, ​​​​H.264 codecs. Ang mga resulta anaa sa ubos aron imong itandi kini sa imong kaugalingon.

Nota 1: Kung ang file sa ubos dili ma-load alang kanimo, mahimo’g panahon na aron i-update ang imong browser. Irekomendar nako ang usa ka browser nga nakabase sa Chromium sama sa Chrome, Vivaldi, Brave o Opera. Ania ang pinakabag-o nga impormasyon sa AV1 nga suporta https://caniuse.com/#feat=av1

Nota 2: Alang sa Firefox 66 sa Linux kinahanglan nimo nga ibutang ang bandila media.av1.enabled ngadto sa kahulogan true в about:config

Nota 3: Nakahukom ko nga dili iapil ang mga regular nga GIF sa ubos tungod sa ilang dako nga gidak-on ug ang gidaghanon sa datos nga gikinahanglan aron makarga kini nga panid! (Nga mahimong ironic, tungod kay kini nga panid mahitungod sa pagkunhod sa gidaghanon sa datos sa usa ka panid :)). Apan makita nimo ang katapusang mga GIF dinhi https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Mubo nga sulat sa maghuhubad: Ang Habr wala magtugot kanimo sa pag-enable sa autoplay ug pag-loop sa file, aron masusi ra nimo ang kalidad. Makita nimo kung unsa ang hitsura sa "mga animated nga litrato" nga live sa orihinal nga artikulo.

Scene 1 @ 200 Kbps

Adunay daghang paglihok dinhi, nga labi ka sensitibo sa ubos nga bitrates. Makita dayon nimo kung unsa ka daotan ang H.264 sa kini nga bitrate, ang mga kwadro makita dayon. Ang VP9 nagpauswag sa sitwasyon og gamay, apan ang mga kwadro makita gihapon. Ang AV1 klaro nga nakadaog, nga nagpatunghag klaro nga mas maayo nga litrato.

H.264

VP9

AV1

Scene 2 @ 200 Kbps

Adunay daghang translucent CGI content dinhi. Ang mga resulta dili lahi sa miaging higayon, apan sa kinatibuk-an ang AV1 mas maayo tan-awon.

H.264

VP9

AV1

Scene 3 @ 100 Kbps

Niini nga talan-awon, among gipaubos ang bitrate ngadto sa 100 Kbps ug ang mga resulta makanunayon. Ang AV1 nagpadayon sa pagpangulo niini bisan sa ubos nga bitrates!

H.264

VP9

AV1

Višenka sa mga cake

Aron mahuman kini nga artikulo pinaagi sa pagbati sa kantidad sa bandwidth nga natipig kumpara sa GIF - ang kinatibuk-ang gidak-on sa tanan nga mga video mas taas... 1.62 MB!! Husto. Pipila ka mga fucking 1,708,032 bytes! Alang sa pagtandi, ania ang GIF ug AV1 nga mga gidak-on sa video alang sa matag eksena

GIF
AV1

Scene 1
11.7 MB
0.33 MB

Scene 2
7.27 MB
0.18 MB

Scene 3
5.62 MB
0.088 MB

Talagsaon lang! Dili ba?

Mubo nga sulat: Ang mga gidak-on sa file sa VP9 ug H264 wala gihatag, tungod kay sila halos dili lahi sa AV1 tungod sa paggamit sa parehas nga bitrate. Mahimong sobra ang pagdugang og duha pa ka mga kolum nga adunay parehas nga gidak-on, aron lang ipasiugda nga kini nga mga codec makahimo og labi ka maayo nga kalidad kaysa GIF sa labi ka gamay nga gidak-on sa file.

Source: www.habr.com