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, не го сметам поради лошата поддршка на прелистувачот, како што е прикажано на страницата . Трошоците за лиценцирање се главната причина зошто H.265 не стана толку широко распространет како H.264 и зошто конзорциумот Alliance of Open Media работи со кодек без авторски права, AV1.
Запомнете, нашата цел е да ги намалиме огромните GIF-датотеки до најмала можна големина за да го забрзаме времето на вчитување. Би била чудна 2019 година доколку немаме нов стандард за видео компресија во нашиот арсенал. Но, тој постои и се нарекува AV1. Со AV1 можете . Бабање! 🙂
AV1 е на ваша услуга од 2019 година!
На десктоп компјутерите
Неодамна поддршката за декодирање на видео AV1 беше додадена на десктоп верзиите и . Во моментов, поддршката за Firefox е кабриолет и може да предизвика падови, но работите треба да се подобрат со додавање на веќе во Firefox 67 ( - прибл. превод.). За детали за новата верзија прочитајте -
На паметни телефони
Во моментов нема хардверска поддршка за паметни телефони поради недостаток на соодветни декодери. Можете да направите софтверско декодирање, иако тоа ќе доведе до зголемена потрошувачка на батеријата. Првите мобилни SOC кои поддржуваат декодирање на хардверот AV1 ќе се појават во 2020 година.
И тогаш читателите на статијата велат: „па ако мобилните телефони сè уште не го поддржуваат правилно, зошто да користите AV1?
AV1 е прилично нов кодек и ние сме на самиот почеток на неговото прилагодување. Сфатете ја оваа статија како фаза „додека готвите, толпата ќе следи“. Поддршката на работната површина сама по себе ќе ги забрза сајтовите за дел од публиката. И старите кодеци може да се користат како резервно сценарио кога 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-от на 720 пиксели во ширина и 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-ови овде
Забелешка на преведувачот: Habr не дозволува да ја овозможите автоматската репродукција и да ја вклучите датотеката, така што можете само да го оценувате квалитетот. Можете да видите како ќе изгледаат „анимираните слики“ во живо .
Сцена 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 MB!! Во право. Некои ебани 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 при многу помали големини на датотеки.
Извор: www.habr.com