Современная веб-разработка каждый год внедряет новые стандарты производительности.

Фреймворки соревнуются в оптимизации сетевых запросов, изображений и кода, чтобы сайты загружались молниеносно. Почти каждый фреймворк, headless CMS или CDN предлагает встроенные инструменты для оптимизации изображений. А вот с видео все сложнее…

Но не стоит отчаиваться! Современные видеокодеки позволяют добиться отличного качества при небольшом размере файла. Использование видео для анимации с правильной оптимизацией — это всегда лучше, чем GIF, а иногда даже превосходит нативные реализации. В этом подразделе мы разберемся с такими кодеками, как VP9 и H265, и научимся оптимизировать видео с помощью ffmpeg.

Эта тема может показаться сложной, поэтому давайте разложим все по полочкам. Представьте себе видеоформат как контейнер, который определяет структуру файла для хранения видео- и аудиопотоков. Видео- и аудиопотоки внутри — это мультимедийные данные, закодированные с помощью кодека.

Проще говоря: формат — это коробка, а кодек — то, как мы упаковываем вещи в эту коробку.

Примеры форматов: mp4, WebM, MKV.

Примеры кодеков: H264, H265, VP8/9.

Пример: видео на сайте нового Macbook Air от Apple использует формат mp4, закодированный с помощью H264. H264 очень популярен, но намного менее оптимизирован, чем VP9 или H265.

WebM и VP9: открытый стандарт для веба

WebM — это открытый и бесплатный медиаконтейнер, созданный специально для веба. Он может содержать видеопотоки, сжатые с помощью VP8 или VP9, и аудиопотоки, сжатые с помощью Vorbis или Opus

WebM позволяет сэкономить до 20-50% размера по сравнению с H264, сохраняя при этом хорошее качество. Его поддерживают все современные браузеры на десктопах и мобильных устройствах, кроме Safari на iOS (Apple, ну когда уже?). Safari на десктопах (macOS Big Sur и выше) поддерживает WebM, но на мобильных устройствах — пока нет.

Не беда, для пользователей iOS существует солидная альтернатива.

MP4 и H265: альтернатива для iOS

H265 (он же HEVC — High-Efficiency Video Coding) — любимчик Apple, который на 20-50% эффективнее своего предшественника H264. Но есть нюанс: этот кодек не бесплатный, поэтому он не так широко распространен, как WebM.

Для оптимизации видео есть два популярных инструмента: Handbrake и ffmpeg

Handbrake — простой в использовании, с графическим интерфейсом.

ffmpeg — инструмент командной строки, который дает больше гибкости. Он пригодится, если вам нужно рендерить видео с альфа-каналом (прозрачностью) или использовать аппаратное ускорение (чтобы сжатие работало гораздо быстрее). Плюс, командами ffmpeg проще делиться с командой, чем объяснять, куда нажимать в Handbrake.

Установка ffmpeg

Если вы пользователь macOS, установите его с помощью brew.

Для всех остальных можно следовать инструкциям на официальном сайте.

Основы использования ffmpeg

ffmpeg — это инструмент командной строки, и у него есть множество опций, с которыми полезно ознакомиться. Можно использовать ffmpeg как начинающий, просто запустив следующую команду:

Результатом будет WebM, закодированный с использованием VP9, с довольно приличным сжатием по умолчанию. Если вы хотите освоить этот инструмент, вам нужно будет научиться использовать флаги.

Чтобы было понятнее, мы покажем, как разные опции ffmpeg влияют на размер файла и качество видео. Все тесты проведены на одной из анимаций из нашего недавнего проекта.

Исходный размер видео составляет ~26 МБ с разрешением 5000×2700 пикселей. Но даже после базового сжатия размер уменьшается до 1 МБ. Неплохо, но мы можем еще лучше!

Продвинутая настройка

Помимо уже упомянутых аргументов, кодеки VP9 и H265 в ffmpeg поддерживают флаг -crf. Этот флаг включает режим постоянного качества, который позволяет задать определенный уровень качества на протяжении всего видео. Значение флага — число от 0 до 63 (для VP9) и от 0 до 51 (для H265), где 0 — самое высокое качество, а максимальное число — самое низкое.

Значения от 18 до 40 могут обеспечить очень достойный уровень качества. Если вы не указываете этот параметр, ffmpeg использует значение -crf 32 для VP9 по умолчанию.

Это приводит к размеру 314 КБ.

Хотите узнать больше об оптимизации видео с помощью ffmpeg?

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