Dit is 2019 en dit is tyd dat ons op GIF's besluit ( - hier praat ons van uitspraak in Engels, vir ons is dit nie relevant nie - ongeveer. vertaling). GIF's neem 'n groot hoeveelheid spasie op (gewoonlik 'n paar megagrepe!), wat, as jy 'n webontwikkelaar is, heeltemal teenstrydig is met jou begeertes! As 'n webontwikkelaar wil jy die dinge wat gebruikers moet aflaai minimaliseer sodat die webwerf vinnig laai. Om dieselfde rede verklein jy JavaScript, optimaliseer PNG, JPEG en skakel soms om . Maar wat om te doen met die ou GIF?
Ons sal nie GIF's nodig hê waarheen ons gaan nie!
As jou doel is om werflaaispoed te verbeter, dan moet jy ontslae raak van GIF's! Maar hoe maak jy dan geanimeerde prente? Die antwoord is video. En in die meeste gevalle sal jy beter gehalte en ruimtebesparing van 50-90% kry! In die lewe het die meeste dinge hul voor- en nadele. Wanneer jy GIF met video vervang, sal jy meestal geen nadele kan vind nie.
Weg met alle GIF's!
Gelukkig was die vervanging van GIF's met video's die afgelope paar jaar algemeen, so al die nodige gereedskap is reeds in gebruik. In hierdie pos sal ek nie die wiel herontdek nie, maar die bestaande oplossings net effens verbeter. So hier is die kern:
- Neem 'n GIF en omskep dit na 'n video
- Enkodeer die video met H.264 of VP9, d.w.s. druk dit saam en pak dit in MP4- of WebM-houer
- Vervang
<img>met geanimeerde GIF aan<video>met roller - Skakel outospeel aan sonder klank en lus vir 'n GIF-effek
Dis 2019
Dis nou 2019. Vordering beweeg vorentoe, en ons moet daarmee tred hou. Tot dusver het ons twee kodek-opsies gehad wat wyd oor alle blaaiers en video-enkoderingsnutsgoed ondersteun word:
- H.264 - in 2003 bekendgestel en vandag die meeste gebruik
- VP9 - het in 2013 verskyn en kompressieverbeterings van byna 50% behaal in vergelyking met H.264, hoewel alles is nie altyd so rooskleurig nie
Let wel: Alhoewel H.265 die volgende weergawe van H.264 is en in staat is om met VP9 mee te ding, oorweeg ek dit nie as gevolg van swak blaaierondersteuning, soos op die bladsy gewys word nie . Lisensiekoste is die hoofrede waarom H.265 nie so wydverspreid soos H.264 geword het nie en waarom die Alliance of Open Media-konsortium met 'n tantièmevrye kodek, AV1, werk.
Onthou, ons doel is om groot GIF's tot die kleinste moontlike grootte te krimp om laaitye te bespoedig. Dit sou 'n vreemde 2019 wees as ons nie 'n nuwe standaard vir video-kompressie in ons arsenaal het nie. Maar dit bestaan en word AV1 genoem. Met AV1 kan jy . Babbel! 🙂
AV1 is sedert 2019 tot u diens!
Op lessenaars
Onlangs is ondersteuning vir AV1-video-dekodering by rekenaarweergawes gevoeg и . Op die oomblik is Firefox-ondersteuning karig en kan ineenstortings veroorsaak, maar dinge behoort te verbeter met die byvoeging van reeds in Firefox 67 ( - ongeveer. vertaal.). Vir besonderhede oor die nuwe weergawe lees -
Op slimfone
Daar is tans geen hardeware-ondersteuning vir slimfone nie weens die gebrek aan toepaslike dekodeerders. Jy kan sagteware-dekodering doen, alhoewel dit tot verhoogde batteryverbruik sal lei. Die eerste mobiele SOC's wat AV1-hardeware-dekodering ondersteun, sal in 2020 verskyn.
En dan is die lesers van die artikel soos, "so as selfone dit nog nie behoorlik ondersteun nie, hoekom gebruik AV1?"
AV1 is 'n redelik nuwe kodek, en ons is heel aan die begin van die aanpassing daarvan. Dink aan hierdie artikel as die stadium "terwyl jy kook, sal die skare volg". Desktop-ondersteuning op sigself sal webwerwe vir sommige van die gehoor bespoedig. En ou codecs kan as 'n terugvalscenario gebruik word wanneer AV1 nie op die teikentoestel ondersteun word nie. Maar soos gebruikers oorskakel na toestelle met AV1-ondersteuning, sal alles gereed wees. Om dit te bereik, moet ons 'n videomerker skep soos hieronder getoon, wat die blaaier sal toelaat om sy voorkeurformaat te kies - AV1 - >> VP9 - >> H.264. Wel, as die gebruiker 'n baie ou toestel of navigator het wat glad nie video ondersteun nie (wat uiters onwaarskynlik is met H264), dan sal hy net die GIF sien
<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>Die skepping van AV1
Dit is maklik om video's in AV1 te skep. en gebruik die opdragte hieronder. Ons gebruik 2 passe om die teiken bitrate te bereik. Om dit te doen, sal ons ffmpeg twee keer laat loop. Die eerste keer skryf ons die resultaat na 'n nie-bestaande lêer. Dit sal 'n log skep wat nodig sal wees vir die tweede lopie van 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.mp4Hier is 'n uiteensetting van die 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Maak GIF's
Om die GIF te skep, het ek die onderstaande opdrag gebruik. Om die grootte te verminder, het ek die GIF geskaal na 720px breed en 12 fps in plaas van die oorspronklike 24 fps 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.gifToetsuitslae
Dit is beter om een keer te sien as om honderd keer te lees, nie waar nie? Kom ons maak seker die AV1 is die regte keuse vir ons doeleindes. Ek het die gratis Tears Of Steel-video geneem wat hier beskikbaar is , en het dit omgeskakel met ongeveer dieselfde bitsnelheid vir AV1, VP9, H.264-kodeks. Die resultate is hieronder sodat jy dit vir jouself kan vergelyk.
Nota 1: As die lêer hieronder nie vir jou laai nie, is dit dalk tyd om jou blaaier op te dateer. Ek sal 'n Chromium-gebaseerde blaaier soos Chrome, Vivaldi, Brave of Opera aanbeveel. Hier is die jongste inligting oor AV1-ondersteuning
Nota 2: Vir Firefox 66 op Linux sal jy die vlag moet stel media.av1.enabled tot betekenis true в about:config
Nota 3: Ek het besluit om nie gewone GIF's hieronder in te sluit nie as gevolg van hul groot grootte en die hoeveelheid data wat dit benodig om hierdie bladsy te laai! (Wat ironies sou wees, aangesien hierdie bladsy gaan oor die vermindering van die hoeveelheid data op 'n bladsy :)). Maar jy kan die finale GIF's hier sien
Vertaler se nota: Habr laat jou nie toe om outospeel te aktiveer en die lêer te lus nie, so jy kan net die kwaliteit evalueer. Jy kan regstreeks sien hoe die "geanimeerde prente" sal lyk .
Toneel 1 @ 200 Kbps
Hier is baie beweging, wat veral sensitief is teen lae bitrate. Jy kan dadelik sien hoe sleg H.264 teen hierdie bitsnelheid is; vierkante is onmiddellik sigbaar. VP9 verbeter die situasie 'n bietjie, maar die blokkies is steeds sigbaar. AV1 wen duidelik en lewer 'n ooglopend beter prentjie.
H.264
VP9
AV1
Toneel 2 @ 200 Kbps
Daar is baie deurskynende CGI-inhoud hier. Die resultate is nie so anders as die vorige keer nie, maar oor die algemeen lyk die AV1 beter.
H.264
VP9
AV1
Toneel 3 @ 100 Kbps
In hierdie toneel draai ons die bitsnelheid af na 100 Kbps en die resultate is konsekwent. AV1 behou sy leierskap selfs teen lae bitrates!
H.264
VP9
AV1
Kersie op die koek
Om hierdie artikel te voltooi deur die hoeveelheid bandwydte wat gestoor is in vergelyking met GIF te voel - die totale grootte van alle video's is hoër ... 1.62 MB!! Reg. Sommige fokken 1,708,032 1 XNUMX grepe! Ter vergelyking, hier is die GIF- en AVXNUMX-videogroottes vir elke toneel
GIF
AV1
Toneel 1
11.7 MB
0.33 MB
Toneel 2
7.27 MB
0.18 MB
Toneel 3
5.62 MB
0.088 MB
Eenvoudig verstommend! Is dit nie?
Let wel: Die lêergroottes van VP9 en H264 word nie gegee nie, aangesien hulle feitlik nie verskil van AV1 nie as gevolg van die gebruik van dieselfde bitsnelheid. Dit sal oorbodig wees om nog twee kolomme met dieselfde groottes by te voeg, net om te beklemtoon dat hierdie kodeks baie beter kwaliteit as GIF by baie kleiner lêergroottes produseer.
Bron: will.com