Lottie vs GIF vs MP4/WebM: ktorý formát animácie je najlepší pre web?

Lottie vs GIF vs MP4/WebM: ktorý formát animácie zvoliť pre web

Keď na webe potrebujete pohyb, teda animovanú ikonu, krátku ukážku produktu alebo dynamický hero prvok, hneď na začiatku sa rozhoduje, v akom formáte animáciu nasadíte. Práve táto voľba určuje, či web spomalí, alebo mu pomôže. Porovnanie Lottie vs GIF vs MP4/WebM preto nie je hľadanie jedného víťaza pre celý web. Ide o to, ktorý z nich sedí na konkrétny typ pohybu a konkrétne miesto na stránke.

Vo väčšine prípadov ide o tri veľmi odlišné technológie: Lottie je vektorová animácia zapísaná v JSON súbore, GIF je rastrový obrázkový formát s viacerými snímkami a MP4/WebM sú video kontajnery. Každý z nich vznikol na iný účel, a preto sa aj líši vo veľkosti súboru, kvalite pri zväčšení, podpore priehľadnosti a v tom, ako ho zvládajú prehliadače. Tento článok prechádza tieto rozdiely prakticky, aby ste vedeli vybrať bez zbytočného experimentovania.

Ako funguje Lottie a kedy je najsilnejší

Lottie je knižnica, ktorá prehráva animácie exportované z Adobe After Effects do formátu JSON pomocou pluginu Bodymovin a vykresľuje ich natívne v prehliadači alebo aplikácii. Namiesto uložených pixelov teda súbor obsahuje popis tvarov, dráh a časovania, ktorý prehliadač v reálnom čase prekreslí. Oficiálne to potvrdzuje aj dokumentácia knižnice lottie-web od Airbnb, ktorá formát pôvodne priniesla.

Z tohto princípu vyplýva hlavná výhoda: keďže ide o vektor, animácia je ostrá pri akejkoľvek veľkosti a rozlíšení, od malej ikony po celoobrazovkový prvok, bez rozmazania a bez toho, aby ste museli exportovať viacero verzií. Pri jednoduchej grafike býva JSON zároveň výrazne menší než porovnateľný GIF, pretože neukladá každú snímku ako obrázok. Ďalšou prednosťou je, že animáciu sa dá ovládať kódom: spustiť ju pri scrollovaní, zastaviť, prehrať dozadu alebo reagovať na akciu používateľa.

Lottie má však aj hranice. Nie je vhodné na fotorealistický obsah ani na skutočné video, pretože zložité rastrové efekty sa do vektora prenášajú ťažko a vtedy súbor aj výkon strácajú výhodu. Zložité efekty z After Effects sa navyše nie vždy prenesú presne, takže animáciu treba pripraviť s ohľadom na to, čo Lottie dokáže spoľahlivo vykresliť.

Ako funguje GIF a prečo býva najväčší

GIF je starý rastrový formát, ktorý ukladá animáciu ako sériu snímok. Jeho najväčším obmedzením je farebná hĺbka: podľa dokumentácie MDN k obrázkovým formátom dokáže jedna GIF paleta obsahovať maximálne 256 farieb. Pri fotografii alebo jemných prechodoch to znamená viditeľné pruhy a „špinavé“ farby, ktoré sa dajú len čiastočne zamaskovať ditheringom.

Druhým problémom je veľkosť. Keďže GIF ukladá obrazové dáta pre snímky a nemá k dispozícii moderné video kompresné metódy, animovaný GIF býva pri rovnakom obsahu podstatne väčší než zodpovedajúce video vo formáte MP4 alebo WebM. Práve preto MDN pri animáciách odporúča namiesto GIF siahnuť po modernejších formátoch. Krátka slučka pár desiatok kilobajtov ešte nič nepokazí, no niekoľkosekundový „video“ GIF sa ľahko vyšplhá na megabajty a stane sa jednou z najťažších vecí na stránke.

GIF podporuje priehľadnosť, ale len binárne: pixel je buď úplne priehľadný, alebo úplne nepriehľadný. Nemá teda plynulú polopriehľadnosť, takže mäkké okraje na farebnom pozadí pôsobia zúbkovane. GIF má aj tak stále jednu výhodu, a to univerzálnu podporu a to, že sa na mnohých platformách (napríklad v niektorých e-mailoch alebo chatoch) prehrá bez akéhokoľvek prehrávača. To je dôvod, prečo úplne nezmizol, nie to, že by bol technicky najlepší.

Ako fungujú MP4 a WebM a v čom sa líšia

