Цяпер 2019 год, і нам пара б прыняць рашэнне адносна GIF ( - Тут гаворка аб вымаўленні ў англійскай, для нас гэта не актуальна - заўв. перав.). GIFы займаюць велізарную колькасць месца (звычайна па некалькі мегабайт!) што, калі вы вэб-распрацоўшчык, цалкам супярэчыць вашым жаданням! Як вэб-распрацоўшчык, вы хочаце мінімізаваць рэчы, якія карыстальнікам трэба спампаваць, каб сайт загружаўся хутка. Па той жа прычыне вы мінімізуеце JavaScript, аптымізуеце PNG, JPEG, а часам і канвертуеце . Але што ж рабіць са дзядком GIFам?
Там, куды мы накіроўваемся, нам не спатрэбяцца GIFы!
Калі ваша мэта - палепшыць хуткасць загрузкі сайта, то ад GIF трэба пазбаўляцца! Але як жа тады рабіць аніміраваныя карцінкі? Адказ - відэа. І ў большасці выпадкаў, вы атрымаеце лепшае якасць і эканомію месца ў 50-90%! У жыцці большасць рэчаў маюць свае плюсы і мінусы. Калі вы замяняеце GIF на відэа, мінусаў часцей за ўсё знайсці не атрымаецца.
Далоў усе GIFы!
На шчасце, замена GIF на відэа была звычайнай справай апошнія гады, так што ўсе неабходныя прылады ўжо ў ходу. У гэтым пасце, я не буду вынаходзіць ровар, а толькі крыху палепшу наяўныя рашэнні. Такім чынам, вось сутнасць:
- Вазьміце GIF і пераканвертуе яго ў відэа
- Закадуйце відэа з дапамогай H.264 ці VP9, г.зн. сцісніце яго і спакуйце ў MP4 або WebM кантэйнер
- заменіце
<img>з аніміраваным GIF на<video>з ролікам - Уключыце аўтапрайграванне без гуку і зацыкліце, каб дабіцца эфекту GIF
Цяпер 2019 год
Цяпер 2019 год. Прагрэс рухаецца наперад, а мы мусім ад яго не адставаць. Да гэтага часу ў нас было два варыянты кодэкаў, якія шырока падтрымліваюцца ва ўсіх браўзэрах і інструментах для кадавання відэа:
- H.264 — які з'явіўся ў 2003 і шырэй за ўсё выкарыстоўваецца сёння
- VP9 — які з'явіўся ў 2013 і які дамогся паляпшэння сціску амаль на 50% у параўнанні з H.264, хоць не ўсё і не заўсёды так вясёлкава
Заўвага: хоць стандарт H.265 - наступная версія H.264 і здольны канкураваць з VP9, я не разглядаю яго з-за слабой падтрымкі браўзэрамі, што паказана на старонцы . Выдаткі на ліцэнзаванне – галоўны чыннік, па якой Н.265 не стаў гэтак жа распаўсюджаны як і H.264 і па якой кансорцыўм Alliance of Open Media працуе з кодэкам без адлічэнняў – з AV1.
Памятайце, што наша мэта ў тым, каб паменшыць велізарныя GIFы да найменшага магчымага памеру, каб паскорыць загрузку. Гэта быў бы дзіўны 2019 год, калі б у нас у арсенале не з'явілася новага стандарта для сціску відэа. Але ён ёсць і завецца AV1. З AV1 можна . Лепата! 🙂
AV1 да вашых паслуг з 2019 года!
На дэсктопах
Нядаўна падтрымка дэкадавання AV1 відэа была дададзеная ў дэсктопных версіях и . Прама зараз падтрымка ў Firefox глючыць і можа выклікаць збоі, але справы павінны зменіцца з даданнем ужо ў Firefox 67 ( - заўв. перав.). Для дэталяў аб новай версіі чытайце
На смартфонах
Для смартфонаў апаратная падтрымка ў цяперашні час адсутнічае з-за адсутнасці адпаведных дэкодэраў. Можна зрабіць праграмнае дэкадаванне, праўда гэта прывядзе да павелічэння выдатку батарэі. Першыя мабільныя SOC з падтрымкай апаратнага дэкадавання AV1 з'явяцца ў 2020 году.
І тут чытачы артыкула такія "так калі мабільныя пакуль нармальна не падтрымліваюць, навошта тады выкарыстоўваць AV1?"
AV1 - даволі новы кодэк, і мы знаходзімся ў самым пачатку яго адаптацыі. Падумайце аб гэтым артыкуле як аб стадыі "пакуль вы рыхтуеце, народ падцягваецца". Падтрымка на дэсктопах сама па сабе ўжо паскорыць сайты для часткі аўдыторыі. А старыя кодэкі можна выкарыстоўваць як fallback сцэнар, калі на мэтавай прыладзе AV1 не падтрымліваецца. Затое па меры пераходу карыстачоў на аксэсуары з падтрымкай AV1, усё ўжо будзе гатова. Каб гэтага дамагчыся, нам трэба стварыць тэг відэа, як паказана ніжэй, які дазволіць браўзэру выбіраць пераважны фармат. AV1 ->> VP9 ->> H.264. Ну а калі ў карыстача зусім стары дэвайс ці навігатар, які відэа не падтрымлівае наогул (што краце малаверагодна з H264), то ён проста ўбачыць 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>Стварэнне AV1
Стварыць відэа ў AV1 нескладана. і выкарыстоўвайце каманды ніжэй. Мы выкарыстоўваем 2 праходы для дасягнення мэтавага бітрэйту. Для гэтага мы будзем запускаць ffmpeg двойчы. Першы раз мы запішам вынік у неіснуючы файл. Гэта створыць часопіс, які спатрэбіцца для другога запуску 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Вось расшыфроўка параметраў:
-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
Для стварэння GIF я выкарыстоўваў прыведзеную ніжэй каманду. Каб паменшыць памер, я маштабаваў GIF да 720px у шырыню і 12 fps замест зыходнага відэа 24 fps.
./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вынікі тэстаў
Лепш адзін раз убачыць, чым сто разоў прачытаць, праўда? Давайце пераканаемся, што AV1 - правільны выбар для нашых мэт. Я ўзяў бясплатнае відэа Tears Of Steel, даступнае тут , і канвертаваў яго, выкарыстоўваючы прыкладна аднолькавы бітрэйт для кодэкаў AV1, VP9, H.264. Вынікі ніжэй, так што вы можаце параўнаць іх самастойна.
Заўвага 1: Калі файл ніжэй у вас не загружаецца, магчыма, вам сітавіна абнавіць браўзэр. Я б параіў браўзэр на аснове Chromium, напрыклад, Chrome, Vivaldi, Brave ці Opera. Вось апошняя інфармацыя па падтрымцы AV1
Заўвага 2: Для Firefox 66 у Linux вам трэба будзе ўсталяваць сцяг media.av1.enabled у значэнне true в about:config
Заўвага 3: Я вырашыў не ўключаць звычайныя GIF ніжэй з-за іх вялікага памеру і аб'ёму даных, які мог бы спатрэбіцца для загрузкі гэтай старонкі! (Што было б іранічна, бо гэтая старонка аб памяншэнні аб'ёму дадзеных на старонцы :)). Але вы можаце паглядзець выніковыя GIFы тут
Заўвага перакладчыка: Хабр не дазваляе ўключыць аўтапрайграванне і зацыкліць файл, таму ацаніць атрымаецца толькі якасць. Паглядзець як будуць выглядаць «аніміраваныя карцінкі» ужывую можна ў .
Сцэна 1 @ 200 Kbps
Тут шмат руху, што асабліва адчувальна на нізкіх бітрэйтах. Адразу відаць, як дрэнны H.264 на гэтым бітрэйце адразу бачныя квадраты. VP9 крыху паляпшае сітуацыю, але квадраты ўсё яшчэ бачныя. AV1 відавочна выйграе, выдаючы відавочна лепшую карцінку.
H.264
VP9
AV1
Сцэна 2 @ 200 Kbps
Тут шмат напаўпразрыстага CGI кантэнту. Вынікі ўжо не адрозніваюцца так моцна, як у мінулы раз, але ў цэлым AV1 выглядае лепш.
H.264
VP9
AV1
Сцэна 3 @ 100 Kbps
У гэтай сцэне, мы выкручваем бітрэйт уніз да 100 Kbps і вынікі адпавядаюць. AV1 захоўвае лідэрства і на нізкіх бітрэйтах!
H.264
VP9
AV1
Вішэнка на тартах
Каб скончыць артыкул, адчуўшы колькасць зэканомленага трафіку ў параўнанні з GIF – агульны памер усіх відэа вышэй… 1.62 МБ!! Правільна. Нейкіх гробаных 1,708,032 байт! Для параўнання, вось памер відэа GIF і AV1 для кожнай са сцэн
GIF
AV1
Сцэна 1
11.7 MB
0.33 MB
Сцэна 2
7.27 MB
0.18 MB
Сцэна 3
5.62 MB
0.088 MB
Проста страшэнна! Ці не так?
Заўвага: Памеры файлаў VP9 і H264 не прыведзены, бо практычна не адрозніваюцца ад AV1 з-за выкарыстанні таго ж бітрэйту. Было б залішне дадаваць яшчэ два слупка з аднолькавымі памерамі, толькі каб падкрэсліць, што гэтыя кодэкі выдаюць значна лепшую якасць чым GIF пры моцна малодшых памерах файлаў.
Крыніца: habr.com