Сжатие видео

Как оптимизировать HTML5-видео для сайта

Опубликовано: 13 ноября 2017 г.
Автор: Tobi Raub
Clipchamp — бесплатный онлайн-редактор видеоПопробуй бесплатно
Поделиться этой публикацией

* Отныне сжатие видео доступно только пользователям Clipchamp Utilities.

Последняя редакция: 15 октября 2019 г.

Онлайн-видео пользуется колоссальной популярностью в интернете и уже стало привычным элементом веб-дизайна. 

Видео приковывает взгляды и будит воображение, а потому неудивительно, что многие сайты помещают видеоролики не где-нибудь, а прямо на главной странице. Кстати, HTML5-видео поддерживается почти во всех современных браузерах. Сайту также понадобится хороший контент-план и профессиональный логотип, который донесет основной посыл вашего бренда до целевой аудитории. Разобравшись с логотипом, вы сможете приступить к созданию других визуальных элементов для привлечения посетителей. Например, самое время всерьез задуматься о фоне или шапке в формате видео. Clipchamp предлагает широкий выбор шаблонов, которые отлично впишутся в дизайн любого сайта. Этот потрясающий синемаграф — лишь один из примеров:

Использовать этот шаблон

Аргументов в пользу HTML5-видео множество, но не спешите тут же менять свой сайт. Дело в том, что в данном вопросе есть свои подводные камни и, чтобы видео работало без запинок, его сначала нужно оптимизировать. В этой статье мы рассмотрим следующие вопросы:

  1. Зачем оптимизировать видео для сайта

    • Посетители не любят медленные сайты

    • Не все видеоформаты одинаково полезны

  2. Как оптимизировать видео с помощью Clipchamp

    • Сжатие видео для HTML5

    • Преобразование видео для браузера

1. Зачем оптимизировать видео для сайта

Преимущества HTML5 даются не просто так. Автоматическое воспроизведение встроенного видео замедляет загрузку страниц, что неизбежно ведет к снижению посещаемости. Также может оказаться, что видео не поддерживается в некоторых браузерах, которыми пользуются ваши клиенты.

Посетители не любят медленные сайты

HTML5-видео слишком большого размера способно серьезно затормозить работу сайта компании. Вряд ли ваши посетители будут в восторге от видеоролика с постоянным зависанием и буферизацией. 

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

Desktop and mobile user waiting for video to load

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

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

Редактор видео в браузере.

Профессиональное видео за считанные минуты. Всегда бесплатно!

Не все видеоформаты одинаково полезны

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

К сожалению, одного формата, «чтоб править всеми», не существует, но стоит отметить два варианта — WebM (VP8) и MP4 (H264). Они совместимы с большинством браузеров, хотя и не со всеми. 

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

2. Как оптимизировать видео с помощью Clipchamp

Два главных способа оптимизировать видео для веб-дизайна — сжатие и конвертирование. И то, и другое можно сделать бесплатно с помощью Clipchamp Utilities!

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

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

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

Сжатие видео для HTML5

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

Наша платформа уже набрала популярность среди графических и веб-дизайнеров, разработчиков и создателей сайтов на WordPress, Wix и Squarespace. Нас рекомендуют в блогах по веб-дизайну и на платформах для визуального конструирования сайтов, например, Webflow и BOWWE. Причем отмечается именно возможность сжимать фоновое видео и синемаграфы для сайтов.

Clipchamp enterprise users

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

Обычно для сайтов мы рекомендуем сжать видео как минимум до разрешения 720p, выбрав в настройках Clipchamp среднее или низкое качество. В опциях вывода можно выбрать, как «веб», так и «мобильные устройства». Вариант «мобильные устройства» позволяет получить на выходе более компактный файл, чем вариант «веб», но и качество картинки будет чуть ниже.

Optimize your video for web

Преобразование видео для браузера

На сервисе Clipchamp Utilities вы можете с легкостью преобразовать видео, чтобы повысить его совместимость с различными браузерами. Просто загрузите ролик, выберите необходимый формат в настройках и доверьте всю остальную работу бесплатному конвертеру Clipchamp:

Select WebM

Если в качестве запасного варианта вы хотите добавить видео в MP4, выполните всё то же самое, но в качестве формата выберите MP4.

Больше из блога Clipchamp

Загрузка видео с телефона в Clipchamp

7 ноября 2020 г.
В 2021 году мы закрыли Clipchamp Utilities и прекратили поддержку функции сжатия…

Как видео повышает коэффициент конверсии в электронной коммерции

8 июня 2020 г.
**** обновлено 28 мая 2020 года **** Независимо от того, являетесь ли вы владельцем…

Как встраивать видео в Word 2007-2016

8 марта 2020 г.
* Отныне сжатие видео доступно только пользователям Clipchamp Utilities. Независимо…

Создавайте видео бесплатно вместе с Clipchamp!

It looks like your preferred language is English