MP4 a WebM nie sú formáty animácie v pravom zmysle, ale video kontajnery, ktoré vo vnútri používajú kodeky na kompresiu. MP4 najčastejšie obsahuje kodek H.264, WebM zvyčajne VP9 alebo AV1. Pre reálny záznam, obrazovkové nahrávky alebo scény s množstvom farieb a jemných prechodov je video jednoznačne najefektívnejšie: pri rovnakej dĺžke a kvalite je výrazne menšie než GIF.

Kľúčový rozdiel medzi nimi je podpora prehliadačov. Podľa prehľadu video kodekov na MDN má MP4 s kodekom H.264 najuniverzálnejšiu podporu naprieč všetkými prehliadačmi vrátane Safari a iOS. WebM s VP9 alebo AV1 ponúka lepšiu kompresiu, no jeho podpora bola na zariadeniach Apple dlho nekonzistentná a závisela od verzie a hardvéru. Bezpečné riešenie preto je ponúknuť obidva formáty naraz a nechať prehliadač vybrať:

Video sa navyše dá prehrávať automaticky ako tichá slučka namiesto GIF: stačí ho vložiť ako stlmené, opakujúce sa a bez ovládacích prvkov, čím získate plynulú animáciu za zlomok veľkosti animovaného GIF. Pri produkčnom videu, ktoré až následne nasadzujete na web, sa oplatí myslieť na formát už vo fáze prípravy záznamu, o čom viac píšeme v článku o rozdiele medzi UGC a profesionálnou video produkciou.

Okrem týchto troch formátov existujú aj menej časté možnosti. SVG animácia sa hodí na jednoduchú vektorovú grafiku priamo v kóde, no pri zložitejšom pohybe sa horšie udržiava než Lottie. APNG ponúka priehľadnosť a viac farieb než GIF, ale podpora a nástroje sú okolo neho slabšie. Pre väčšinu webov preto zostáva praktickým jadrom trojica Lottie, video a v krajnom prípade GIF, a tento článok sa drží práve jej.

Porovnanie formátov: veľkosť, kvalita, priehľadnosť a podpora

Nasledujúca tabuľka zhŕňa hlavné rozdiely v porovnaní Lottie vs GIF vs MP4/WebM, ktoré rozhodujú pri výbere. Neberte ju ako rebríček od najlepšieho po najhorší, ale ako mapu toho, čo ktorý formát vie a čo nie.

Kedy použiť ktorý formát v praxi

Pri výbere z trojice Lottie vs GIF vs MP4/WebM sa dá rozhodovanie zjednodušiť na jedinú otázku, a to čo je obsahom animácie. Ak ide o kreslenú, vektorovú grafiku, začnite pri Lottie. Ak ide o skutočný záznam z kamery alebo obrazovky, začnite pri videu. GIF nechajte ako poslednú možnosť pre prípady, keď nič lepšie nie je dostupné.

Ako formát animácie ovplyvňuje výkon a rýchlosť webu

Animácia je jedným z najčastejších skrytých dôvodov pomalého webu. Ťažký animovaný GIF v hero sekcii alebo automaticky prehrávané video bez optimalizácie dokážu zhoršiť čas načítania aj metriky Core Web Vitals, najmä na mobile a pomalšom pripojení. Ak riešite celkovú rýchlosť stránky, oplatí sa prejsť aj náš návod, ako zrýchliť WordPress web, kde je animácia jedným z prvkov, ktoré treba merať.

Pri Lottie je najväčšie riziko príliš zložitá animácia s množstvom vrstiev a efektov, ktorá zaťaží procesor pri prekresľovaní. Riešením je zjednodušiť animáciu už v After Effects. Pri videu je kľúčové nenačítať veľký súbor hneď na začiatku: použite atribúty na odloženie načítania, rozumné rozlíšenie a poster obrázok, aby prvé vykreslenie stránky nečakalo na video. Pri GIF je jediná spoľahlivá optimalizácia zvyčajne prechod na iný formát.

Ako animáciu správne vložiť do stránky

Výber formátu je len polovica práce. Rovnako dôležité je, ako sa animácia na stránku vloží, pretože aj vhodný formát vie zle nasadený spomaliť web alebo pôsobiť rušivo.

• Lottie sa zvyčajne prehráva cez odľahčený webový prehrávač alebo komponent, ktorý načíta JSON súbor. Animáciu spustite až vtedy, keď je viditeľná, nie hneď pri načítaní celej stránky, a pri opakovaných prvkoch zdieľajte jeden súbor.
• MP4/WebM vkladáte ako video, ktoré je stlmené, opakujúce sa a hrá sa priamo na mieste bez celoobrazovkového režimu. Doplňte poster obrázok a odložené načítanie, aby video nebrzdilo prvé vykreslenie. Ako prvý zdroj uveďte WebM, ako druhý MP4.
• GIF nemá špeciálne nastavenia a vkladá sa ako obrázok. Ak presiahne pár desiatok kilobajtov, je to signál, že obsah patrí skôr do videa.

