Как сжать видео для веба

Зачем сжимать видео для веба?

Видео прямо с камеры, телефона или программы записи экрана рассчитано на монтаж, а не на веб. Один ролик легко весит десятки, а то и сотни мегабайт — намного больше, чем стоит отдавать со страницы. И все эти байты должны догрузиться до посетителя, прежде чем видео вообще начнёт играть; на мобильном интернете это и медленно, и дорого.

Тяжёлое видео — одна из главных гирь на ногах у Core Web Vitals. Крупный файл на первом экране отодвигает Largest Contentful Paint, а плеер, меняющий размер по мере загрузки, портит Cumulative Layout Shift; оба показателя Google снимает с реальных посетителей, и оба влияют на ранжирование. Сжатый файл, заданные размеры и отложенная загрузка того, что вне экрана, держат эти метрики в зелёной зоне.

По сути сжатие — это перекодирование видео современным кодеком с разумным качеством и разрешением под экран. Если сделать это аккуратно, файл уменьшается на 70–95%, а на том размере, в каком видео реально показывается на странице, разницу почти не видно — и это разница между роликом, который появляется мгновенно, и тем, что крутит спиннер.

Выберите правильный кодек

Кодек — это алгоритм, который упаковывает пиксели, и он важнее любой другой настройки. Все три современных веб-кодека дают куда меньший файл, чем исходная запись, разменивая совместимость на эффективность. А контейнер — MP4 или WebM — это лишь обёртка вокруг кодека.

Безопасный выбор по умолчанию — H.264 в MP4: он играет в любом браузере, телефоне и Smart TV за последние лет пятнадцать. Для современного сайта можно отдавать более лёгкий VP9 или AV1, а H.264 MP4 указывать запасным источником — тогда браузеры, которые умеют новый кодек, возьмут маленький файл, а остальные всё равно всё воспроизведут.

H.264 (MP4)

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

VP9 (WebM)

Открытый кодек Google, примерно на 30–50% легче H.264 при том же качестве. Играет в Chrome, Firefox, Edge и на Android; для старых Safari добавьте запасной MP4.

AV1 (MP4 или WebM)

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

Битрейт, разрешение и частота кадров

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

Битрейт — это сколько бит в секунду может потратить кодек; при кодировании по качеству его подбирают за вас. Не угадывайте число вручную — задайте нужное качество и дайте кодировщику раскидать биты туда, где они нужны картинке: в сложных сценах детали сохранятся, а простые не раздуются. Для фонов качество можно опустить на ступень, а для важных чётких кадров — поднять.

Частота кадров — последнее, на чём можно сэкономить. Большинство веб-видео идеально плавное на 30 к/с, кино — на 24 к/с, а если ужать запись с 60 к/с вдвое, данных о движении станет примерно вдвое меньше. Отказ от звуковой дорожки — для автозапускающихся фонов он обязателен, они должны быть беззвучными — экономит ещё больше. Пресеты TinyVid собирают эти решения за вас: Обычный плеер — сбалансированное качество, Макс. сжатие — минимальный файл, Фоновое видео — беззвучный зацикленный ролик.

Встройте сжатое видео

Сжатый файл окупается, только если его грамотно встроить. Положите его в простой тег video с явными width и height, чтобы браузер заранее занял место и страница не прыгала при загрузке, и добавьте картинку poster — чтобы до первого кадра на экране уже что-то было.

Поставьте preload в metadata, чтобы браузер подтянул размеры, но не весь ролик, пока кто-то не нажмёт play, и укажите несколько source — сначала лёгкий WebM или AV1, последним H.264 MP4 — чтобы каждый браузер скачал лучший из тех, что умеет декодировать. Для декоративного фона выключите звук и добавьте autoplay, loop и playsinline: автозапуск со звуком браузеры блокируют.

Полную разметку каждого паттерна — обычного плеера, беззвучного фонового цикла и клипа с ленивой загрузкой — смотрите в гайде по встраиванию видео в HTML.