Как сжать видео для сайта без потери качества: три рабочих пресета

Запрос «как сжать видео для сайта без потери качества» обычно возникает после того, как ролик с телефона весит 380 МБ, а страница с ним открывается восемь секунд. Хорошая новость: ужать такой файл в 20-30 раз реально, и на экране вы разницы не увидите. Плохая: универсальной кнопки «сжать правильно» не существует, настройки зависят от того, где ролик будет жить.

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

И отдельно про проверку. «Посмотрел, вроде норм» не работает: глаз адаптируется за пару секунд и перестаёт замечать артефакты. Сравнивать нужно кадры.

«Без потери качества» - честная формулировка

Строго говоря, сжатия без потерь для веба не существует. H.264, HEVC, VP9, AV1 - все они выбрасывают часть информации, потери есть всегда. Вопрос в другом: заметит ли их человек на том экране, где ролик реально показывают.

А показывают его в блоке шириной 600-900 пикселей на десктопе и 350-400 на телефоне. Кадр 4K туда физически не помещается, браузер всё равно ужмёт его при отрисовке. Половина веса файла уходит в пиксели, которых никто никогда не увидит.

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

Задача сжатия - убрать вес, не задев эти четыре пункта. Всё остальное можно отдавать смело.

Пресет 1: ролик на лендинг

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

разрешение: 1920x1080; если исходник хуже, оставьте как есть - растягивание только добавит вес
кодек: H.264, профиль High, пиксельный формат yuv420p
качество: CRF 23 (рабочий коридор - от 20 до 26; чем меньше число, тем лучше картинка и тяжелее файл)
частота кадров: 30; шестьдесят оставляйте только если в кадре быстрое движение
звук: AAC 128 kbps стерео, для чистой речи хватит и 96 kbps

ffmpeg -i in.mp4 -vf scale=1920:-2 -c:v libx264 -profile:v high -crf 23 -preset slow -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart out.mp4

Ориентир по весу: минута такого видео обычно укладывается в 8-20 МБ, разброс зависит от количества движения в кадре. Флаг -movflags +faststart обязателен: он переносит служебный блок в начало файла, и браузер запускает проигрывание, не дожидаясь загрузки целиком. Без него ролик «думает» несколько секунд, а вы вините в этом хостинг.

Пресет 2: витрина в каталоге

Десятки коротких роликов по 5-15 секунд в карточках товаров или объектов. Показываются в блоке 300-500 пикселей, часто автозапуском и почти всегда без звука. Здесь важен не максимум качества, а суммарный вес экрана: двадцать карточек по 3 МБ дают 60 МБ на одну прокрутку.

разрешение: 1280x720 для горизонтали, 720x1280 для вертикали; для мелких карточек хватает 540 по короткой стороне
качество: CRF 27, коридор 25-29
звук: убрать совсем флагом -an - это и минус вес, и гарантия, что автозапуск не заблокируют
частота кадров: 30 или 25
постер обязателен, иначе до загрузки карточка выглядит чёрным прямоугольником

ffmpeg -i in.mp4 -vf scale=-2:1280 -c:v libx264 -crf 27 -preset slow -pix_fmt yuv420p -an -movflags +faststart out.mp4. Десять секунд в таком пресете весят примерно 0,7-1,5 МБ. Если карточек много, не грузите их все сразу: подключайте видео по мере прокрутки, иначе экономия на битрейте уйдёт в никуда. Про саму встройку подробно написано в статье как добавить видео на сайт.

Пресет 3: фон первого экрана

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

длина: 8-15 секунд с зацикливанием, длиннее никто не досмотрит
разрешение: 1280x720 достаточно, если сверху есть затемняющий слой; 1920 берите только для резкой картинки без оверлея
качество: CRF 28-30, частота кадров 24-25
звук: -an, всегда
цель по весу: 2-3 МБ на весь ролик

Полезный приём: перед сжатием пригасить шум фильтром hqdn3d=2:1:2:3. Зерно с камеры кодек считает деталями и честно тратит на него битрейт, а после лёгкого шумоподавления тот же CRF даёт ощутимо более лёгкий файл при той же картинке.

И отдельное правило: на телефонах фоновое видео чаще всего лучше не показывать вовсе. Замените его постером через медиазапрос - мобильный трафик и батарея скажут спасибо.

