ProHoster > Blog > Pangangasiwa > Oras na para palitan ang GIF ng AV1 na video

Oras na para palitan ang GIF ng AV1 na video

Oras na para palitan ang GIF ng AV1 na video

2019 na at oras na para magpasya tayo sa mga GIF (hindi, hindi namin pinag-uusapan ang desisyong ito! Hinding hindi tayo magkakasundo dito! - dito pinag-uusapan natin ang pagbigkas sa Ingles, para sa amin ito ay hindi nauugnay - approx. pagsasalin). Ang mga GIF ay tumatagal ng isang malaking halaga ng espasyo (karaniwan ay ilang megabytes!), na, kung ikaw ay isang web developer, ay ganap na salungat sa iyong mga hinahangad! Bilang isang web developer, gusto mong bawasan ang mga bagay na kailangang i-download ng mga user upang mabilis na mag-load ang site. Para sa parehong dahilan, pinaliit mo ang JavaScript, i-optimize ang PNG, JPEG, at kung minsan ay nagko-convert JPEG hanggang WebP. Ngunit ano ang gagawin sa lumang GIF?

Hindi namin kakailanganin ang mga GIF kung saan kami pupunta!

Kung ang iyong layunin ay pahusayin ang bilis ng paglo-load ng site, kailangan mong alisin ang mga GIF! Ngunit paano ka gumawa ng mga animated na larawan? Ang sagot ay video. At sa karamihan ng mga kaso, makakakuha ka ng mas mahusay na kalidad at pagtitipid ng espasyo na 50-90%! Sa buhay, karamihan sa mga bagay ay may mga kalamangan at kahinaan. Kapag pinalitan mo ang GIF ng video, kadalasan ay hindi ka makakahanap ng anumang kahinaan.

Down sa lahat ng GIF!

Sa kabutihang-palad, ang pagpapalit ng mga GIF ng mga video ay naging pangkaraniwan sa mga nakaraang taon, kaya ang lahat ng mga kinakailangang tool ay ginagamit na. Sa post na ito, hindi ko muling iimbento ang gulong, ngunit mapapabuti lamang nang bahagya ang mga umiiral na solusyon. Kaya narito ang diwa:

  1. Kumuha ng GIF at i-convert ito sa isang video
  2. I-encode ang video gamit ang H.264 o VP9, ​​​​i.e. i-compress ito at i-pack ito sa MP4 o WebM container
  3. Palitan <img> na may naka-on na animated na GIF <video> may roller
  4. I-on ang autoplay nang walang tunog at loop para sa GIF effect

May magandang dokumentasyon ang Google na naglalarawan sa proseso.

2019 na

2019 na ngayon. Sumusulong ang pag-unlad, at dapat nating sundan ito. Sa ngayon, mayroon na kaming dalawang opsyon sa codec na malawak na sinusuportahan sa lahat ng browser at mga tool sa pag-encode ng video:

  1. H.264 - ipinakilala noong 2003 at pinakamalawak na ginagamit ngayon
  2. VP9 - lumitaw noong 2013 at nakamit ang mga pagpapabuti ng compression na halos 50% kumpara sa H.264, bagaman habang nagsusulat sila dito hindi lahat ng bagay ay hindi laging napakarosas

Tandaan: Bagama't ang H.265 ay ang susunod na bersyon ng H.264 at may kakayahang makipagkumpitensya sa VP9, ​​hindi ko ito isinasaalang-alang dahil sa mahinang suporta sa browser, tulad ng ipinapakita sa pahina https://caniuse.com/#feat=hevc. Ang mga gastos sa paglilisensya ay ang pangunahing dahilan kung bakit hindi naging kasing laki ng H.265 ang H.264 at kung bakit gumagana ang Alliance of Open Media consortium sa isang royalty-free codec, AV1.

Tandaan, ang aming layunin ay paliitin ang malalaking GIF sa pinakamaliit na posibleng laki upang mapabilis ang mga oras ng paglo-load. Magiging kakaiba ang 2019 kung wala kaming bagong pamantayan para sa video compression sa aming arsenal. Ngunit ito ay umiiral at tinatawag na AV1. Sa AV1 magagawa mo makamit ang humigit-kumulang 30% na pagpapabuti sa compression kumpara sa VP9. Lepota! 🙂

Ang AV1 ay nasa iyong serbisyo mula noong 2019!

Sa mga desktop

Kamakailan ay idinagdag ang suporta para sa AV1 video decoding sa mga desktop na bersyon Google Chrome 70 и Mozilla Firefox 65. Sa ngayon, ang suporta sa Firefox ay maraming surot at maaaring magdulot ng mga pag-crash, ngunit dapat mapabuti ang mga bagay sa pagdaragdag ng dav1d decoder nasa Firefox 67 na (nailabas na, ngunit lumitaw ang suporta — tinatayang. transl.). Para sa mga detalye tungkol sa bagong bersyon basahin - dav1d 0.3.0 release: mas mabilis pa!

Sa mga smartphone

Kasalukuyang walang suporta sa hardware para sa mga smartphone dahil sa kakulangan ng naaangkop na mga decoder. Maaari kang mag-decode ng software, bagama't hahantong ito sa pagtaas ng pagkonsumo ng baterya. Ang unang mga mobile SOC na sumusuporta sa AV1 hardware decoding ay lalabas sa 2020.

At pagkatapos ay ang mga mambabasa ng artikulo ay tulad ng, "kaya kung ang mga mobile phone ay hindi pa ito sinusuportahan ng maayos, bakit gagamit ng AV1?"

