Просто выбрать правильный формат изображений не достаточно. Даже если вы провели их минимизацию по всем направлениям, 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.