Чем сжимать бесплатно

ffmpeg. Бесплатный, консольный, даёт полный контроль, все команды выше написаны под него. Ставится за пять минут, дальше работает копипастой.

HandBrake, если консоль пугает. Внутри тот же кодировщик x264, есть готовые наборы вроде «Web» и «Fast 1080p30», а ползунок качества - это тот же самый CRF. Результат сопоставимый, просто тонкой настройки меньше.

Экспорт из монтажной программы (Premiere, DaVinci, CapCut) тоже даёт нормальный H.264. Беда в том, что по умолчанию там выставлен битрейт мастер-копии: файл выходит в два-три раза тяжелее нужного. Правьте битрейт руками или прогоняйте готовый файл через ffmpeg вторым проходом.

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

Как проверить, что качество не просело

Смотреть готовый файл в плеере и говорить «вроде нормально» бесполезно. Через пару секунд глаз адаптируется к артефактам, а память о том, как выглядел оригинал, уже стёрлась. Сравнивать нужно статичные кадры, один и тот же момент из двух файлов.

Вытащите кадр из оригинала и из сжатой версии: ffmpeg -ss 00:00:12 -i original.mp4 -frames:v 1 orig.png, затем ffmpeg -ss 00:00:12 -i compressed.mp4 -frames:v 1 comp.png. Откройте обе картинки в масштабе 100% и переключайтесь между ними в просмотрщике - разница вылезает мгновенно.

кожа и глаза на крупном плане
градиенты: небо, стена, размытый задний план - там первыми появляются полосы
мелкий текст, логотипы, тонкие линии
кадр из самой динамичной сцены, именно там битрейта не хватает

Хотите цифру - посчитайте SSIM командой ffmpeg -i compressed.mp4 -i original.mp4 -lavfi ssim -f null -, усреднённое значение будет в конце вывода. Само по себе оно ни о чём не говорит, но им удобно сравнивать варианты между собой: прогнали CRF 23 и CRF 26, увидели, насколько просело, выбрали. Финальное решение всё равно за глазами, и желательно на телефоне, в том самом блоке, где ролик будет жить.

Что чаще всего раздувает файл на ровном месте

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

Пережимать уже сжатое. Ролик, скачанный из соцсети, кодек уже прошёл; второй проход накладывает артефакты на артефакты. Берите исходник с камеры или из монтажа.
Оставлять 60 кадров в секунду там, где хватает 30. Заметная прибавка к весу за плавность, которой в статичном кадре никто не увидит.
Забывать про faststart. Файл тот же, а ощущение такое, будто сайт умер.
Растягивать 720p до 1080p при экспорте. Деталей не прибавится, вес вырастет.
Забывать -pix_fmt yuv420p. Если исходник снят в 4:2:2 или 4:4:4, часть браузеров и устройств просто не покажет результат.

Когда дело уже не в сжатии

Бывает, что файлы сжаты грамотно, а видео всё равно стартует с задержкой и подтормаживает. Тогда проблема не в кодеке, а в раздаче: обычный веб-сервер отдаёт тяжёлые файлы медленно, кэша нет, до посетителя из другого региона байты едут долго, и одно качество летит всем подряд - и телефону в метро, и десктопу на оптике.

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

Если же нужен один ролик на лендинге, не усложняйте. Пресет номер один, файл на своём сервере, постер, faststart. Этого хватает подавляющему большинству сайтов, и никакая инфраструктура сверху не нужна.

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

Какой битрейт выбрать для видео на сайте?

Лучше вообще не задавать битрейт вручную, а работать в режиме постоянного качества CRF: кодек сам потратит больше на сложные сцены и меньше на статичные. Если битрейт нужен жёстко, для 1080p30 обычного контента ориентируйтесь на 3-5 Мбит/с, для 720p - на 1,5-2,5 Мбит/с. Динамичная съёмка требует верхней границы, говорящая голова - нижней.

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

Разумный ориентир - до 20 МБ на минуту для основного ролика и до 3 МБ для фонового зацикленного видео. Точной нормы нет, поэтому смотрите не на мегабайты, а на время до старта воспроизведения. Если на мобильном интернете ролик не начинается за пару секунд, файл тяжёлый.

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

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

Онлайн-сервисам сжатия можно доверять?

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