Ang AV1 ay isang medyo bagong codec, at tayo ay nasa pinakadulo simula ng pagbagay nito. Isipin ang artikulong ito bilang ang yugtong "habang nagluluto ka, susundan ng karamihan". Ang suporta sa desktop mismo ay magpapabilis ng mga site para sa ilan sa madla. At ang mga lumang codec ay maaaring gamitin bilang fallback scenario kapag hindi sinusuportahan ang AV1 sa target na device. Ngunit habang lumipat ang mga user sa mga device na may suporta sa AV1, magiging handa ang lahat. Upang makamit ito, kailangan naming lumikha ng isang video tag tulad ng ipinapakita sa ibaba, na magpapahintulot sa browser na piliin ang gusto nitong format − AV1 - >> VP9 - >> H.264. Well, kung ang user ay may napakalumang device o navigator na hindi talaga sumusuporta sa video (na lubhang malabong may H264), tapos makikita na lang niya yung 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>

Paglikha ng AV1

Ang paggawa ng mga video sa AV1 ay madali. I-download ang pinakabagong ffmpeg build para sa iyong system mula dito at gamitin ang mga utos sa ibaba. Gumagamit kami ng 2 pass para makamit ang target na bitrate. Upang gawin ito, tatakbo kami ng ffmpeg nang dalawang beses. Sa unang pagkakataon na isulat namin ang resulta sa isang hindi umiiral na file. Ito ay lilikha ng isang log na kakailanganin para sa pangalawang pagtakbo ng 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

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

Gumagawa ng mga GIF

Upang lumikha ng GIF ginamit ko ang utos sa ibaba. Upang bawasan ang laki, pinalaki ko ang GIF sa 720px ang lapad at 12 fps sa halip na ang orihinal na 24 fps na 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 ng pagsubok

Mas mabuting makakita ng isang beses kaysa magbasa ng isang daang beses, di ba? Siguraduhin nating ang AV1 ang tamang pagpipilian para sa ating mga layunin. Kinuha ko ang libreng Tears Of Steel video na available dito https://mango.blender.org/, at na-convert ito gamit ang humigit-kumulang parehong bitrate para sa AV1, VP9, ​​​​H.264 codec. Ang mga resulta ay nasa ibaba upang maaari mong ihambing ang mga ito para sa iyong sarili.

Tandaan 1: Kung ang file sa ibaba ay hindi naglo-load para sa iyo, maaaring oras na para i-update ang iyong browser. Irerekomenda ko ang isang browser na batay sa Chromium gaya ng Chrome, Vivaldi, Brave o Opera. Narito ang pinakabagong impormasyon sa suporta ng AV1 https://caniuse.com/#feat=av1

Tandaan 2: Para sa Firefox 66 sa Linux kakailanganin mong itakda ang bandila media.av1.enabled sa kahulugan true в about:config

Tandaan 3: Napagpasyahan kong huwag isama ang mga regular na GIF sa ibaba dahil sa malaking sukat ng mga ito at sa dami ng data na kakailanganin nito upang mai-load ang page na ito! (Na magiging balintuna, dahil ang pahinang ito ay tungkol sa pagbabawas ng dami ng data sa isang pahina :)). Ngunit makikita mo ang mga huling GIF dito https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Tala ng tagasalin: Hindi ka pinapayagan ng Habr na paganahin ang autoplay at i-loop ang file, kaya maaari mo lamang suriin ang kalidad. Makikita mo kung ano ang magiging hitsura ng "mga animated na larawan" nang live sa orihinal na artikulo.

Scene 1 @ 200 Kbps

Maraming paggalaw dito, na mas sensitibo sa mababang bitrate. Makikita mo kaagad kung gaano kalala ang H.264 sa bitrate na ito; makikita kaagad ang mga parisukat. Ang VP9 ay bahagyang nagpapabuti sa sitwasyon, ngunit ang mga parisukat ay nakikita pa rin. Malinaw na panalo ang AV1, na gumagawa ng malinaw na mas magandang larawan.

H.264

VP9

AV1

Scene 2 @ 200 Kbps

Mayroong maraming translucent na nilalaman ng CGI dito. Ang mga resulta ay hindi naiiba sa nakaraang pagkakataon, ngunit sa pangkalahatan ang AV1 ay mukhang mas mahusay.

H.264

VP9

AV1

Scene 3 @ 100 Kbps

Sa eksenang ito, binabawasan namin ang bitrate sa 100 Kbps at pare-pareho ang mga resulta. Pinapanatili ng AV1 ang pamumuno nito kahit na sa mababang bitrate!

H.264

VP9

AV1

Cherry sa cake

Upang tapusin ang artikulong ito sa pamamagitan ng pakiramdam ang dami ng bandwidth na na-save kumpara sa GIF - ang kabuuang sukat ng lahat ng mga video ay mas mataas... 1.62 MB!! Tama. Ilang fucking 1,708,032 bytes! Para sa paghahambing, narito ang GIF at AV1 na laki ng video para sa bawat eksena

GIF
AV1

Eksena 1
11.7 MB
0.33 MB

Eksena 2
7.27 MB
0.18 MB

Eksena 3
5.62 MB
0.088 MB

Simpleng nakamamanghang! Hindi ba?

Tandaan: Ang mga laki ng file ng VP9 at H264 ay hindi ibinigay, dahil halos hindi sila naiiba sa AV1 dahil sa paggamit ng parehong bitrate. Magiging kalabisan kung magdagdag ng dalawa pang column na may parehong laki, para lang i-highlight na ang mga codec na ito ay gumagawa ng mas mahusay na kalidad kaysa sa GIF sa mas maliliit na laki ng file.

Pinagmulan: www.habr.com

Magdagdag ng komento