Pri každom z týchto prvkov myslite aj na prístupnosť. Používatelia, ktorí majú v systéme zapnuté obmedzenie pohybu, by nemali dostať rušivú automatickú animáciu. Video aj Lottie sa dajú pri tejto voľbe zastaviť alebo nahradiť statickým obrázkom, takže pohyb ostane pod kontrolou návštevníka.

Časté chyby pri výbere formátu animácie

• Video sa nahrádza GIF-om „pre istotu“. Krátky klip sa exportuje ako GIF, ktorý je niekoľkonásobne väčší a vizuálne horší než rovnaké video v MP4/WebM. Tiché automatické video je takmer vždy lepšia voľba.
• Lottie sa použije na fotorealistický obsah. Vektor nie je stavaný na fotografie ani zložité rastrové efekty; výsledkom je veľký JSON, ktorý stráca výhodu malej veľkosti aj výkonu.
• WebM sa nasadí bez MP4 náhrady. Bez záložného MP4 zdroja sa video nemusí prehrať v časti prehliadačov, najmä na zariadeniach Apple. Vždy ponúknite obidva formáty.
• Animácia sa prehráva automaticky bez ohľadu na výkon. Viacero ťažkých animácií naraz zaťaží procesor aj načítanie. Rešpektujte aj nastavenie „obmedziť pohyb“ v systéme používateľa.
• Formát sa vyberá podľa nástroja, nie podľa obsahu. To, že niečo vzniklo v konkrétnom programe, neurčuje najlepší výstupný formát. Rozhoduje typ obsahu a miesto na stránke.

Ako sa rozhodnúť krok za krokom

1. Určte typ obsahu. Vektorová grafika a UI pohyb smeruje k Lottie, reálny záznam k videu, úplne triviálna slučka prípadne ku GIF.
2. Zvážte, či potrebujete priehľadnosť a interaktivitu. Ak áno a ide o grafiku, Lottie je jasná voľba vďaka plynulej polopriehľadnosti a ovládaniu kódom.
3. Odhadnite veľkosť a dĺžku. Čím dlhšia a farebnejšia animácia, tým silnejší dôvod pre video namiesto GIF.
4. Overte podporu cieľových prehliadačov. Pri videu pripravte WebM aj MP4; pri Lottie skontrolujte, či sa načíta príslušná JS knižnica.
5. Zmerajte dopad na výkon. Otestujte načítanie na mobile a pri pomalšom pripojení a v prípade potreby zjednodušte animáciu alebo odložte jej načítanie.

Kontrolný zoznam pre výber formátu animácie

Súvisiace návody a zdroje

• Ako zrýchliť WordPress web: LCP, INP a CLS v praxi
• UGC vs profesionálna video produkcia: čo sa kedy oplatí
• Video marketing: ako video pomáha predávať a budovať značku
• Design systém pre SaaS a aplikácie
• Wireframe vs mockup vs prototyp: kedy ktorý použiť
• Lottie animácie a Core Web Vitals: ako ovplyvňujú rýchlosť webu
• Prístupné animácie na webe: prefers-reduced-motion, ovládanie a bezpečný pohyb
• 2D vs 3D animácia: ktorú zvoliť pre značku, produkt alebo kampaň
• 3D produktová animácia vs video vs fotografia: čo sa oplatí?

Na záver

Pri voľbe Lottie vs GIF vs MP4/WebM rozhoduje obsah animácie, nie to, v akom programe vznikla ani čo je práve populárne. Vektorovú grafiku a UI pohyb zvládne najlepšie Lottie, reálne video patrí do MP4/WebM a GIF si nechajte na okrajové prípady, kde technicky nič iné nefunguje. Keď oddelíte typ obsahu od formátu, prestanú vznikať zbytočne ťažké stránky s rozmazanými animáciami.

Ak práve staviate alebo redizajnujete web a chcete, aby pohyb pôsobil premyslene a zároveň nebrzdil načítanie, riešte formát animácie hneď na začiatku, nie až keď je stránka pomalá. Zle zvolený formát sa neprejaví len na vzhľade, ale hlavne na rýchlosti a na tom, ako web vnímajú návštevníci aj vyhľadávače.

Časté otázky