Блог

Использование видеоформатов для анимированного контента

В процессе приведения сайта в соответствие к современным требованиям относительно скорости его работы, оптимизация изображений играет одну из ключевых ролей. Картинки много весят и тормозят его работу. Если оценивать аналитику Google то для поисковика скорость является приоритетной в ранжировании как бесплатного, так и платного продвижения.

Просто выбрать правильный формат изображений не достаточно. Даже если вы провели их минимизацию по всем направлениям, Google всё-равно может остаться не доволен. Аналитика PageSpeed Insights зачастую, в качестве одной из рекомендаций, выдаёт совет использовать для анимированного контента видеоформаты.

В пояснении к правилу значится следующее: «Большие GIF-файлы – неэффективный способ представления анимации. Чтобы сэкономить трафик в сети, используйте видео в формате MPEG4/WebM для анимированного контента и изображения в формате PNG/WebP – для статического.»

Почему GIF — не всегда хорошо

Если посмотреть сайты, которые специализируются на GIF-контенте, к примеру Gfycat, и проверить его в DevTools, то зачастую окажется, что GIF – это на самом деле видео. Почему так происходит? Анимированные картинки могут быть огромными . GIF-файлы нередко добавляют лишнего веса в несколько мегабайт. Это зависит от их качества, длинны и количества кадров.

К примеру, один ролик в формате GIF может весить почти 14 мегабайт. И это даже больше нежели полноценный среднестатистический сайт. Чтобы повысить производительность загрузки сайта и не заставлять пользователя долго ждать, лучше заменить анимированный GIF-контент.

К счастью, это одна из тех областей производительности при загрузке, где проделав небольшую работу можно достичь оптимального результата не теряя в качестве. Необходимо просто переконвертировать тяжеловесные GIF в быстрые и лёгкие видеофайлы. А затем встроить их на свою страницу таким образом, чтобы их визуальное восприятие не отличалось от GIFок.

Как превратить анимированные картинки в видео

Есть несколько способов конвертировать GIF в видео. Одним из простых и эффективных способов является использование инструмента FFmpeg.

FFmpeg –набор свободных библиотек, использующий открытый исходный код. С его помощью можно производить запись, конвертацию, передачу видео и аудио контента в различных форматах. Можно легко произвести конвертацию видеофайла из одного формата в другой. Помимо этого, есть и инструменты для декодирования.

Для начала, библиотеку ffmpeg нужно установить и проверить её работоспособность. Если всё сделано правильно, вам будет доступна диагностическая информация. В зависимости от платформы на которой вы работаете, способы установки разнятся.

  • Для macOS доступна установка через Homebrew, либо можно осуществить компиляцию самостоятельно
  • Для Windows используйте Chocolatey
  • Для Linux необходимо проверить доступность пакета предпочтительного дистрибутива (например, apt-get или yum).

Сразу же после того, как ffmpeg была корректно установлена, можно выбрать GIF и приступить к его трансформации в более подходящий формат. Для начала не экспериментируйте с контентом, расположенным непосредственно на вашем сайте. «Набейте руку» на сторонних гифках не удаляя свои. Как только полноценно научитесь с ними работать — сможете заменить весь требующийся контент.

Конвертация GIF в MPEG-4

MPEG-4 является наиболее распространённым форматом, который поддерживают все браузеры. Поэтому, предпочтительнее загружать видео именно в нём. Используя библиотеку, перейдите в папку с тестовым GIF-файлом. Чтобы его преобразовать потребуется простая команда:

ffmpeg -i input.gif output.mp4

Данная команда является наиболее простым решением для преобразования GIF в MPEG-4. В результате, если был доступен исходный GIF-файл размером 14 024 КБ, то будучи преобразованным в формат видео MPEG-4, он станет весить всего 867 КБ. Таким образом, экономия составляет 93,8%.

Флаг -i указывает на вход. Выход выставляется самостоятельно. Можно задать дальнейшей настройки видеовыхода, используя режим кодирования, который именуется коэффициентом постоянной скорости (или CRF). CRF отлично подходит в случае, когда требуется качество видео.

В данном случае, команда будет приблизительно таковой:

ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4

от предыдущей, данная команда отличается двумя ключевыми аспектами. Флаг -b:v ограничивает выходной битрейт , но когда мы хотим использовать режим CRF, он требует установки значения 0. В таком случае, флаг -crf будет расположен между 0 и 51. Чем это значение ниже, тем видео будет качественнее, но и тяжелее.

Если рассматривать как пример тестовый файл GIF размером 14 024 КБ, эта команда позволит создать видео MPEG-4 размером 687 КБ . Данный показатель ниже предыдущего ещё на 20%. Если требуются файлы еще меньшего размера, вы необходимо указать более высокое значение CRF. Просто имейте в виду, что более высокие значения приведут к низкому качеству видео, поэтому всегда проверяйте выходные данные кодера, чтобы убедиться, что результат является приемлемым.

Конвертация GIF в WebM

WebM является относительно новым форматом и до сих пор поддерживается не всеми браузерами. При этом, его использование довольно удобно. Данный <video> элемент позволяет указывать несколько <source> элементов. Соответственно, для тех браузеров, которые поддерживают формат WebM, его можно задать в качестве основного. Остальные же будут отправлять пользователя к MPEG-4.

В ffmpeg преобразовать GIF в WebM можно с помощью следующей команды:

ffmpeg -i input.gif -c vp9 -b:v 0 -crf 41 output.webm

Если сравнить полученный результат, то версия видео WebM будет приблизительно на 7% меньше, нежели в MPEG-4 с заданными в предыдущем примере настройками. При этом, его визуальное качество является аналогичным.

Замена анимированных <img>элементов GIF<video>

Использование видео в качестве анимированного GIF, требует проведения определённой работы. Только в этом случае, получится достичь 100% визуального восприятия. Ключевые отличия анимированного контента от видео заключается в следующем:

  • Проигрывание осуществляется автоматически
  • Происходит бесконечное зацикливание
  • Нет звука

Для того, чтобы использовать видео вместо GIF-файлов, необходимо явно указать <video> элементу на автоматическое воспроизведение, непрерывный цикл и отсутствие звука.

<video autoplay loop muted playsinline></video>

Таким образом, пользователь получит контент, который по всем визуальным признакам будет GIF-анимацией, а на самом деде — видео контентом.

Укажите свой <source>

После этого, необходимо указать источники видео. Для <video>-элемента требуется один или несколько <source>, являющихся дочерними элементами. Они будут указывать на разные видеофайлы, из которых браузер может выбирать, в зависимости от поддержки формата:

<video autoplay loop muted playsinline>

<source src=”oneDoesNotSimply.webm” type=”video/webm”>

<source src=”oneDoesNotSimply.mp4″ type=”video/mp4″>

</video>

Первым стоит указывать тот формат, который является предпочтительнее. Например, если вы сначала укажете видео в формате MPEG-4, а при этом браузер будет поддерживать WebM, то он пропустит эту возможность и автоматически загрузит пользователю MPEG-4.

Похожие записи