Хабрахабр

[Перевод] Пришло время заменить GIF на AV1 видео

Здесь мы никогда не договоримся! Сейчас 2019 год, и нам пора бы принять решение относительно GIF (нет, речь не об этом решении! перев.). — тут речь о произношении в английском, для нас это не актуально — прим. Как веб-разработчик, вы хотите минимизировать вещи, которые пользователям нужно скачать, чтобы сайт загружался быстро. GIFы занимают огромное количество места (обычно по несколько мегабайт!) что, если вы веб-разработчик, полностью противоречит вашим желаниям! Но что же делать со старичком GIFом? По той же причине вы минимизируете JavaScript, оптимизируйте PNG, JPEG, а иногда и конвертируете JPEG в WebP.

Там, куда мы направляемся, нам не понадобятся GIFы!

Но как же тогда делать анимированные картинки? Если ваша цель — улучшить скорость загрузки сайта, то от GIF нужно избавляться! И в большинстве случаев, вы получите лучшее качество и экономию места в 50-90%! Ответ — видео. Когда вы заменяете GIF на видео, минусов чаще всего найти не получится. В жизни большинство вещей имеют свои плюсы и минусы.

Долой все GIFы!

В этом посте, я не стану изобретать велосипед, а лишь немного улучшу имеющиеся решения. К счастью, замена GIF на видео была обычным делом последние годы, так что все необходимые инструменты уже в ходу. Итак, вот суть:

  1. Возьмите GIF и переконвертируйте его в видео
  2. Закодируйте видео с помощью H.264 или VP9, т.е. сожмите его и упакуйте в MP4 или WebM контейнер
  3. Замените <img> с анимированным GIF на <video> с роликом
  4. Включите автовоспроизведение без звука и зациклите, чтобы добиться эффекта GIF

У Google есть хорошая документация, описывающая процесс.

Сейчас 2019 год

Прогресс движется вперёд, а мы должны от него не отставать. Сейчас 2019 год. До сих пор у нас было два варианта кодеков, которые широко поддерживаются во всех браузерах и инструментах для кодирования видео:

  1. H.264 — появившийся в 2003 и шире всего используемый сегодня
  2. VP9 — появившийся в 2013 и добившийся улучшения сжатия почти на 50% по сравнению с H.264, хотя как пишут здесь не всё и не всегда так радужно

265 — следующая версия H. Примечание: хотя стандарт H. Расходы на лицензирование — главная причина, по которой Н. 264 и способен конкурировать с VP9, я не рассматриваю его из-за слабой поддержки браузерами, что показано на странице https://caniuse.com/#feat=hevc. 264 и по которой консорциум Alliance of Open Media работает с кодеком без отчислений — с AV1. 265 не стал так же распространён как и H.

Это был бы странный 2019 год, если бы у нас в арсенале не появилось нового стандарта для сжатия видео. Помните, что наша цель в том, чтобы уменьшить огромные GIFы до наименьшего возможного размера, чтобы ускорить загрузку. С AV1 можно добиться примерно 30% улучшения сжатия по сравнению с VP9. Но он есть и называется AV1. 🙂 Лепота!

AV1 к вашим услугам с 2019 года!

На десктопах

Прямо сейчас поддержка в Firefox глючит и может вызвать сбои, но дела должны изменится с добавлением декодера dav1d уже в Firefox 67. Недавно поддержка декодирования AV1 видео была добавлена в десктопных версиях Google Chrome 70 и Mozilla Firefox 65. 3. Для деталей о новой версии читайте — dav1d 0. 0 релиз: ещё быстрей!

На смартфонах

Можно сделать программное декодирование, правда это приведёт к увеличению расхода батареи. Для смартфонов аппаратная поддержка в настоящее время отсутствует из-за отсутствия соответствующих декодеров. Первые мобильные SOC с поддержкой аппаратного декодирования AV1 появятся в 2020 году.

И тут читатели статьи такие «так если мобильные пока нормально не поддерживают, зачем тогда использовать AV1?»

