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

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

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

Сколько должно весить видео для сайта

Точного стандарта нет, но ориентиры такие:

Видео	Разрешение	Ориентир по весу
Фон первого экрана, 10–20 секунд, без звука	720p, реже 1080p	2–5 МБ
Короткий ролик с речью, 30–60 секунд	720p	5–15 МБ
Обзор или инструкция, 2–5 минут	720p или 1080p	Лучше видеохостинг или сервис, а не свой файл

Вес зависит от битрейта — сколько данных приходится на секунду видео. Посчитать просто: вес в мегабайтах ≈ битрейт в мегабитах в секунду × длительность в секундах / 8. Ролик на 30 секунд с битрейтом 2 Мбит/с весит около 7,5 МБ. Для 720p с обычной съёмкой без резких движений хватает 1,5–2,5 Мбит/с, для фона без мелких деталей можно и меньше.

Для сравнения: телефон снимает 1080p с битрейтом в несколько раз выше, поэтому минута видео с него весит десятки мегабайт, а 4K — сотни.

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

Формат (контейнер) — это обёртка файла: MP4, WebM, MOV. Кодек — способ сжатия картинки внутри: H.264, H.265, VP9, AV1. Браузер должен уметь и то и другое.

Вариант	Где работает	Когда брать
MP4 + H.264, звук AAC	Во всех браузерах и на всех устройствах	Основной вариант, всегда должен быть
WebM + VP9	В современных браузерах	Дополнительный источник: при том же качестве файл обычно меньше
MP4 или WebM + AV1	В свежих браузерах, аппаратно не на всех устройствах	Если важен каждый мегабайт, и только вместе с запасным H.264
MP4 или MOV + H.265 (HEVC)	Не во всех браузерах	Для сайта не подходит без запасного варианта

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

Если указать несколько источников, браузер возьмёт первый, который умеет воспроизводить:

<video controls preload="metadata" poster="/video/promo.jpg">
  <source src="/video/promo.webm" type="video/webm">
  <source src="/video/promo.mp4" type="video/mp4">
</video>

Разрешение: 720p почти всегда достаточно

Видео на сайте редко показывают на весь экран. Ролик в блоке шириной 600–800 пикселей или карточка в углу страницы не нуждаются в 1080p, а 4K для сайта бессмысленно: файл тяжелее в разы, разница не видна. Разумный выбор — 720 пикселей по меньшей стороне, а для фона на весь экран — 1080p с низким битрейтом.

Частота 30 кадров в секунду подходит для любой съёмки с речью. 60 кадров увеличивает вес и нужна разве что для быстрого движения.

Как сжать видео в HandBrake

HandBrake — бесплатная программа для Windows, macOS и Linux. Порядок действий:

1. Откройте ролик и выберите пресет из группы General, например «Fast 720p30».
2. На вкладке Summary выберите формат MP4 и включите оптимизацию для веба (Web Optimized): служебные данные файла переместятся в начало, и видео начнёт играть до полной загрузки.
3. На вкладке Video оставьте кодек H.264 (x264) и режим постоянного качества. Чем больше число RF, тем меньше файл и ниже качество: для сайта обычно подходят значения 22–28.
4. Для фонового видео удалите звуковую дорожку на вкладке Audio.
5. Сохраните файл и посмотрите результат на телефоне и на компьютере. Если появились «квадратики» на однотонном фоне, уменьшите RF на 2.

Как сжать видео в ffmpeg

ffmpeg — бесплатная программа для командной строки. Она удобна, когда роликов много или нужна точная настройка.

Ролик с речью в 720p, H.264, быстрый старт воспроизведения:

ffmpeg -i input.mov -vf "scale=-2:720" -c:v libx264 -crf 24 -preset slow \
  -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart promo.mp4

Фоновое видео без звука:

ffmpeg -i input.mov -vf "scale=-2:720" -c:v libx264 -crf 28 -preset slow \
  -pix_fmt yuv420p -an -movflags +faststart hero.mp4

Дополнительный источник WebM (VP9):

ffmpeg -i input.mov -vf "scale=-2:720" -c:v libvpx-vp9 -crf 34 -b:v 0 -an hero.webm

Картинка-заставка из первой секунды:

ffmpeg -i promo.mp4 -ss 00:00:01 -frames:v 1 -q:v 3 promo.jpg

Что важно в этих командах:

