Фоновое видео делает сайт живым. Но когда оно весит 40 МБ и грузится четыре секунды, посетитель уходит раньше, чем видит ваш контент.

По данным HTTP Archive за 2025 год, видео занимает до 20% общего веса медийных страниц. Google учитывает скорость загрузки в ранжировании, а Core Web Vitals штрафуют за медленный LCP. Тяжёлое фоновое видео бьёт и по пользователю, и по SEO.

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

💡 Быстрый обзор:

• Форматы: готовим MP4 (H.264) + WebM (VP9), два файла покрывают все современные браузеры
• Инструмент: HandBrake, бесплатный, опенсорсный, с точной настройкой битрейта и разрешения
• Для Mac: встроенный экспорт QuickTime, без установки стороннего софта
• Трюк с YouTube: загрузили, YouTube пережал, скачали обратно оптимизированный MP4
• Онлайн-сервисы: CloudConvert, VideoSmaller, Clipchamp, когда ставить софт не хочется
• WordPress: плагины mb.YTPlayer и Video Background, фоновое видео без правки темы

Форматы: почему нужны два файла

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

MP4 (H.264), основной. Работает в Safari, Chrome, Edge, Opera и на всех мобильных устройствах. Это база, которую понимает каждый браузер без исключений.

WebM (VP9), дополнительный. Файл заметно меньше при том же качестве. Chrome и Firefox берут WebM в первую очередь, экономят трафик пользователю. По данным Google Developers, VP9 даёт до 50% экономии битрейта против H.264 при одинаковой картинке.

Для мобильных, статичный JPG-постер. Если браузер отказался от автовоспроизведения (экономия трафика, медленная сеть), пользователь увидит картинку, а не пустое место.

Разрешение выше 720p для фона редко оправдано. Ширины 1280 пикселей хватает на весь экран ноутбука, а файл весит в разы меньше Full HD. Проверьте на своём макете, скорее всего, 720p закроет потребность с запасом.

Шаг 1: HandBrake, основной инструмент

HandBrake, бесплатный опенсорсный видеоконвертер под Windows, Mac и Linux. Даёт полный контроль над кодеком, битрейтом и разрешением. Без водяных знаков, без регистрации, без ограничений по размеру файла.

Алгоритм сжатия фонового видео:

• Скачайте HandBrake с официального сайта и откройте исходный видеофайл.
• На вкладке Summary выберите формат MP4 и поставьте галочку Web Optimized. Это переместит метаданные в начало файла, видео начнёт играть сразу, не дожидаясь полной загрузки.
• На вкладке Dimensions установите ширину 1280. Высота подстроится автоматически. Фильтр Anamorphic оставьте в значении Automatic.
• На вкладке Video выберите кодек H.264 (x264). Ползунок Constant Quality, в диапазоне 22-26 RF. Чем выше число, тем меньше файл. Оптимально: 24 RF.
• Удалите аудиодорожку. Фоновое видео по умолчанию идёт без звука, на вкладке Audio снимите галочку.
• Нажмите **Start **Encode. Файл на 30-50 МБ сжимается до 3-8 МБ. Качество остаётся приемлемым для фона.

Для WebM-версии повторите те же шаги, но на шаге 2 выберите формат WebM, а на шаге 4, кодек VP9.

На практике однократный прогон через HandBrake уменьшает фоновое видео в 5-10 раз. Посетитель не замечает разницы, а страница грузится на 2-3 секунды быстрее. Это первое, что мы делаем с любым видео перед загрузкой на сайт.

Шаг 2: Сжатие на Mac штатными средствами

Если вы на macOS, ставить ничего не нужно. Встроенный экспорт QuickTime закрывает базовое сжатие.

• Откройте видеофайл в QuickTime Player.
• Выберите Файл → Экспорт → 720p.
• Укажите имя и папку. Файл сохранится в MP4 с кодеком H.264.

Метод не даёт тонкой настройки битрейта, но для быстрого результата его достаточно. Исходник 60 МБ превращается в 8-12 МБ без дополнительных движений.

Более продвинутый штатный вариант, iMovie. Импортируйте видео, выберите Файл → Поделиться → Файл, укажите разрешение 720p и качество «Среднее». iMovie даёт чуть лучший контроль над итоговым размером, чем QuickTime. Для тонкой работы всё же лучше HandBrake, но когда нужно «здесь и сейчас», Mac-инструментов хватает.

Шаг 3: Сжатие через YouTube, быстрый трюк

Самый ленивый способ получить оптимизированное видео, прогнать его через YouTube.

• Загрузите видео на YouTube. Можно в режиме «Доступ по ссылке», ролик не попадёт в публичный поиск.
• Дождитесь окончания обработки. YouTube автоматически перекодирует видео во все современные форматы и разрешения.
• Скачайте оптимизированный MP4 обратно через конвертер, например, CloudConvert.

Результат: алгоритмы сжатия YouTube, одни из лучших в индустрии. Файл получается небольшим и визуально чистым. Метод выручает, когда HandBrake под рукой нет, а сжать нужно прямо сейчас.

