Jak na animované formáty

Web se mění a s ním i formáty. Animace dnes už nejsou jenom GIFy. Pojďme se spolu podívat na novější a lepší alternativy.

Pryč jsou doby, kdy animované obrázky zdobyly naše weby a kdy jsme netrpělivě čekali, až se na webu všechny načtou. Dnešní weby jsou stále o animaci, dokonce si troufám říct, že čím dál víc, jen se animace na webech dočista změnila. Dnes se s animací nejčastěji setkáme v podobě HTML a CSS3, díky kterým můžeme hravě rozpohybovat jak rastrové, tak i vektorové obrázky. Stále jsou ale situace, kdy využijeme i klasickou animaci, kterou tvoří sled po sobě jdoucích obrázků. V mém případě to byla například prezentace webových řešení v obrázkové galerii na webu. Dnes máte k dispozici již více možností jak takové animace dosáhnout. Pokusím se vám jednotlivé formáty představit a popsat včem jsou jejich výhody, ale také nevýhody.

Soubory

Formát GIF

Král je mrtev, ať žije král! Vzpomínáte na první webové stránky v devadesátých letech? GIF byl fenomén. Kdo neměl na webu GIF, jako by nebyl. Ty doby jsou již naštěstí dávno pryč a s nimi se z webu vytratil i formát GIF. Je mu ale skutečně konec? Ne tak úplně. GIF je stále velice populární, především v komunikaci na sociálních sítích. Pro svou skvělou podporu je GIF oblíbený všude tam, kde je kladen důraz na obsah, nikoli na kvalitu. Ano GIF vám pojede skutečně skoro všude, dokonce i v emailu. Bohužel kvalita animací není nikterak valná, protože nepodporuje alfa průhlednost a soubory jsou dost velké. Na delší animace tak můžete zapomenout.

GIF

Formát PNG

PNG

Věděli jste že PNG umí animaci? A to mnohem lépe než stařičký GIF. Díky PNG může mít vaše rastrová grafika daleko více barev a také lépe pracuje s průhledností. Kromě Edge má formát i podporu všech moderních prohlížečů, ale jeho slabinou je datová velikost. Není to žádný drobek a to může být problém například u mobilního internetu. Naštěstí zde existuje řešení v podobě TinyPNG, které dokáže vaše animace zmenšit. Proto můžu tento formát jedině doporučit.

Formát WEBP

Umí to, co umí PNG. Animace vypadají dobře a soubory jsou mnohem menší, než u PNG a formát sám o sobě jednoduše nemá chybu. Ale opět to má háček a tím je chybějící podpora Safari. Nezbývá než čekat, jestli se v Applu umoudří.

WEBP

Formát FLIF

FLIF

FLIF je nejmladší z formátů, které umožňují animaci. Má všechny výhody WEBP formátu a navíc ještě umožňuje progresivní prokládání. Byla by to skvělá volba, bohužel však není podporován žádným známým prohlížečem.

A moje volba?

Na mém portfoliu využívám rastrové animace pro ukázky webových referencí. Protože návštěvnost z Edge a IE u mě představuje pouze 0.5 %, dovolil jsem si použít formát PNG. Velikost souborů jsem zredukoval pomocí Tiny PNG. Díky tomu mají tyto animace mnohem vyšší kvalitu, než by tomu bylo u formátu GIF.A jak to vypadá v praxi se můžete podívat třeba zde…

Webdesign Switchio.com

Více článků najdete zde. Můžete si také prohlédnout mou práci v portfoliu…

Přihlaste se k newsletteru

Pokud vás článek zaujal, nenechte si ujít další a přihlaste se k odběru novinek. Pravidelně tak budete dostávat užitečné rady přímo do vaší schránky.

Přihlásit k newsletteru

Komentáře

Copy link
Powered by Social Snap