Сжатие видео

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

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. Причем отмечается именно возможность сжимать фоновое видео и синемаграфы для сайтов.

Clipchamp enterprise users

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

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

Optimize your video for web

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

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

Select WebM

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

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

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

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

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

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

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

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

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