Animovaný banner na landing page přitáhne pohled rychleji než statický obrázek. Jenže nekomprimovaný GIF o velikosti 8 MB udělá ze stránky, která měla konvertovat, stránku, která se jen dlouze načítá. Komprese GIF OptiBot patří k poslednímu kroku před nasazením banneru na web. Co se děje předtím, kde vznikají problémy s velikostí souboru a jak se jich zbavit bez viditelného zhoršení animace?
Proč animované GIF bannery tak snadno přerostou rozumnou velikost
GIF formát ukládá každý snímek animace jako samostatný obrázek. Banner s desetivteřinovou animací při 15 snímcích za sekundu obsahuje 150 samostatných obrázků uložených v jednom souboru. Každý snímek nese vlastní barevnou paletu až 256 barev a bez aktivní optimalizace mezisnímkových dat se velikost souboru násobí s každým přidaným záběrem.
Grafické nástroje situaci neusnadňují. Export z Adobe Animate, Photoshopu nebo Canvy probíhá s konzervativním nastavením komprese, protože tyto programy nepracují s webovým výkonem jako primárním cílem. Výsledný soubor je sice kvalitní, nicméně pro web zbytečně těžký. Banner exportovaný přímočaře z grafického nástroje bez dalšího zpracování bývá 3–10× větší, než musí být.
Co se stane, když banner zpomalí stránku
Dopad těžkého GIF banneru na výkon stránky se projeví ve dvou rovinách. První je technická: LCP metrika (Largest Contentful Paint) se zhorší, protože prohlížeč čeká na stažení velkého souboru před vykreslením viditelného obsahu. Google Core Web Vitals tuto metriku přímo hodnotí a špatné výsledky se projeví na pozicích ve vyhledávání.
Druhá rovina je obchodní: každá sekunda zpomalení načítání snižuje konverzní poměr stránky. Landing page, na které banner měl přesvědčit návštěvníka k akci, ztrácí část svého publika ještě před tím, než se animace stihne přehrát. PPC kampaň platí za kliknutí, která přivedou návštěvníky na pomalou stránku. Pomalá stránka plýtvá rozpočtem bez ohledu na kvalitu kreativy.
Jak banner správně připravit před nasazením
Příprava GIF banneru pro web prochází třemi kroky, které se dělají v grafickém nástroji ještě před exportem, a jedním krokem po exportu.
- Rozměry odpovídají místu zobrazení. Banner určený pro postranní sloupec o šířce 300 px nepotřebuje být exportován v rozlišení 900 px. Každý zbytečný pixel násobí velikost souboru přes všechny snímky animace. Cílové rozměry jsou konkrétní hodnoty z layoutu stránky nebo reklamního systému, nikoli orientační odhad.
- Snímková frekvence odpovídá obsahu. Pohyblivý text nebo plynulý přechod barev vyžaduje 15–24 fps. Jednoduché bannery s přepínáním mezi dvěma až třemi záběry fungují bez problémů při 8–10 fps. Snížení snímkové frekvence z 24 na 12 fps zmenší soubor zhruba na polovinu při zachování plynulosti animace.
- Barevná paleta odpovídá obsahu banneru. GIF podporuje maximálně 256 barev na snímek. Bannery s plochami jedné barvy, textem a jednoduchými přechody zpravidla nepotřebují víc než 64–128 barev. Omezení palety je přitom operace, kterou grafický nástroj nabízí při exportu – v Adobe Photoshopu jde o nastavení přímo v dialogu „Export As“.
- Komprese po exportu uzavírá přípravu. Komprese GIF OptiBot zpracuje soubor lokálně v prohlížeči. Nástroj aplikuje optimalizaci mezisnímkových dat a redundantních pixelů, vizuální porovnání před a po kompresi pak ukáže výsledek dřív, než soubor stáhnete.
Cílové hodnoty pro různé typy bannerů
Orientační hodnoty pro GIF bannery nasazované na web jsou zhruba tyto:
| Typ banneru | Rozměry | Cílová velikost souboru |
|---|---|---|
| Leaderboard | 728 × 90 px | do 150 kB |
| Rectangle | 300 × 250 px | do 200 kB |
| Skyscraper | 160 × 600 px | do 150 kB |
| Hero banner (celá šířka) | 1200 × 400 px | do 500 kB |
| Inline obsah | 600 × 300 px | do 300 kB |
Překročení těchto hodnot neznamená automaticky chybu, záleží na konkrétním kontextu stránky a rychlosti hostingu. Jako výchozí referenční bod při přebírání bannerů od grafika nebo agentury ale tyto hodnoty fungují spolehlivě.
Kdy GIF banner vyměnit za video nebo CSS animaci
GIF má smysl tam, kde jde o jednoduchou animaci s omezeným počtem barev a krátkým trváním do pěti sekund. Ve třech situacích už je ale vhodnější volit jiný přístup.
- Animace delší než 5–8 sekund s plynulým pohybem a bohatou barevností lépe funguje jako video soubor ve formátu MP4 nebo WebM. HTML atributy autoplay, loop, muted a playsinline zajistí chování totožné s GIF animací, přičemž soubor bývá až desetkrát menší. Srovnání GIF, WebP a AVIF z hlediska výkonu a situací, kdy ještě GIF dává smysl, ukazuje, kde přesně leží hranice mezi tím, kdy GIF optimalizovat, a kdy ho rovnou nahradit.
- Bannery tvořené pouze přechodem barev nebo pohybem jednoduchých tvarů jdou realizovat jako CSS animace bez jakéhokoli obrázkového souboru. CSS animace nemá žádnou datovou zátěž ve formě obrázku a prohlížeč ji vykresluje hardwarově akcelerovaně.
- Bannery s průhledností, kde se animace překrývá s pozadím stránky, využijí WebP animaci místo GIF – WebP podporuje průhlednost, GIF ji podporuje jen binárně (pixel je buď průhledný, nebo ne), a výsledek u složitějších animací s průhledností vypadá v GIF zrnitě.
Proces, který funguje při pravidelné produkci bannerů
Přebírání bannerů od grafické agentury nebo freelancera bez technické kontroly je nejčastější příčina toho, že se na web dostane soubor, který tam nepatří.
Situaci je proto třeba řešit systémově: při objednávce specifikovat maximální velikost souboru v kB jako součást briefu, po přijetí souboru zkontrolovat skutečnou velikost a rozměry, spustit kompresi nástrojem před nahráním a výsledek ověřit na testovací URL před spuštěním kampaně.
Každý krok zabere minuty. Výsledek je kampaň běžící na stránce, která se načte dřív, než návštěvník ztratí trpělivost.
