It is 2019 en it wurdt tiid dat wy beslute oer GIF's ( - hjir hawwe wy it oer útspraak yn it Ingelsk, foar ús is dat net relevant - ca. oersetting). GIF's nimme in enoarme hoemannichte romte yn (meastal ferskate megabytes!), Wat, as jo in webûntwikkelder binne, folslein yn striid is mei jo winsken! As webûntwikkelder wolle jo de dingen minimalisearje dy't brûkers moatte downloade, sadat de side fluch laden. Om deselde reden minify jo JavaScript, optimalisearje PNG, JPEG, en soms konvertearje . Mar wat te dwaan mei de âlde GIF?
Wy sille gjin GIF's nedich wêze wêr't wy hinne gean!
As jo doel is om de snelheid fan it laden fan side te ferbetterjen, dan moatte jo GIF's kwytreitsje! Mar hoe meitsje jo dan animearre foto's? It antwurd is fideo. En yn 'e measte gefallen krije jo bettere kwaliteit en romtebesparring fan 50-90%! Yn it libben hawwe de measte dingen har foar- en neidielen. As jo GIF ferfange troch fideo, kinne jo meastentiids gjin neidielen fine.
Mei alle GIF's!
Gelokkich is it ferfangen fan GIF's mei fideo's de lêste jierren gewoan west, dus alle nedige ark binne al yn gebrûk. Yn dizze post sil ik it tsjil net opnij útfine, mar sil de besteande oplossingen mar in bytsje ferbetterje. Dus hjir is de essinsje:
- Nim in GIF en konvertearje it nei in fideo
- Kodearje de fideo mei H.264 of VP9, d.w.s. komprimearje it en pak it yn MP4- as WebM-container
- Ferfange
<img>mei animearre GIF op<video>mei roller - Skeakelje autoplay yn sûnder lûd en loop foar in GIF-effekt
It is 2019
It is no 2019. De foarútgong giet foarút, en wy moatte it byhâlde. Oant no hawwe wy twa codec-opsjes hân dy't breed wurde stipe troch alle browsers en ark foar fideokodearring:
- H.264 - yntrodusearre yn 2003 en it meast brûkt hjoed
- VP9 - ferskynde yn 2013 en berikte kompresjeferbetterings fan hast 50% yn ferliking mei H.264, hoewol net alles is net altyd sa rooskleurich
Tink derom: Hoewol H.265 de folgjende ferzje fan H.264 is en yn steat is om te konkurrearjen mei VP9, beskôgje ik it net fanwegen minne browserstipe, lykas werjûn op 'e side . Lisinsjekosten binne de wichtichste reden wêrom't H.265 net sa wiidferspraat wurden is as H.264 en wêrom't it Alliance of Open Media-konsortium wurket mei in royalty-frije codec, AV1.
Unthâld, ús doel is om enoarme GIF's te krimpjen nei de lytste mooglike grutte om laden tiden te fersnellen. It soe in nuver 2019 wêze as wy gjin nije standert hiene foar fideokompresje yn ús arsenal. Mar it bestiet en hjit AV1. Mei AV1 kinne jo . Lepota! 🙂
AV1 is sûnt 2019 ta jo tsjinst!
Op buroblêden
Koartlyn waard stipe foar AV1-fideo-dekodearring tafoege oan buroblêdferzjes и . Op it stuit is Firefox-stipe buggy en kin crashes feroarsaakje, mar dingen moatte ferbetterje mei de tafoeging fan al yn Firefox 67 ( - ca. oerset.). Foar details oer de nije ferzje lês -
Op smartphones
D'r is op it stuit gjin hardware-stipe foar smartphones fanwegen it ûntbrekken fan passende decoders. Jo kinne software-dekodearring dwaan, hoewol dit sil liede ta ferhege batterijferbrûk. De earste mobile SOC's dy't AV1-hardware-dekodearring stypje sille yn 2020 ferskine.
En dan binne de lêzers fan it artikel lykas, "dus as mobile tillefoans it noch net goed stypje, wêrom AV1 brûke?"
AV1 is in frij nije codec, en wy binne oan it begjin fan syn oanpassing. Tink oan dit artikel as it poadium "wylst jo koken, sil it publyk folgje". Desktop-stipe op himsels sil siden fersnelle foar guon fan it publyk. En âlde codecs kinne brûkt wurde as in fallback-senario as AV1 net wurdt stipe op it doelapparaat. Mar as brûkers oerstappe nei apparaten mei AV1-stipe, sil alles klear wêze. Om dit te berikken, moatte wy in fideotag meitsje lykas hjirûnder werjûn, wêrtroch de browser syn foarkarsformaat kin selektearje - AV1 - >> VP9 - >> H.264. No, as de brûker in heul âld apparaat of navigator hat dy't hielendal gjin fideo stipet (wat ekstreem ûnwierskynlik is mei H264), dan sil hy gewoan de GIF sjen
<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>Skepping fan AV1
It meitsjen fan fideo's yn AV1 is maklik. en brûk de kommando's hjirûnder. Wy brûke 2 passes om de doelbitrate te berikken. Om dit te dwaan sille wy ffmpeg twa kear útfiere. De earste kear skriuwe wy it resultaat nei in net-besteand triem. Dit sil in log meitsje dat nedich is foar de twadde run fan 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.mp4Hjir is in ferdieling fan de parameters:
-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's meitsje
Om de GIF te meitsjen haw ik it ûnderste kommando brûkt. Om de grutte te ferminderjen, skale ik de GIF nei 720px breed en 12 fps ynstee fan de orizjinele 24 fps fideo.
./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.gifTestresultaten
It is better ien kear te sjen as hûndert kear te lêzen, net? Litte wy derfoar soargje dat de AV1 de juste kar is foar ús doelen. Ik naam de fergese Tears Of Steel fideo beskikber hjir , en konvertearre it mei sawat deselde bitrate foar AV1, VP9, H.264 codecs. De resultaten binne hjirûnder, sadat jo se foar josels kinne fergelykje.
Opmerking 1: As it bestân hjirûnder net foar jo laden, kin it tiid wêze om jo blêder te aktualisearjen. Ik soe in Chromium-basearre browser oanbefelje lykas Chrome, Vivaldi, Brave of Opera. Hjir is de lêste ynformaasje oer AV1-stipe
Opmerking 2: Foar Firefox 66 op Linux moatte jo de flagge ynstelle media.av1.enabled yn betsjutting true в about:config
Opmerking 3: Ik haw besletten gjin reguliere GIF's hjirûnder op te nimmen fanwegen har grutte grutte en de hoemannichte gegevens dy't it nedich is om dizze side te laden! (Dat soe iroanysk wêze, om't dizze side giet oer it ferminderjen fan de hoemannichte gegevens op in side :)). Mar jo kinne hjir de lêste GIF's sjen
Opmerking fan oersetter: Habr lit jo net autoplay ynskeakelje en it bestân loopje, sadat jo allinich de kwaliteit kinne evaluearje. Jo kinne sjen hoe't de "animearre foto's" live sille útsjen .
Sêne 1 @ 200 Kbps
D'r is hjir in protte beweging, dy't benammen gefoelich is by lege bitrates. Jo kinne fuortendaliks sjen hoe min H.264 is by dizze bitrate; pleinen binne fuortendaliks sichtber. VP9 ferbetteret de situaasje in bytsje, mar de pleinen binne noch sichtber. AV1 wint dúdlik, en produsearret in fansels better byld.
H.264
VP9
AV1
Sêne 2 @ 200 Kbps
D'r is hjir in protte trochsichtige CGI-ynhâld. De resultaten binne net sa oars as de lêste kear, mar oer it algemien sjocht de AV1 better.
H.264
VP9
AV1
Sêne 3 @ 100 Kbps
Yn dizze sêne draaie wy de bitrate omleech nei 100 Kbps en de resultaten binne konsekwint. AV1 behâldt syn liederskip sels by lege bitrates!
H.264
VP9
AV1
Kers op 'e taart
Om dit artikel te foltôgjen troch it bedrach fan opsleine bânbreedte te fielen yn ferliking mei GIF - de totale grutte fan alle fideo's is heger ... 1.62 mb!! Rjochts. Guon ferdomme 1,708,032 bytes! Foar fergeliking binne hjir de GIF- en AV1-fideogrutte foar elke sêne
GIF
AV1
Sêne 1
11.7 MB
0.33 MB
Sêne 2
7.27 MB
0.18 MB
Sêne 3
5.62 MB
0.088 MB
Gewoan prachtich! Is it net?
Tink derom: De triemgrutte fan VP9 en H264 wurde net jûn, om't se praktysk net ferskille fan AV1 troch it brûken fan deselde bitrate. It soe oerstallich wêze om noch twa kolommen mei deselde grutte ta te foegjen, gewoan om te markearjen dat dizze codecs folle bettere kwaliteit produsearje dan GIF by folle lytsere triemgrutte.
Boarne: www.habr.com