Animovaný GIF možná vypadá skvěle, problém ale je, že váží patnáct megabajtů. Na web ho nahrajete, stránka se začne načítat pomalu jako v roce 2005 a návštěvník z ní radši zmizí dřív, než animaci vůbec uvidí. Přitom stejný GIF lze s pomocí komprese GIF ve většině případů zmenšit na čtvrtinu velikosti bez toho, aby si toho kdokoliv všiml.
Proč jsou animované GIFy tak těžké?
GIF formát vznikl v roce 1987 a jeho kompresní logika se od té doby zásadně nezměnila. Každý snímek animace se ukládá jako samostatný obrázek a všechny tyto snímky jsou pak zabaleny do jednoho souboru. Desetisekundová animace při rychlosti dvaceti pěti snímků za sekundu obsahuje dvě stě padesát samostatných obrázků. Výsledná velikost souboru pak překvapí i zkušené uživatele.
K tomu přistupuje technické omezení formátu: GIF pracuje maximálně s 256 barvami. Moderní animace s jemnými barevnými přechody, stíny nebo průhledností proto vyžadují kompromisy, které se projeví jak na kvalitě, tak na velikosti souboru.
Dobrou zprávou je, že právě tato omezení otevírají prostor pro efektivní kompresi. Víte přesně, kde soubor tloustne, a podle toho cílíte optimalizaci.
Rozměry jako první krok, ne poslední
Nejjednodušší a nejúčinnější způsob, jak zmenšit animovaný GIF, je zmenšit jeho rozměry. Animace určená pro web, kde se zobrazí na šířce šesti set pixelů, nepotřebuje být exportována v rozlišení tisíc dvě stě pixelů. Přesto se to děje neustále.
Zmenšení rozměrů na polovinu nesníží velikost souboru na polovinu. Sníží ji přibližně na čtvrtinu. Je to proto, že počet pixelů klesá kvadraticky. Animace o šířce tisíce pixelů má čtyřikrát více pixelů než animace o šířce pěti set pixelů. To se přímo projeví na velikosti souboru.
Před jakoukoliv další optimalizací si proto ověřte, v jakých rozměrech se GIF na webu nebo v materiálu skutečně zobrazí, a exportujte ho v přesně těchto rozměrech. Nic víc.
Snímková frekvence a kde hledat úspory
Plynulost animace závisí na počtu snímků za sekundu. Lidské oko vnímá pohyb jako plynulý přibližně od šestnácti snímků za sekundu. Animace exportovaná ve třiceti nebo více snímcích za sekundu bude vypadat stejně plynule jako ta se šestnácti snímky, ale soubor bude výrazně větší.
Snížení snímkové frekvence z třiceti na patnáct snímků za sekundu zhruba zmenší soubor na polovinu. Přitom u většiny typů animací, pohyblivých log, přechodů nebo jednoduchých smyček, rozdíl prakticky nepostřehnete.
Výjimkou jsou animace rychlého pohybu nebo takové, kde plynulost je součástí estetického záměru. Tady snížení snímkové frekvence skutečně poznat bude. V takovém případě hledejte úspory jinde.
Optimalizace snímků místo jejich mazání
Pokročilejší technika pracuje s tím, jak GIF jednotlivé snímky ukládá. Základní přístup uloží každý snímek jako kompletní obrázek. Chytřejší přístup uloží pouze to, co se mezi snímky změnilo, a zbytek ponechá průhledný, protože ho přebírá z předchozího snímku.
Říká se tomu frame optimization nebo delta compression. Pokud animace zobrazuje objekt pohybující se na statickém pozadí, stačí v každém snímku uložit jen pohybující se část. Pozadí se neuloží znovu, jen se převezme. Výsledek bývá dramatický, zvláště u animací s velkými statickými plochami.
Ezgif.com nabídne tuto funkci zdarma v sekci Optimize. Nahrajete GIF, vyberete metodu optimalizace a stáhnete výsledek. U vhodných animací klesne velikost souboru o třicet až šedesát procent bez jakékoliv viditelné změny.
Počet barev a jeho vliv na velikost
GIF formát sice podporuje až 256 barev, ale ne každá animace jich tolik potřebuje. Jednoduché animace s plochými barvami, loga nebo ikony fungují perfektně se 64 nebo dokonce 32 barvami. Snížení barevné palety přímo snižuje velikost souboru.
Při exportu GIF v Photoshopu nebo v online nástrojích nastavte počet barev na nejnižší hodnotu, při které animace stále vypadá dobře. Postup je jednoduchý: začněte na 256, snižujte po krocích a sledujte, kdy se začnou objevovat viditelné artefakty. Hodnota těsně nad tímto bodem je váš optimální počet barev.
U fotografických animací s jemnými barevnými přechody snížení barev výrazně pomoci nedá bez viditelné ztráty kvality. U grafických animací s čistými barvami je to ale jedna z nejrychlejších cest k menšímu souboru.
Dithering a kdy ho vypnout
Dithering je technika, která simuluje barvy, jež GIF formát přímo nepodporuje, střídáním dostupných barev na úrovni jednotlivých pixelů. Výsledkem je vizuálně plynulejší přechod barev, ale za cenu většího souboru. Dithering totiž vytváří složitější vzory, které se komprimují hůře než jednobarevné plochy.
Pro animace s jemnými barevnými přechody nebo fotografickým obsahem dithering vizuálně pomáhá. Pro animace s plochými barvami ho vypněte úplně. Jednobarevné plochy bez ditheringu se komprimují výrazně lépe a výsledek vypadá čistěji.
Většina exportních nástrojů nabídne volbu mezi různými typy ditheringu nebo možností ho zcela deaktivovat. Vyzkoušejte obě varianty a porovnejte výsledný soubor.
Nástroje, které fungují
Ezgif.com je zdarma dostupná online platforma s kompletní sadou nástrojů pro práci s GIF soubory. Nabídne kompresi, ořez, změnu rozměrů, úpravu snímkové frekvence i optimalizaci snímků na jednom místě. Pro příležitostnou práci s GIF soubory je to ideální volba bez nutnosti cokoliv instalovat.
Gifsicle je nástroj pro příkazový řádek, vhodnější pro pokročilejší uživatele. Zvládne hromadné zpracování celých složek, nabídne přesnou kontrolu nad všemi parametry a výsledky bývají o něco lepší než u online nástrojů. Příkaz gifsicle –optimize=3 –lossy=80 input.gif -o output.gif zkomprimuje GIF agresivně, ale výsledek ve většině případů stále vypadá přijatelně.
Photoshop pak při exportu přes funkci Exportovat pro web nabídne živý náhled výsledku spolu s přesnou velikostí souboru. Vidíte výsledek ještě před uložením a podle toho doladíte nastavení.
Kdy přestat optimalizovat GIF a přejít na video?
Existuje hranice, za kterou optimalizace GIF formátu přestane dávat smysl. Příkladem jsou třeba animace delší než pět sekund, animace s bohatým fotografickým obsahem nebo animace určené pro web s důrazem na rychlost načítání.
V takovém případě je nejefektivnějším krokem převod na video formát MP4 nebo WebM. Stejná animace ve formátu MP4 bývá o osmdesát až devadesát procent menší než jako GIF při srovnatelné nebo lepší vizuální kvalitě. Moderní prohlížeče video přehrají automaticky bez ovládacích prvků a bez zvuku, takže pro uživatele vypadá stejně jako GIF. Jen váží zlomek.
Na webu to technicky vyřeší HTML tag <video> s atributy autoplay, loop a muted. Výsledek vypadá identicky, stránka se načte výrazně rychleji.
GIF optimalizace je kombinací vícera kroků
Největší chybou při kompresi GIF souborů je spoléhat na jeden krok. Jen zmenšit rozměry nestačí. Jen snížit počet barev nestačí. Teprve kombinace správných rozměrů, nižší snímkové frekvence, optimalizace snímků a nastavení barevné palety přinese výsledek, který překvapí. Soubor, který před tím vážil deset megabajtů, najednou váží jeden a půl a animace vypadá prakticky stejně. Takový výsledek už stojí za hodinu strávenou s nastavením.
