Видео в WebP

Сделать анимированный WebP из видео можно онлайн за минуту: откройте видео в WebP, выберите MP4, MOV или WebM, укажите начало и длительность отрезка (до 15 секунд), ширину и частоту кадров, нажмите «Сделать WebP». Обработка идёт в браузере, файл на сервер не отправляется. Результат — анимация в 3–5 раз легче гифки, с миллионами цветов, которую понимают все браузеры и мессенджеры.

Что такое анимированный WebP

WebP — формат изображений от Google, который умеет и статичные картинки, и анимацию. В отличие от GIF он хранит до 16 миллионов цветов, поддерживает полупрозрачность и сжимает кадры настоящим видеокодеком VP8 — записывает разницу между кадрами, а не каждый кадр целиком. Поэтому пятисекундная анимация в WebP весит в 3–5 раз меньше гифки того же размера и не покрывается зерном на градиентах. В отличие от MP4, WebP ведёт себя как картинка: вставляется тегом img, играет сам без плеера и кнопок, умеет прозрачность.

Где WebP откроется, а где нет

Откроется везде, где есть современный браузер: Chrome, Safari с версии 14, Firefox, Яндекс Браузер. Telegram и ВКонтакте показывают его как обычную картинку; большинство сайтов и CMS принимают загрузку. Не откроется в старых редакторах без плагина и в некоторых CMS с белым списком форматов — там по-прежнему нужен GIF. Если статичный WebP нужно превратить обратно в привычную картинку, есть WebP в JPG, а разбор форматов — в статье как конвертировать WebP в JPG.

Пошагово: WebP из MP4 в браузере

1. Откройте видео в WebP и нажмите «Выбрать видео» — ролик откроется в плеере, по нему удобно найти нужную секунду.
2. Задайте начало (с десятыми долями: 12.4) и длительность — 3–5 секунд для сайта и чата, до 15 максимум.
3. Выберите ширину: 480 пикселей — стандарт для ленты и превью, 320 — для стикеров, 720 — для демонстрации интерфейса с текстом. Частота 15 кадров подходит почти всему, для танца и спорта — 20–24.
4. Нажмите «Сделать WebP». Через 5–15 секунд появится результат и размер до и после; скачайте файл.

При первом запуске браузер подгружает ядро ffmpeg (~30 МБ), дальше оно кэшируется. Длинный ролик лучше сначала укоротить в обрезке видео, а видео из соцсети взять по ссылке через скачать видео по ссылке.

Режим «один кадр»: превью из видео

Галочка «только один кадр» превращает инструмент в генератор стоп-кадров: указываете секунду, ширину и качество — получаете картинку WebP, которая в 2–3 раза легче JPG того же качества. Это быстрый способ сделать обложку ролика, карточку статьи или кадр для мема без скриншота с чёрными полосами. Обложки для YouTube-роликов, кстати, скачиваются готовыми — скачать превью YouTube.

Настройки под задачу

Превью на сайт или в письмо — 480 пикселей, 15 кадров, качество 75, 3–5 секунд: обычно 300–800 КБ. Стикер, аватарка — 320 пикселей, 10–15 кадров, качество 60–75, 2–3 секунды: 50–200 КБ. Демонстрация интерфейса — 720 пикселей, 15–20 кадров, качество 85, чтобы читался текст. Быстрое движение — 20–24 кадра. Готовый файл тяжелее мегабайта — перезапустите с шириной 320 или качеством 60.

WebP, спрайт или Lottie: когда анимированный WebP проще

Для сложной векторной анимации (иконки, лоадеры, брендированные эффекты) разработчики иногда используют Lottie-JSON или спрайт из PNG-кадров — они дают полный контроль над таймингом и легче весят на простой графике. Но обе техники требуют либо векторного исходника, либо ручной сборки кадров, тогда как анимированный WebP собирается из готового видео за один проход и не требует правок кода на странице — вставляется тем же тегом img, что обычная картинка. Если анимация уже существует как видео (запись экрана, ролик с камеры, экспортированный эффект), WebP почти всегда быстрее в производстве, чем пересборка в Lottie.

Прозрачность: что нужно на входе, чтобы она сохранилась

