Гайд про сжатие видео для сайта: для чего нужно и что учесть при настройке

25/01/2025  видео
сжатие видео

Сжатие видео для сайта — это способ сделать ваш ресурс удобнее и привлекательнее для пользователей. Чем «‎легче» контент, тем выше шансы на быструю загрузку страниц и рост позиций в поисковой выдаче.

Разберём, как правильно это сделать и сохранить качество, какие ошибки стоит избегать, чтобы не навредить SEO-оптимизации.

Что такое сжатие и как оно работает

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

Существует два типа:

  1. Сжатие с потерями (lossy compression) удаляет часть несущественной для восприятия информации, но в результате страдает качество вывода. Такой алгоритм есть в любом компрессоре видео. Тип подходит для роликов, которые не показываются слишком часто, не несут серьёзную визуальную нагрузку или используются в виде миниатюр.
  2. Сжатие без потерь (lossless compression) работает иначе: оно компактно упаковывает данные, при этом сохраняет их без изменений. Такой подход используют, когда важно не потерять исходное качество. Минус типа — файлы остаются большими по размеру.

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

Почему сжатие видео важно

  • Большие файлы дольше загружаются. Даже самый быстрый интернет не гарантирует мгновенной загрузки ролика весом в несколько гигабайт. Каждая лишняя секунда увеличивает вероятность, что посетитель закроет вкладку.
  • Сжатое видео ускоряет загрузку всей страницы. Лёгкими файлами быстрее обмениваться между сервером и пользователем. Это напрямую влияет на SEO: поисковики учитывают скорость открытия сайта и потоковой передачи медиа при ранжировании.
  • Удержание увеличивается. Никто не хочет ждать, пока видео нормально откроется, особенно на мобильных устройствах. Быстро загружающийся контент улучшает пользовательский опыт и снижает количество отказов.
  • Экономия ресурсов сервера и трафика. Сжатые ролики занимают меньше места на хостинге и требуют меньшего объёма передачи данных. Это важно для сайтов с большим количеством посетителей или ограниченным объёмом хранилища.
  • Оптимизация для мобильных. Файл с высоким битрейтом может стать настоящим кошмаром для пользователей с нестабильным соединением. Оптимизация контента позволяет избежать этого и улучшить опыт просмотра на любых устройствах.
  • Повышение скорости индексации. Поисковые системы находят страницы быстрее, если на них используются оптимизированные медиафайлы.

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

Как выбрать видеоформат

Универсальными можно назвать MP4 и WebM. Другие форматы, такие как AVI, MOV или MKV, используют реже.

Какие форматы видео поддерживают браузеры

Современные браузеры поддерживают разные видеоформаты, поэтому для максимальной совместимости рекомендуется предоставлять файл сразу в трёх вариантах:

  1. MP4 — работает на большинстве устройств и браузерах, включая Safari, Internet Explorer и Android.
  2. WebM — оптимален для современных веб-обозревателей, таких как Chrome, Firefox и Opera.
  3. Ogg (Ogv) — формат для Firefox и Opera, используется для обеспечения дополнительной совместимости.

Другие варианты:

  • Google Chrome: WebM, Ogg.
  • Mozilla Firefox: WebM, Ogg.
  • Opera: WebM, Ogg.
  • Safari: MP4 (включая iPhone).
  • Internet Explorer 9: MP4.
  • Internet Explorer 6—8: не поддерживает HTML5, только Flash.

Как правильно настроить параметры сжатия