Подумайте об этой статье как о стадии «пока вы готовите, народ подтягивается». AV1 — довольно новый кодек, и мы находимся в самом начале его адаптации. А старые кодеки можно использовать как fallback сценарий, когда на целевом устройстве AV1 не поддерживается. Поддержка на десктопах сама по себе уже ускорит сайты для части аудитории. Чтобы этого добиться, нам нужно создать тег видео, как показано ниже, который позволит браузеру выбирать предпочтительный формат — AV1 ->> VP9 ->> H. Зато по мере перехода пользователей на девайсы с поддержкой AV1, всё уже будет готово. Ну а если у пользователя совсем старый девайс или навигатор, который видео не поддерживает вообще (что крайте маловероятно с H264), то он просто увидит GIF 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>

Создание AV1

Скачайте последнюю сборку ffmpeg для вашей системы отсюда и используйте команды ниже. Создать видео в AV1 несложно. Для этого мы будем запускать ffmpeg дважды. Мы используем 2 прохода для достижения целевого битрейта. Это создаст журнал, который понадобится для второго запуска 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</pre>
<p>Вот расшифровка параметров:</p>
<pre>-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 до 720px в ширину и 12 fps вместо исходного видео 24 fps. Для создания GIF, я использовал приведенную ниже команду.

./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 — правильный выбор для наших целей. Лучше один раз увидеть, чем сто раз прочитать, правда? 264. Я взял бесплатное видео Tears Of Steel, доступное здесь https://mango.blender.org/, и конвертировал его, используя примерно одинаковый битрейт для кодеков AV1, VP9, H. Результаты ниже, так что вы можете сравнить их самостоятельно.

Я бы посоветовал браузер на основе Chromium, например, Chrome, Vivaldi, Brave или Opera. Примечание 1: Если файл ниже у вас не загружается, возможно, вам пора обновить браузер. Вот последняя информация по поддержке AV1 https://caniuse.com/#feat=av1

Примечание 2: Для Firefox 66 в Linux вам нужно будет установить флаг media.av1.enabled в значение true в about:config

(Что было бы иронично, ведь эта страница об уменьшении объёма данных на странице :)). Примечание 3: Я решил не включать обычные GIF ниже из-за их большого размера и объема данных, который мог бы потребоваться для загрузки этой страницы! Но вы можете посмотреть итоговые GIFы здесь https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Посмотреть как будут выглядеть «анимированные картинки» вживую можно в оригинальной статье. Примечание переводчика: Хабр не позволяет включить автовоспроизведение и зациклить файл, поэтому оценить получится только качество.

Сцена 1 @ 200 Kbps

Сразу видно, как плох H. Здесь много движения, что особенно чувствительно на низких битрейтах. VP9 немного улучшает ситуацию, но квадраты всё ещё видны. 264 на этом битрейте сразу видны квадраты. AV1 явно выигрывает, выдавая очевидно лучшую картинку.

H.264

Your browser does not support HTML5 video.

VP9

Your browser does not support HTML5 video.

AV1

Your browser does not support HTML5 video.

Сцена 2 @ 200 Kbps

Результаты уже не отличаются так сильно, как в прошлый раз, но в целом AV1 выглядит лучше. Здесь много полупрозрачного CGI контента.

H.264

Your browser does not support HTML5 video.

VP9

Your browser does not support HTML5 video.

AV1

Your browser does not support HTML5 video.

Сцена 3 @ 100 Kbps

AV1 сохраняет лидерство и на низких битрейтах! В этой сцене, мы выкручиваем битрейт вниз до 100 Kbps и результаты соответствуют.

H.264

Your browser does not support HTML5 video.

VP9

Your browser does not support HTML5 video.

AV1

Your browser does not support HTML5 video.

Вишенка на торте

62 МБ!! Правильно. Чтобы закончить статью, ощутив количество сэкономленного трафика по сравнению с GIF — общий размер всех видео выше… 1. Для сравнения, вот размер видео GIF и AV1 для каждой из сцен Каких-то грёбаных 1,708,032 байт!

Не так ли? Просто сногсшибательно!

Было бы избыточно добавлять ещё два столбца с одинаковыми размерами, только чтобы подчеркнуть, что эти кодеки выдают гораздо лучшее качество чем GIF при сильно меньших размерах файлов. Примечание: Размеры файлов VP9 и H264 не приведены, так как практически не отличаются от AV1 из-за использования того же битрейта.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть