Lottie vs MP4 vs WebM: який формат вибрати для веб-анімації

Іван Масалітін · Курс Maslo Motion · MTN DSGN · 12 травня 2026 р. · 8 хв читання

TL;DR: Для іконок, ілюстрацій, простих анімацій — Lottie (10-50 КБ, scalable, інтерактивний). Для відео з людьми, реальними кадрами — MP4 H.264 (універсальна сумісність). Для прозорого фону на сайті без важкого MP4 — WebM з alpha-каналом. Поєднання двох форматів через <picture>-подібний fallback — стандарт 2026 року.

Абстрактне порівняння форматів веб-анімації Lottie, MP4 та WebM для оптимізації сайту. — Візуалізація відмінностей між векторною анімацією, стандартним відео та форматом з прозорістю.

Швидке порівняння

Критерій	Lottie	MP4	WebM
Розмір (типова іконка)	10-30 КБ	200-800 КБ	100-400 КБ
Прозорий фон	✅ нативно	❌ неможливо	✅ alpha
Інтерактивність	✅ JS API	⚠️ play/pause	⚠️ play/pause
Scalability	✅ векторно	❌ pixels	❌ pixels
Реальні кадри (фото/відео)	❌	✅	✅
Safari підтримка	✅ JS	✅	⚠️ з 14.1+ (2021)

Lottie — що це і коли використовувати

Lottie — це JSON-файл, який описує векторну анімацію (як SVG, але з кейфреймами). Експортується з After Effects через плагін Bodymovin (безкоштовно). Браузер рендерить його через JS-бібліотеку lottie-web.

Використовуй для:

Іконок (loading, success-checkmark, hover-ефекти).
Ілюстрацій на лендінгах (персонажі, абстракції).
Onboarding-екранів у мобільних додатках.
Hero-анімацій до 5-10 секунд.

Не використовуй для:

Відео з людьми, продуктовими кадрами.
Анімацій з 3D-рендерами (Lottie не підтримує).
Складних glow/blur ефектів — їх Bodymovin експортує як растр і файл роздувається до 500+ КБ.

MP4 H.264 — стандарт de-facto

MP4 з кодеком H.264 розуміє будь-який браузер, будь-яка ОС, будь-який месенджер. Це універсальна валюта відео.

Використовуй для: hero-відео, product demo, відгуки клієнтів, все що містить реальні кадри.

Налаштування експорту з After Effects (через Adobe Media Encoder):

Format: H.264
Bitrate: Target 5 Mbps, Maximum 8 Mbps (для 1080p)
Profile: High, Level: 4.1
Audio: AAC 128 kbps

WebM — альтернатива MP4 з alpha-каналом

WebM (кодек VP9 або AV1) — формат від Google. Головна суперсила: підтримка прозорого фону. Це вирішує одну з найбільших болів моушн-дизайнерів — як накласти анімацію на сайт без чорного або білого квадрата навколо.

Експорт з After Effects:

Render Queue → Output Module → Format: WebM (потрібен плагін AdobeWebM — безкоштовний).
Channels: RGB + Alpha
Codec: VP9 (краща сумісність) або AV1 (менший розмір, гірша сумісність).

Підтримка браузерами 2026: Chrome, Firefox, Edge — повна. Safari 14.1+ (з 2021) — повна. Старі версії Safari — fallback на PNG-послідовність або Lottie.

Як комбінувати формати: production-pattern

Жоден формат не покриває 100% кейсів. Найкращий підхід 2026 року — fallback chain:

<!-- 1. Lottie (10 КБ) для сучасних браузерів -->
<lottie-player src="/anim/hero.json" autoplay loop>
  <!-- 2. WebM (200 КБ) fallback з alpha -->
  <video autoplay loop muted playsinline>
    <source src="/anim/hero.webm" type="video/webm">
    <!-- 3. MP4 (400 КБ) для дуже старих -->
    <source src="/anim/hero.mp4" type="video/mp4">
    <!-- 4. PNG fallback для тих хто без JS -->
    <img src="/anim/hero-poster.png" alt="">
  </video>
</lottie-player>

Як зменшити розмір кожного формату

Lottie (з 200 КБ → 30 КБ)

Уникай растрових ефектів (Glow, Drop Shadow з якістю High).
Не використовуй Trim Paths на складних шляхах — пиши shape-ами.
Прогон через LottieFiles Optimizer.

MP4 (з 5 МБ → 800 КБ)

Прогон через HandBrake з пресетом «Web Optimized».
Знизь FPS до 24 (з 30 чи 60).
Якщо звуку немає — видали аудіодоріжку (–10% розміру).

WebM (з 1 МБ → 300 КБ)

Використовуй CRF 32-36 замість конкретного bitrate.
Перейди на AV1 якщо аудиторія сучасна.

Хочеш навчитися моушн-дизайну з нуля?

У Maslo Motion вчимо After Effects + Blender 3D від першої анімації до повноцінного портфоліо. Український онлайн-курс з персональним фідбеком від практикуючого моушн-дизайнера.

Дивитись програму курсу →

Також читайте: Топ-10 плагінів After Effects, Оптимізація рендеру в After Effects.

FAQ

Чому Lottie не працює в моєму Webflow/Tilda?

Webflow має нативну підтримку Lottie (drop-element). У Tilda — потрібен embed-блок з підключенням lottie-web через CDN. Перевір, чи JSON-файл доступний по URL (CORS).

Чи можна Lottie на iOS Safari?

Так, Lottie працює через JavaScript і не залежить від відео-кодеків Safari. Працює на всіх версіях iOS 12+.

WebM з alpha не грає в Safari — що робити?

Safari підтримує WebM з alpha з версії 14.1 (квітень 2021). Якщо аудиторія старіша — використовуй HEVC MP4 з alpha (Apple Animation codec) як fallback. Експорт через AE → QuickTime → ProRes 4444 → перекодування у HEVC через ffmpeg.

Чи впливають ці формати на SEO/Core Web Vitals?

Так. MP4 на 5 МБ у hero — мінус 30 балів до LCP. Lottie 30 КБ — нейтральний. Завжди ставимо preload="none" або lazy-loading для важких відео.