2019. је и време је да се одлучимо за ГИФ-ове ( - овде говоримо о изговору на енглеском, за нас ово није релевантно - прибл. превод). ГИФ-ови заузимају огромну количину простора (обично неколико мегабајта!), што је, ако сте веб програмер, потпуно супротно вашим жељама! Као веб програмер, желите да минимизирате ствари које корисници морају да преузму како би се сајт брзо учитавао. Из истог разлога, минимизирате ЈаваСцрипт, оптимизујете ПНГ, ЈПЕГ, а понекад и конвертујете . Али шта да радите са старим ГИФ-ом?
Неће нам требати ГИФ-ови тамо где идемо!
Ако је ваш циљ да побољшате брзину учитавања сајта, онда морате да се решите ГИФ-ова! Али како онда направити анимиране слике? Одговор је видео. И у већини случајева, добићете бољи квалитет и уштеду простора од 50-90%! У животу, већина ствари има своје предности и мане. Када ГИФ замените видео записом, најчешће нећете моћи да пронађете недостатке.
Доле са свим ГИФ-овима!
Срећом, замена ГИФ-ова видео записима је уобичајена последњих година, тако да су сви неопходни алати већ у употреби. У овом посту нећу поново измишљати точак, већ ћу само мало побољшати постојећа решења. Дакле, ево суштине:
- Узмите ГИФ и претворите га у видео
- Кодирајте видео помоћу Х.264 или ВП9, тј. компримујте га и спакујте у МП4 или ВебМ контејнер
- Заменити
<img>са укљученим анимираним ГИФ-ом<video>са ваљком - Укључите аутоматску репродукцију без звука и петљу за ГИФ ефекат
2019. је
Сада је 2019. Напредак иде напред, а ми морамо да га пратимо. До сада смо имали две опције кодека које су широко подржане у свим прегледачима и алатима за кодирање видео записа:
- Х.КСНУМКС - уведен 2003. године и данас се највише користи
- ВП9 - појавио се 2013. године и постигао побољшање компресије од скоро 50% у поређењу са Х.264, иако није све увек тако ружичасто
Напомена: Иако је Х.265 следећа верзија Х.264 и може да се такмичи са ВП9, не сматрам то због лоше подршке претраживача, као што је приказано на страници . Трошкови лиценцирања су главни разлог зашто Х.265 није постао толико распрострањен као Х.264 и зашто конзорцијум Алијансе за отворене медије ради са кодеком без накнаде, АВ1.
Запамтите, наш циљ је да смањимо огромне ГИФ-ове на најмању могућу величину да бисмо убрзали време учитавања. Била би чудна 2019. да у нашем арсеналу немамо нови стандард за видео компресију. Али постоји и зове се АВ1. Са АВ1 можете . Баббле! 🙂
АВ1 вам је на услузи од 2019!
На десктоп рачунарима
Недавно је у десктоп верзије додата подршка за АВ1 видео декодирање и . Подршка за Фирефок тренутно није у реду и може изазвати падове, али ствари би требало да се побољшају додавањем већ у Фирефок-у 67 ( — прибл. превод). За детаље о новој верзији прочитајте -
На паметним телефонима
Тренутно не постоји хардверска подршка за паметне телефоне због недостатка одговарајућих декодера. Можете извршити софтверско декодирање, иако ће то довести до повећане потрошње батерије. Први мобилни СОЦ који подржавају АВ1 хардверско декодирање појавиће се 2020.
А онда читаоци чланка кажу, „па ако мобилни телефони то још не подржавају како треба, зашто користити АВ1?“
АВ1 је прилично нов кодек, а ми смо на самом почетку његове адаптације. Замислите овај чланак као фазу „док кувате, публика ће вас пратити“. Подршка за радну површину сама по себи ће убрзати сајтове за део публике. А стари кодеци се могу користити као резервни сценарио када АВ1 није подржан на циљном уређају. Али како корисници пређу на уређаје са АВ1 подршком, све ће бити спремно. Да бисмо то постигли, морамо да креирамо видео ознаку као што је приказано у наставку, што ће омогућити претраживачу да одабере жељени формат – АВКСНУМКС - >> ВП9 - >> Х.КСНУМКС. Па, ако корисник има веома стар уређај или навигатор који уопште не подржава видео (што је крајње мало вероватно са Х264), онда ће само видети ГИФ
<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>Креирање АВ1
Прављење видео записа у АВ1 је једноставно. и користите наредбе испод. Користимо 2 пролаза да бисмо постигли циљну брзину преноса. Да бисмо то урадили, двапут ћемо покренути ффмпег. Први пут када запишемо резултат у непостојећу датотеку. Ово ће креирати дневник који ће бити потребан за друго покретање ффмпег-а.
# 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Прављење ГИФ-ова
Да бих направио ГИФ, користио сам наредбу испод. Да бих смањио величину, скалирао сам ГИФ на ширину од 720 пиксела и 12 фпс уместо оригиналног видеа од 24 фпс.
./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Резултати испитивања
Боље је једном видети него сто пута прочитати, зар не? Хајде да се уверимо да је АВ1 прави избор за наше потребе. Снимио сам бесплатни видео Теарс Оф Стеел који је доступан овде , и конвертовао га користећи приближно исти битрате за АВ1, ВП9, Х.264 кодеке. Резултати су у наставку, тако да можете сами да их упоредите.
Напомена 1: Ако се датотека испод не учита за вас, можда је време да ажурирате прегледач. Препоручио бих претраживач заснован на Цхромиум-у као што је Цхроме, Вивалди, Браве или Опера. Ево најновијих информација о АВ1 подршци
Напомена 2: За Фирефок 66 на Линук-у мораћете да поставите заставицу media.av1.enabled у смисао true в about:config
Напомена 3: Одлучио сам да не укључујем обичне ГИФ-ове у наставку због њихове велике величине и количине података која би била потребна за учитавање ове странице! (Што би било иронично, пошто је ова страница о смањењу количине података на страници :)). Али коначне ГИФ-ове можете видети овде
Напомена преводиоца: Хабр вам не дозвољава да омогућите аутоплеј и петљу датотеке, тако да можете само да процените квалитет. Како ће изгледати „анимиране слике“ можете видети уживо .
Сцена 1 @ 200 Кбпс
Овде има доста кретања, што је посебно осетљиво на ниским брзинама преноса. Можете одмах да видите колико је Х.264 лош при овој брзини; квадрати су одмах видљиви. ВП9 мало поправља ситуацију, али се квадрати и даље виде. АВ1 очигледно побеђује, стварајући очигледно бољу слику.
Х.КСНУМКС
ВП9
АВКСНУМКС
Сцена 2 @ 200 Кбпс
Овде има много прозирног ЦГИ садржаја. Резултати нису толико другачији као прошли пут, али генерално АВ1 изгледа боље.
Х.КСНУМКС
ВП9
АВКСНУМКС
Сцена 3 @ 100 Кбпс
У овој сцени смањујемо брзину преноса на 100 Кбпс и резултати су доследни. АВ1 одржава своје лидерство чак и при малим брзинама преноса!
Х.КСНУМКС
ВП9
АВКСНУМКС
Трешња на торти
Да завршимо овај чланак тако што ћете осетити количину сачуваног пропусног опсега у поређењу са ГИФ-ом - укупна величина свих видео записа је већа... 1.62 МБ!! Јел тако. Неких јебених 1,708,032 бајтова! За поређење, ево величине ГИФ и АВ1 видеа за сваку сцену
ГИФ
АВКСНУМКС
Сцена 1
КСНУМКС мб
КСНУМКС мб
Сцена 2
КСНУМКС мб
КСНУМКС мб
Сцена 3
КСНУМКС мб
КСНУМКС мб
Просто запањујући! Зар не?
Напомена: Величине датотека ВП9 и Х264 нису наведене, јер се практично не разликују од АВ1 због коришћења истог битрате-а. Било би сувишно додати још две колоне исте величине, само да би се нагласило да ови кодеци производе много бољи квалитет од ГИФ-а при много мањим величинама датотека.
Извор: ввв.хабр.цом