WebP умеет прозрачный фон, но сохранить то, чего нет в исходнике, нельзя: обычное видео с камеры или скринкаст всегда имеет сплошной фон, и в WebP он останется таким же. Прозрачность появится, только если исходный файл уже содержит альфа-канал — например, экспорт из редактора с прозрачным фоном в формате MOV с кодеком ProRes 4444 или WebM VP9 с альфой. Если такого файла нет, но прозрачность нужна (наклейка, наложение на фото), проще всего снять объект на однотонном фоне и вырезать его в графическом редакторе отдельным шагом — конвертер сам фон не «угадывает» и не удаляет.

Настройки под скорость загрузки сайта

Если WebP ставится на сайт (обложка блога, анимированная иллюстрация, превью в карточке), вес напрямую влияет на скорость загрузки страницы. Рабочий ориентир — держаться в 150–400 КБ на анимацию в блоке контента: это ширина 480–560 пикселей, 12–15 кадров в секунду, качество 70–75, отрезок 3–4 секунды. Для фонового зацикленного видео на всю ширину экрана лучше не использовать анимацию вовсе — там честное видео с автопроигрыванием без звука через тег video весит меньше и не блокирует отрисовку страницы, WebP для таких больших фонов не подходит по весу.

Если браузер посетителя не поддерживает WebP

Все браузеры последних пяти лет анимированный WebP показывают без проблем, включая мобильный Safari начиная с iOS 14. Единственный практический риск — встроенные браузеры некоторых мессенджеров и киосковые системы с урезанным движком, которые могут показать анимацию как статичную картинку (первый кадр) вместо движущейся. Для критичных случаев (например, обложка товара, где анимация — часть продающего эффекта) можно продублировать анимацию в MP4 рядом и показать её как запасной вариант — но для обычного блога и карточек это избыточная предосторожность, WebP достаточно сам по себе.

Что обычно идёт не так

Файл тяжелее ожидаемого. Высокое качество на шумном видео с камеры. Снизьте до 60–75 или уменьшите ширину.

WebP не открывается в программе. Старый редактор. Сделайте GIF или оставьте MP4.

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

Начало не совпало с нужным моментом. Сверьте секунду в плеере на странице и укажите её с десятыми.

Видео с айфона в HEVC обрабатывается долго. Декодирование H.265 в браузере медленное; вырежьте нужные секунды заранее или сначала прогоните ролик через конвертер видео.

Отрезок до 15 секунд: почему именно такой лимит

Ограничение длительности связано не с качеством, а с тем, как устроен формат: анимированный WebP собирает все кадры в один файл целиком, и чем их больше, тем дольше идёт сборка в браузере и тем тяжелее становится итоговый файл, даже при небольшой ширине. Пятнадцать секунд на 15 кадрах в секунду — это уже больше двухсот кадров, предел, за которым WebP как формат превращается в неудобную замену видео, а не в лёгкую анимацию. Если нужен более длинный фрагмент, честный видеоформат вроде MP4 справится с ним эффективнее и без риска упереться в память браузера на слабом телефоне.

GIF, WebP или MP4 — что выбрать

MP4 — для сторис, лент и монтажа: легче всего, играет везде, но это видео с плеером. WebP — для сайтов, писем-рассылок нового поколения, стикеров и мест, где нужна прозрачность: ведёт себя как картинка и весит мало. GIF — только там, где другого не примут. Сжать уже готовую гифку поможет сжать GIF, вырезать кусок — обрезать GIF.

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

Чем анимированный WebP лучше GIF? Он хранит миллионы цветов вместо 256, поддерживает прозрачность и сжимает кадры видеокодеком, поэтому весит в 3–5 раз меньше гифки и не покрывается зерном.

Где откроется анимированный WebP? Во всех современных браузерах, в Telegram, ВКонтакте и на большинстве сайтов. Не откроется в старых редакторах без поддержки формата.

Почему отрезок ограничен 15 секундами? Анимированный WebP — формат для коротких вставок, а не для видео: длинная анимация занимает много памяти при сборке и медленно открывается у зрителя. Для длинных фрагментов оставляйте MP4.