Альтернативный подход, вообще не грузить видеофайл на свой хостинг. Вставьте YouTube-ролик как фон через плагин mb.YTPlayer (раздел ниже). Это экономит место на сервере и трафик, хотя даёт меньше контроля над воспроизведением.

Онлайн-инструменты: когда ставить софт не хочется

Если HandBrake ставить не хочется, а файл небольшой, браузерные компрессоры справляются.

CloudConvert, универсальный комбайн. Поддерживает больше 200 форматов, конвертирует MP4 в WebM одной кнопкой. Бесплатного лимита хватает на разовую оптимизацию. Минус, скорость зависит от очереди на сервере.

VideoSmaller, минималистичный сервис для одной задачи: сжать MP4. Интерфейс из двух кнопок: загрузить и скачать. Не требует регистрации. Не работает с WebM и MOV, только MP4.

Clipchamp, видеоредактор от Microsoft со встроенным экспортом. В бесплатной версии экспорт до 1080p без водяного знака на вашем контенте. Водяной знак появляется только при использовании стоковых ассетов Clipchamp. Для сжатия своего видео, рабочий вариант.

Обратите внимание: онлайн-сервисы загружают видео на сторонние серверы. Для приватных или конфиденциальных материалов используйте HandBrake локально.

Плагины WordPress для фонового видео

Если сайт на WordPress, встраивать фоновое видео проще через плагины. Редактировать тему или писать CSS не придётся.

mb.YTPlayer, встраивает YouTube-видео как фон страницы или секции. Плюс в том, что само видео хранится на серверах YouTube и не грузит ваш хостинг. Плагин добавляет шорткод, вставляете в нужное место, и видео играет фоном. На мобильных устройствах видео запускается по первому касанию экрана. У плагина 1 000+ активных установок и рейтинг 4,1 на WordPress.org.

🔗 mb.YTPlayer на WordPress.org

Video Background, решение для собственных видеофайлов. Указываете контейнер, ссылку на MP4 и ссылку на WebM. Плагин сам определяет браузер и подставляет нужный формат. Совместим с WPBakery и SiteOrigin. Минимум настроек.

🔗 Video Background на WordPress.org

Easy Video Background WP на CodeCanyon, платный вариант с расширенными возможностями: таймер автовоспроизведения, настраиваемый оверлей, контроль громкости. Оплата единоразовая.

Если видео уже на YouTube, берите mb.YTPlayer. Если у вас свои MP4 и WebM на хостинге, Video Background. Нужны тонкие настройки отображения, Easy Video Background WP.

Наглядная демонстрация процесса сжатия, от выбора формата до финального экспорта:

⁉️🤔 Частые вопросы

Фоновое видео обязательно должно быть без звука?

Да. Автовоспроизведение со звуком раздражает и запрещено политиками большинства браузеров. Chrome и Safari блокируют автовоспроизведение видео со звуком с 2018 года. Удалите аудиодорожку при экспорте, и файл станет заметно легче.

Сколько должно весить фоновое видео?

Хороший ориентир, до 5 МБ для 10-15 секунд фона в 720p. Всё, что тяжелее 8 МБ, уже заметно тормозит загрузку на мобильной сети. HandBrake с настройкой RF 24 на 720p обычно укладывается в этот диапазон.

MP4 или WebM, что лучше для фона?

Оба. MP4, для Safari и iOS (они не понимают WebM). WebM, для Chrome и Firefox (файл меньше при том же качестве). Правильная вёрстка с тегом video сама выберет подходящий формат. Готовьте оба файла всегда.

Можно ли использовать YouTube-видео как фон напрямую?

Технически да, через YouTube IFrame API или плагин mb.YTPlayer. Но есть минусы: элементы управления YouTube видны при наведении, реклама может перебить фон, предзагрузка идёт медленнее, чем у собственных файлов. Для фона без компромиссов лучше грузить свои MP4 и WebM.

Что показывать на мобильных, если видео не загружается?

Статичный JPG-постер, первый кадр видео или специально подготовленное изображение. Прописывается атрибутом poster в теге video. Большинство WordPress-плагинов добавляют постер автоматически из первого кадра.

Стоит ли заморачиваться с оптимизацией?

Разница между сырым 40-мегабайтным MOV и сжатым 4-мегабайтным MP4, это 2-3 секунды загрузки страницы. Для посетителя на мобильной сети эти секунды решают, останется он или уйдёт.

Бесплатный HandBrake, штатный экспорт Mac или пять минут в CloudConvert, усилия минимальные, результат немедленный. Страница летает, Google доволен, посетитель видит видео, а не прелоадер.

Если вы на WordPress, поставьте mb.YTPlayer или Video Background и забудьте про ручную вёрстку. Если файлы свои, всегда готовьте MP4 + WebM и держите итоговый размер ниже 5 МБ. Это база, которая работает на любом сайте, от лендинга до интернет-магазина.