MP4 или WebM: какой формат видео лучше для сайта

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

Начать придётся с путаницы, которая живёт даже в технических статьях: MP4 и WebM - это не способы сжатия. Это контейнеры. А вес, качество и совместимость определяет то, что лежит внутри.

Дальше - что умеют браузеры на август 2026 года, когда WebM реально выигрывает, что делать с HEVC и AV1 и почему для большинства сайтов один файл закрывает вопрос.

Контейнер - это коробка, кодек - содержимое

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

Кодек - это способ, которым сжата сама картинка: H.264 (он же AVC), H.265 (он же HEVC), VP9, AV1. От кодека зависит вес файла и то, покажет ли его конкретный браузер. Расширение на файле про это не говорит ничего.

Отсюда типичная сцена: подрядчика просят «прислать в MP4», он присылает MP4 с AV1 внутри, и видео не открывается у половины посетителей. Проверить содержимое можно командой ffprobe file.mp4 - в выводе будет строка вида Video: h264 или Video: av1.

MP4 - обычно H.264 или HEVC, звук AAC
WebM - только VP8, VP9 или AV1, звук Opus или Vorbis
MOV - контейнер Apple, чаще всего с H.264 или HEVC внутри, для веба его не используют
MKV - универсальный контейнер для домашней коллекции, браузеры его не проигрывают

Что браузеры умеют на сегодня

MP4 с H.264 и AAC внутри - единственная связка, которая играет практически везде: Chrome, Safari, Firefox, Edge, актуальные Android и iOS, встроенные браузеры внутри Telegram и VK, телевизоры, старые планшеты. Если у ролика будет ровно один файл, это должен быть он.

WebM с VP9 давно работает в Chrome, Firefox и Edge. Safari подключился к этой истории позже остальных, и на старых версиях macOS и iOS поддержки нет. Это не придирка перфекциониста: доля Safari на российских сайтах заметная, и делать WebM единственным источником нельзя.

AV1 сжимает лучше всех и поддерживается в Chrome, Firefox и Edge. В Safari он упирается в железо: аппаратный декодер есть только на свежих чипах Apple, на iPhone постарше ролик просто не запустится.

С HEVC в вебе всё запутанно: Safari его играет, остальные - в зависимости от операционной системы и установленных в ней компонентов. Для открытого сайта это не выбор, каким бы соблазнительным ни выглядел вес файла.

Когда WebM действительно выигрывает

Есть три ситуации, где второй формат окупает возню. Все три довольно узкие.

Нужна прозрачность. VP9 в WebM умеет альфа-канал, H.264 в MP4 - нет. Если по странице должен «плыть» объект без фона, альтернатив почти не остаётся, а для Safari придётся отдельно готовить HEVC с альфой.
Тяжёлый фоновый ролик и большой трафик. VP9 при сопоставимой картинке даёт заметно более лёгкий файл, и на сотнях тысяч просмотров это превращается в живые деньги за трафик.
Длинные видео, которые смотрят целиком. Экономия на весе накапливается на каждой минуте, а не только на первых секундах.

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

Когда возиться не стоит

Второй формат - это не галочка в окне экспорта. Это второй файл на каждый ролик: его надо сделать, положить, не забыть обновить при правках и проверить, что оба играют. Через полгода у вас каталог, где половина WebM-версий отстала от MP4 на две редакции, и никто этого не замечает.

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

Плюс само кодирование. AV1 жмёт медленно: там, где H.264 справляется за минуту, AV1 может считать десятки минут на том же материале. Для одного ролика терпимо, для регулярной публикации - уже нет.

Как отдать два формата, если всё-таки решились

Внутри тега video перечисляется несколько источников. Браузер идёт по списку сверху вниз и берёт первый, который умеет проигрывать: не лучший, а именно первый. Поэтому WebM ставят выше MP4, иначе Chrome возьмёт MP4 и лёгкий файл никто не увидит.

У каждого источника указывайте тип с перечислением кодеков, например video/webm; codecs=vp9 и video/mp4; codecs=avc1.42E01E. Так браузер отсеет неподходящий вариант, не начиная загрузку файла.

И проверьте результат на живом Safari, а не только в режиме эмуляции в десктопном Chrome. Это тот случай, когда «должно работать по документации» и «работает» расходятся чаще всего.

HEVC с айфона: самая частая причина «видео не открывается»

iPhone по умолчанию снимает в режиме «Высокая эффективность»: получается файл .MOV с HEVC внутри. Он прекрасно смотрится на самом телефоне и на Mac и отказывается играть у части посетителей сайта. Каждый второй разбор «почему видео не показывается» заканчивается именно на этом.

Лечится двумя способами. Быстрый: в настройках камеры переключить формат на «Наиболее совместимый», тогда телефон снимает сразу в H.264. Правильный: перекодировать перед публикацией - ffmpeg -i IMG_0001.MOV -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart out.mp4.

Заодно закрывается вопрос и про сам MOV. Залить его на сайт технически можно, некоторые браузеры даже покажут, но полагаться на это нельзя. MOV - формат монтажа, не публикации.

Что влияет на впечатление сильнее, чем выбор формата

На практике посетитель почти никогда не жалуется на кодек. Он жалуется на то, что «видео тормозит», а причины обычно вот эти.

Вес файла. Ролик на 200 МБ не спасёт никакой кодек, его нужно сжимать.
faststart: служебный блок в начале файла. Без него браузер ждёт полной загрузки, и кажется, что видео сломано.
Постер и preload=metadata. Пока файл едет, человек должен видеть картинку, а не чёрный прямоугольник.
Автозапуск разрешён только без звука. Ролик со звуком браузер остановит независимо от формата.
Откуда файл раздаётся. Свой сервер без кэша, да ещё и в другом регионе, проигрывает по скорости чему угодно.

Правило простое: если видео на сайте ведёт себя плохо, проверьте сначала эти пять пунктов и только потом думайте про WebM.

Короткий вывод

Если убрать все оговорки, решение укладывается в четыре строки.

Один файл на ролик: MP4, кодек H.264 профиля High, звук AAC, пиксельный формат yuv420p, включённый faststart. Играет везде.
WebM добавляйте вторым источником только ради прозрачности или ради экономии на действительно большом трафике.
AV1 - дополнительный вариант для крупных проектов, но не единственный формат.
HEVC и MOV оставьте монтажу, на сайт они не идут.

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

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

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

MP4 с кодеком H.264 и звуком AAC. Это единственная связка, которая проигрывается во всех актуальных браузерах и на старых устройствах тоже. По весу она проигрывает VP9 и AV1, но выигрыш в совместимости важнее: видео увидят все.

WebM легче MP4 - почему не перейти на него полностью?

Потому что Safari подключился к WebM позже остальных и на старых версиях macOS и iOS его не открывает. Пока в вашей аналитике есть заметная доля Safari, единственным форматом WebM делать нельзя. Как второй источник рядом с MP4 - пожалуйста.

Почему видео с айфона не играет на сайте?

Скорее всего, это .MOV с кодеком HEVC внутри: режим «Высокая эффективность» включён в камере по умолчанию. На самом телефоне файл открывается прекрасно, у части посетителей - нет. Перекодируйте в MP4 с H.264 или переключите камеру в режим «Наиболее совместимый».

Нужны ли отдельные версии видео для мобильных?

Для большинства сайтов нет: один файл 720p или 1080p справляется. Отдельная лёгкая версия оправдана, если у вас фоновое видео на первом экране или каталог с десятками роликов на одной странице. В таком случае часто проще не уменьшать файл, а вообще не показывать видео на мобильных, заменив его постером.