Зараз 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