Выделяются следующие параметры сжатия, которые влияют на итоговое качество и вес:

  • Разрешение. Это размер по ширине и высоте, измеряемый в пикселях. Для большинства сайтов и социальных сетей стандартом является Full HD (1920×1080), но для мобильных приложений используют HD (1280×720). Если ролик встроен в небольшой блок, то его разрешение можно ещё уменьшить, сохраняя при этом пропорции. Снижение параметра очень сильно влияет на размер выходных форматов. Например, уменьшение разрешения 4K до Full HD может «сбросить» до 40% от исходного веса.
  • Битрейт. Он определяет, сколько данных используется для кодирования видео за секунду, и отражается на качестве и весе. Рекомендованное значение ― 1—5 Мбит/с для HD и 4—8 Мбит/с для Full HD. Если важен баланс между размером файла и качеством, используйте переменный битрейт (VBR).
  • Кодек. Это алгоритм сжатия. Самый популярный для веба — кодек H.264, который работает во всех современных браузерах. Также можно использовать VP9 (для WebM) или более современный H.265 (HEVC), но он поддерживается не всеми устройствами.
  • Аудио. Звук тоже нужно сжимать, чтобы не увеличивать общий размер файла. Для аудио чаще всего используют кодек AAC с битрейтом 128—192 Кбит/с. Если нет важного сопровождения, можно убрать дорожку.
  • Частота кадров (FPS). Для большинства веб-роликов достаточно 30 кадров в секунду. Если что-то динамичное (спорт или игры), можно оставить 60 FPS, но это увеличит размер выходных файлов.
  • Формат кадра (Aspect Ratio). Убедитесь, что соотношение сторон соответствует целям вашего сайта. Для ПК используется 16:9, а для мобильных устройств — 9:16.

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

Существует множество популярных десктопных инструментов для оптимизации медиа. Например, HandBrake. Его бесплатная версия имеет множество настроек. Можно уменьшить размер видео без значительных потерь в качестве, провести пакетное сжатие. Программа доступна пользователям mac OS, Linux и Windows.

панель HandBrake

Инструкция:

  1. Зайдите на официальный сайт и скачайте ПО.
  2. Запустите HandBrake, далее Source, чтобы выбрать видеофайл для сжатия.
  3. В разделе Format задайте формат (например, MP4).
  4. Откорректируйте настройки Resolution, Bitrate и другие опции для оптимизации.
  5. Кликните Start Encode, чтобы начать процесс.

Если вы не хотите устанавливать дополнительное ПО, можно сжать видео для сайта онлайн. Облачные сервисы позволяют сделать это быстро ― ролик получится обработать прямо в вашем браузере. Тут подборка таких онлайн видеоредакторов. У них удобный интерфейс, а в некоторых даже есть инструменты редактирования. Результат можно получить на электронную почту с заданными параметрами экспорта или скачать прямо с сайтов.

Как встроить сжатое видео на сайт

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

HTML-теги

Для встраивания ролика на сайт используется тег <video>. Основные атрибуты, такие как src, controls, width и height, указывают путь к видео, добавляют элементы управления и задают размеры картинки на странице. Атрибуты autoplay, muted и loop позволяют настроить предварительный просмотр, автоматическое воспроизведение, удаление звука по умолчанию. Также можно использовать poster для отображения изображения до начала воспроизведения.


<video width="320" height="240" controls autoplay loop muted poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Дополнительные параметры и атрибуты, такие как preload и playsinline, дают возможность контролировать загрузку ролика и улучшать отображение на мобильных устройствах.

Чтобы обеспечить совместимость с разными браузерами, рекомендуется использовать несколько форматов видео с помощью элемента <source>.


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Адаптация под мобильные устройства

Это обязательное условие для любого контента, так как более 60% пользователей в 2024 году заходят на сайты с мобильных устройств. Для правильного отображения роликов на разных экранах следует использовать CSS с установкой ширины в 100% и высоты в автоматическом режиме. Также важна оптимизация видео для сайта в мобильной версии. Используйте разрешение 720p (1280×720) и сжимающие кодеки.

Чтобы повысить скорость загрузки, можно настроить динамическую доставку видео через протоколы HLS или DASH, которые подстраивают качество в зависимости от скорости сети. Также стоит учесть мобильные особенности, такие как автозапуск ролика с выключенным звуком (атрибут muted), что помогает избежать лишнего потребления трафика и улучшает пользовательский опыт.

Lazy loading

Lazy loading (отложенная загрузка) — метод, при котором видео запускается тогда, когда оно становится видимым для пользователя на экране. Такой подход значительно ускоряет загрузку страницы и экономит трафик. Особенно полезен на страницах с большим количеством контента.


<video class="lazy" autoplay muted loop playsinline width="320" height="240" poster="poster.jpg">
<source data-src="movie.webm" type="video/webm">
<source data-src="movie.mp4" type="video/mp4">
</video>

Существует ряд библиотек JavaScript для отложенной загрузки видео: Lazy load XT, Lazy Load JS, LazyYT и другие.

Апсолямов Михаил
Автор — Михаил Апсолямов
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее
наверх