• -crf — качество. У H.264 шкала от 0 до 51, по умолчанию 23; каждые +6 примерно вдвое уменьшают файл. Около 18 разница с исходником почти не видна, выше 30 появляются заметные артефакты.
• -preset slow — сжимать дольше, но эффективнее. На готовом файле это экономит вес без потери качества.
• scale=-2:720 — высота 720 пикселей, ширина по пропорциям. Для вертикального видео пишите scale=720:-2.
• -pix_fmt yuv420p — цветовой формат, который открывают все браузеры. Без него ролик с HDR-телефона может не воспроизвестись.
• -movflags +faststart — служебные данные в начало файла, воспроизведение начинается раньше.
• -an — без звуковой дорожки.

Как вставить видео, чтобы оно не тормозило страницу

Даже лёгкий файл может замедлить сайт, если загружать его невовремя.

• Атрибут preload. none — ничего не загружать до нажатия, metadata — только длительность и размер. Для видео ниже первого экрана это обязательный минимум.
• Заставка poster. Пока видео не загрузилось, посетитель видит картинку, а не пустой блок. Сожмите и её: заставка первого экрана может оказаться самым крупным элементом, по которому поисковики считают скорость загрузки (LCP).
• Загрузка при прокрутке. У <video> нет атрибута loading="lazy", поэтому адрес ролика подставляют скриптом, когда блок показался на экране. Пример кода — в статье автозапуск видео на сайте.
• Размеры блока заранее. Задайте ширину и высоту или CSS-свойство aspect-ratio, чтобы страница не «прыгала», когда видео загрузится.
• Отдельная версия для телефона или картинка вместо фона. Фоновое видео на маленьком экране часто обрезается и не стоит потраченного трафика.
• Сервер. Хостинг должен поддерживать частичную загрузку (ответ 206), иначе перемотка не работает, а Safari может не воспроизвести ролик. Если видео смотрят много людей, отдавайте его через CDN или облачное хранилище, а не с того же сервера, где работает сайт.

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

Типичные ошибки

• Сжимать уже сжатое. Каждое перекодирование теряет качество. Берите исходник с телефона или из монтажной программы, а не скачанную из мессенджера копию.
• Поднимать разрешение. Ролик 480p не станет чётче, если сохранить его в 1080p: файл вырастет, картинка нет.
• Оставлять тишину. Пустая звуковая дорожка в фоновом видео — лишний вес. Удалите её.
• Проверять только на своём компьютере. Откройте страницу на телефоне через мобильный интернет и посмотрите, сколько секунд проходит до начала видео.
• Сжимать до неузнаваемости. Лица и текст в кадре страдают первыми. Если ролик с речью выглядит «мыльным», лучше сократить его по времени, чем снижать качество.

Если сжимать не хочется

Короткий ролик с речью — приветствие, визитку, отзыв клиента, обзор товара — можно не готовить вручную, а показать видеовиджетом Видвиджет в углу страницы. Сервис берёт подготовку на себя:

• принимает файлы MP4, MOV, AVI, WMV, MKV и WEBM до 300 МБ и до 30 минут, в том числе MOV прямо с iPhone;
• сам перекодирует ролик в MP4 с H.264 и звуком AAC, приводит к высоте 720 пикселей и переносит служебные данные в начало файла для быстрого старта;
• убирает из файла метаданные съёмки: геометки, модель телефона;
• раздаёт видео из своего облачного хранилища, а не с вашего хостинга;
• начинает загружать ролик, когда страница уже готова, и не загружает его на телефонах, если показ на мобильных выключен в настройках.

Снять ролик можно на обычный телефон: как снять видео для сайта на телефон. Код виджета вставляется одной строкой на любой сайт.

Частые вопросы

Какой формат видео лучше для сайта?

MP4 с кодеком H.264 и звуком AAC: его воспроизводят все браузеры и устройства. Дополнительно можно добавить источник WebM с кодеком VP9, он обычно легче при том же качестве. Формат MOV и кодек H.265 для сайта без запасного варианта не подходят.

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

Ориентир — 2–5 МБ для ролика на 10–20 секунд в 720p без звуковой дорожки. Чем легче фон, тем быстрее открывается первый экран, особенно на мобильном интернете.

Можно ли сжать видео без потери качества?

Совсем без потерь нет: любое перекодирование что-то теряет. Но при CRF около 18–23 в H.264 разница с исходником на экране сайта практически не видна, а файл становится в несколько раз меньше исходника с телефона.

Какое разрешение видео нужно для сайта?

Для ролика в блоке страницы или в углу экрана достаточно 720p и 30 кадров в секунду. 1080p имеет смысл для видео на весь экран, 4K для сайта не нужно.

Нужно ли сжимать видео перед загрузкой в Видвиджет?

Нет. Видвиджет принимает файлы MP4, MOV, AVI, WMV, MKV и WEBM до 300 МБ и длиной до 30 минут и сам перекодирует ролик в формат для быстрой загрузки в браузере.