Et ass 2019 an et ass Zäit datt mir op GIFs entscheeden ( - hei schwätze mer iwwer Aussprooch op Englesch, fir eis ass dat net relevant - ca. Iwwersetzung). GIFs huelen enorm vill Plaz op (normalerweis e puer Megabytes!), Wat, wann Dir e Webentwéckler sidd, komplett géint Är Wënsch ass! Als Webentwéckler wëllt Dir d'Saachen minimiséieren déi d'Benotzer mussen eroflueden fir datt de Site séier lued. Aus deemselwechte Grond minifizéiert Dir JavaScript, optiméiert PNG, JPEG, an heiansdo konvertéiert . Awer wat maache mat dem alen GIF?
Mir brauche keng GIFs wou mir higoen!
Wann Äert Zil ass d'Site Luedegeschwindegkeet ze verbesseren, da musst Dir GIFs lass ginn! Awer wéi maacht Dir dann animéiert Biller? D'Äntwert ass Video. An an deene meeschte Fäll kritt Dir besser Qualitéit a Raumspuer vu 50-90%! Am Liewen hunn déi meescht Saachen hir Virdeeler an Nodeeler. Wann Dir GIF mat Video ersetzt, kënnt Dir meeschtens keng Nodeeler fannen.
Down mat all GIFs!
Glécklecherweis ass d'Ersatz vu GIFs mat Videoen an de leschte Joeren allgemeng gewiescht, sou datt all déi néideg Tools scho benotzt ginn. An dësem Post wäert ech d'Rad net nei erfannen, awer nëmmen déi bestehend Léisungen liicht verbesseren. Also hei ass den Haaptgrond:
- Huelt e GIF a konvertéiert et an e Video
- Kodéiert de Video mat H.264 oder VP9, dh. kompriméiert et a packt et an MP4 oder WebM Container
- Ersetzen
<img>mat animéierten GIF op<video>mat Roller - Aktivéiert Autoplay ouni Toun a Loop fir e GIF Effekt
Et ass 2019
Et ass elo 2019. De Fortschrëtt geet no vir, a mir musse weidergoen. Bis elo hu mir zwou Codec-Optiounen déi wäit iwwer all Browser a Videokodéierungsinstrumenter ënnerstëtzt ginn:
- H.264 - am Joer 2003 agefouert an am meeschte verbreet haut
- VP9 - erschéngt am 2013 an erreecht Kompressiounsverbesserunge vu bal 50% am Verglach zum H.264, obwuel net alles ass net ëmmer sou roseg
Opgepasst: Och wann H.265 déi nächst Versioun vum H.264 ass a fäeg ass mat VP9 ze konkurréiere, betruecht ech et net wéinst enger schlechter Browser-Ënnerstëtzung, wéi op der Säit gewisen. . D'Lizenzkäschte sinn den Haaptgrond firwat H.265 net sou verbreet ass wéi H.264 a firwat d'Alliance of Open Media Consortium mat engem royalty-gratis Codec, AV1, schafft.
Denkt drun, eist Zil ass enorm GIFs op déi klengst méiglech Gréisst ze schrumpfen fir d'Laaschtzäit ze beschleunegen. Et wier eng komesch 2019 wa mir keen neie Standard fir Videokompressioun an eisem Arsenal hätten. Awer et existéiert a gëtt AV1 genannt. Mat AV1 kënnt Dir . Lepota! 🙂
AV1 ass fir Iech zanter 2019!
Op Desktops
Viru kuerzem gouf Ënnerstëtzung fir AV1 Videodekodéierung op Desktop Versiounen bäigefüügt и . Momentan ass Firefox Support buggy a kann Crashen verursaachen, awer d'Saachen solle sech verbesseren mat der Zousatz vun schonn am Firefox 67 ( — ca. Iwwersetzung). Fir Detailer iwwer déi nei Versioun liesen -
Op Smartphones
Et gëtt momentan keng Hardware Ënnerstëtzung fir Smartphones wéinst dem Mangel u passenden Decoderen. Dir kënnt Software-Dekodéierung maachen, obwuel dëst zu engem verstäerkten Batterieverbrauch féiert. Déi éischt mobil SOCs déi AV1 Hardware Decodéierung ënnerstëtzen erschéngen am Joer 2020.
An dann sinn d'Lieser vum Artikel wéi: "Also wann Handyen et nach net richteg ënnerstëtzen, firwat benotzt AV1?"
AV1 ass e relativ neie Codec, a mir sinn um Ufank vu senger Adaptatioun. Denkt un dësen Artikel als d'Bühn "während Dir kacht, wäert d'Leit verfollegen". Desktop Ënnerstëtzung op sech selwer wäert Siten fir e puer vun de Publikum beschleunegen. An al Codecs kënnen als Fallback Szenario benotzt ginn wann AV1 net um Zilgerät ënnerstëtzt gëtt. Awer wéi d'Benotzer op Apparater mat AV1 Support wiesselen, wäert alles prett sinn. Fir dëst z'erreechen, musse mir e Video-Tag erstellen wéi hei ënnendrënner, wat de Browser erlaabt säi gewënschte Format ze wielen - AV1 - >> VP9 - >> H.264. Gutt, wann de Benotzer e ganz alen Apparat oder Navigator huet deen guer net Video ënnerstëtzt (wat extrem onwahrscheinlech mat H264 ass), da wäert hien just de GIF gesinn
<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>Kreatioun vun AV1
Videoen an AV1 erstellen ass einfach. a benotzt d'Befehle hei ënnen. Mir benotzen 2 Passë fir den Zilbitrate z'erreechen. Fir dëst ze maachen wäerte mir zweemol ffmpeg lafen. Déi éischte Kéier schreiwen mir d'Resultat op eng net existent Datei. Dëst wäert e Log erstellen deen fir den zweete Laf vu ffmpeg gebraucht gëtt.
# 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.mp4Hei ass eng Ënnerdeelung vun de Parameteren:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
GIFs maachen
Fir de GIF ze kreéieren hunn ech de Kommando hei ënnen benotzt. Fir d'Gréisst ze reduzéieren, hunn ech de GIF op 720px breet an 12 fps amplaz vum ursprénglechen 24 fps Video skaléiert.
./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.gifTestresultater
Et ass besser eemol ze gesinn wéi honnertmol ze liesen, oder? Loosst eis sécher stellen datt den AV1 déi richteg Wiel fir eis Zwecker ass. Ech hunn de gratis Tears Of Steel Video geholl, deen hei verfügbar ass , an ëmgerechent et mat ongeféier déiselwecht Bitrate fir AV1, VP9, H.264 Codecs. D'Resultater sinn ënnendrënner sou datt Dir se fir Iech selwer vergläichen kënnt.
Note 1: Wann d'Datei hei drënner net fir Iech lued, ass et vläicht Zäit Äre Browser ze aktualiséieren. Ech géif e Chromium baséiert Browser wéi Chrome, Vivaldi, Brave oder Opera recommandéieren. Hei ass déi lescht Informatioun iwwer AV1 Support
Note 2: Fir Firefox 66 op Linux musst Dir de Fändel setzen media.av1.enabled an Bedeitung true в about:config
Note 3: Ech hu beschloss net regelméisseg GIFs hei ënnen ze enthalen wéinst hirer grousser Gréisst an der Quantitéit un Daten déi et erfuerdert fir dës Säit ze lueden! (Wat ironesch wier, well et op dëser Säit drëm geet d'Quantitéit un Daten op enger Säit ze reduzéieren :)). Awer Dir kënnt déi lescht GIFs hei gesinn
Iwwersetzer Notiz: Habr erlaabt Iech net Autoplay z'aktivéieren an d'Datei ze schloen, sou datt Dir nëmmen d'Qualitéit evaluéiere kënnt. Dir kënnt kucken wéi déi "animéiert Biller" live ausgesinn .
Szen 1 @ 200 Kbps
Et gëtt vill Beweegung hei, wat besonnesch sensibel ass bei nidderegen Bitrates. Dir kënnt direkt gesinn wéi schlecht H.264 bei dësem Bitrate ass, d'Plaze sinn direkt ze gesinn. VP9 verbessert d'Situatioun e bëssen, mä d'Plaze sinn nach siichtbar. AV1 gewënnt kloer, produzéiert en offensichtlech besser Bild.
H.264
VP9
AV1
Szen 2 @ 200 Kbps
Et gëtt vill duerchscheinend CGI Inhalt hei. D'Resultater sinn net sou ënnerschiddlech wéi d'lescht Kéier, awer allgemeng gesäit den AV1 besser aus.
H.264
VP9
AV1
Szen 3 @ 100 Kbps
An dëser Szen dréie mir de Bitrate erof op 100 Kbps an d'Resultater si konsequent. AV1 hält seng Leedung och bei nidderegen Bitrates!
H.264
VP9
AV1
Kiischt um Kuch
Fir dësen Artikel ofzeschléissen andeems Dir de Betrag u gespäichert Bandbreed am Verglach mam GIF fillt - d'Gesamtgréisst vun alle Videoen ass méi héich ... 1.62 MB! Riets. E puer fucking 1,708,032 Bytes! Zum Verglach, hei sinn d'GIF an AV1 Videogréissten fir all Szen
GIF
AV1
Szen 1
11.7 MB
0.33 MB
Szen 2
7.27 MB
0.18 MB
Szen 3
5.62 MB
0.088 MB
Einfach beandrockend! Ass et net?
Opgepasst: D'Dateigréisste vu VP9 an H264 ginn net uginn, well se praktesch net anescht wéi AV1 sinn wéinst der Benotzung vum selwechte Bitrate. Et wier iwwerflësseg zwee méi Spalten mat de selwechte Gréissten ze addéieren, just fir ze markéieren datt dës Codecs vill besser Qualitéit produzéieren wéi GIF a vill méi kleng Dateigréissten.
Source: will.com