Как использовать форматы видео для анимационного контента (и зачем это нужно)

Зачем использовать видеоформаты для анимированного контента?

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

Формат обмена графикой (GIF) — это популярный тип файла, в котором отображается анимированное содержимое (обычно представленное в цикле). Возможно, вы знакомы с популярной библиотекой GIF, GIPHY:

Однако файлы GIF могут быть большими, и для их работы требуется большая пропускная способность. В результате может пострадать скорость вашего сайта.

Медленная загрузка страниц, скорее всего, создаст плохой пользовательский опыт. Более того, если ваш сайт работает плохо, это может повлиять на его показатели Core Web Vitals и снизить его рейтинг в результатах поиска.

Если вы уже были обеспокоены производительностью своего сайта, вы, возможно, обнаружили, что виноваты GIF-файлы при использовании PageSpeed ​​Insights. Этот популярный инструмент предоставляет пользователям советы о том, как повысить скорость сайта. Одна из распространенных рекомендаций — «использовать видеоформаты для анимированного контента». Вы также можете получить тот же совет в разделе «Возможности», если используете инструмент Google Lighthouse.

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

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

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

Теперь, когда вы знаете, почему вы можете захотеть использовать видеоформаты для анимированного контента, мы проведем вас через три шага, чтобы сделать именно это!

• Шаг 1. Создайте видео в формате MP4.
• Шаг 2: Создайте видео WebM
• Шаг 3. Настройте свое видео как GIF

Шаг 1. Создайте видео в формате MP4.

Если вы хотите использовать видео вместо GIF, первым делом нужно преобразовать файл анимации в видеофайл. MP4 — один из наиболее часто используемых форматов видеофайлов, так что это хорошее место для начала.

Вы можете легко конвертировать различные форматы файлов с помощью бесплатного инструмента разработки, такого как FFmpeg:

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

После того, как вы установили FFmpeg в своей операционной системе, перейдите к инструменту командной строки и выполните следующее:

ffmpeg -i your-animation.gif your-animation.mp4

Не забудьте поменять местами имена ваших входных и выходных файлов вместо your-animation.gif и your-animation.mp4 .

Это преобразует ваш GIF в видео MP4.

Шаг 2: Создайте видео WebM

Как упоминалось ранее, видеофайлы меньше по размеру и более эффективны, чем популярные форматы анимационных файлов, такие как GIF. Однако вы можете выбрать один из нескольких типов видеофайлов. MP4, пожалуй, самый популярный, но видеофайлы WebM еще меньше.

Не все веб-браузеры поддерживают формат файлов WebM, но все равно рекомендуется создавать файлы как .mp4, так и .webm. Таким образом, вы можете использовать любой источник видео на следующем шаге.

Хорошей новостью является то, что вы также можете создать видеофайл WebM с помощью FFmpeg. Просто введите следующий код в инструменте командной строки:

ffmpeg -i your-animation.gif -c vp9 -b:v 0 -crf 41 your-animation.webm

Еще раз не забудьте поменять местами свои уникальные имена файлов.

Шаг 3. Настройте свое видео как GIF

После того, как вы создали свои файлы, последним шагом будет отображение вашего видео. Если вы используете WordPress или любую другую платформу, позволяющую встраивать код, вы можете использовать простой html-элемент <video> . Кроме того, вы можете легко настроить встроенное видео так, чтобы оно вело себя как GIF, добавив определенные атрибуты.

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

<video autoplay loop muted playsinline>

<source src="your-animation.webm" type="video/webm"/>

<source src="your-animation.mp4" type="video/mp4"/>

</video>

Как видите, вы можете использовать два видеоисточника. Это может показаться излишним, но браузер просто будет использовать тот источник, который сможет определить первым. Это означает, что если он поддерживает файлы WebM, он будет использовать этот параметр в первую очередь.

После того, как вы встроите приведенный выше код на свой сайт, вы, вероятно, захотите протестировать его, чтобы убедиться, что он правильно работает на внешнем интерфейсе. Вот и все! Вы также можете вернуться к PageSpeed ​​Insights или Lighthouse, чтобы увидеть, насколько улучшились показатели скорости вашего сайта после внесения этого изменения.

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

Как мы видели, ручное преобразование файлов анимации в видео может быть относительно простым, если вы используете такой инструмент, как FFmpeg. Однако, если вы не знакомы с использованием командной строки, начать работу может быть сложно. Более того, если у вас нет других причин для его использования, может не иметь смысла изучать этот навык.

В этом случае вы, возможно, ищете ярлык для использования видеоформатов для анимированного контента. Хорошей новостью является то, что вы можете использовать сеть доставки контента изображений (CDN) для достижения тех же результатов. Еще лучше, когда вы используете WordPress, вы можете получить CDN изображений с плагином оптимизации.

Optimole помогает оптимизировать все, что связано с изображениями, с помощью CDN изображений и других инструментов. Поэтому это отличное решение для работы:

Чтобы начать работу с Optimole, установите и активируйте плагин на панели управления WordPress. Затем вам будет предложено создать учетную запись в Optimole.

Затем вы получите подтверждение по электронной почте, содержащее ваши данные для входа, а также ссылку для активации новой учетной записи. Как только вы активируете свою учетную запись, вы получите ключ API, который вы можете использовать для подключения вашего веб-сайта к вашей учетной записи.

Затем вы сможете получить доступ к Optimole прямо на панели управления WordPress. Просто перейдите в «Медиа» > «Optimole» > «Настройки» :

На этом экране откройте Дополнительные параметры. В разделе «Сжатие» найдите панель «Включить преобразование Gif в видео» и просто нажмите кнопку, чтобы активировать эту функцию:

Затем нажмите Сохранить изменения . Это так просто!

Теперь Optimole просканирует ваш сайт и автоматически преобразует GIF-изображения в видеофайлы. Более того, он использует форматы MP4 и WebM. Это означает, что ваш анимированный контент всегда будет отображаться в наиболее оптимальном видеоформате!

Заключение о том, как использовать форматы видео для анимированного контента

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

К счастью, вы можете использовать видеоформаты для анимированного контента. Это более эффективный способ показа анимации, так как он может помочь обеспечить бесперебойную работу вашего сайта. Вы можете вручную преобразовать свои GIF-файлы в видео с помощью командной строки, но это может быть утомительно. В качестве альтернативы вы можете использовать плагин оптимизации, такой как Optimole. Плагин использует CDN изображений и имеет настройку, которую вы можете включить для автоматического преобразования GIF-файлов в видео.

У вас есть вопросы о том, как использовать видеоформаты для анимированного контента? Дайте нам знать в комментариях ниже!