Každý, kdo plánuje display kampaň, řeší stejnou otázku: stačí obyčejný obrázek, nebo investovat do animace? Animovaný banner upoutá pozornost lépe, ale stojí víc práce a naráží na přísnější technické limity. Statický banner naopak vyrobíte rychle, nasadíte kamkoli a snadno testujete. Správná volba závisí na cíli kampaně, rozpočtu i na tom, kde se reklama zobrazí.

V tomto článku porovnáme HTML5 bannery a statické bannery z pohledu výkonu, ceny i technických požadavků. Dozvíte se, kdy se animace opravdu vyplatí a kdy ji můžete s klidem vynechat.

Co je statický banner a co HTML5 banner

Statický banner je jeden obrázek ve formátu JPG, PNG nebo GIF. Obsahuje logo, sdělení, tlačítko a případně produktovou fotku. Nic se na něm nehýbe a návštěvník ho přečte během vteřiny.

HTML5 banner je malá webová stránka zabalená do ZIP souboru. Obsahuje HTML, CSS, JavaScript a obrázky. Animace běží plynule, text se postupně objevuje, produkty se střídají a tlačítko může reagovat na kurzor. Na rozdíl od animovaného GIFu zvládá HTML5 miliony barev a ostřejší text, takže vypadá profesionálněji. Ukázky najdete na stránce HTML5 bannery.

Mezi oběma formáty leží ještě animovaný GIF. Vyrobíte ho snadno, ale kvalitou i datovou náročností zaostává za HTML5.

Kdy se animace vyplatí

Animace funguje tam, kde potřebujete vyprávět příběh nebo upoutat pozornost na přeplněné stránce. Vyplatí se hlavně v těchto situacích:

Komplexní sdělení. Chcete ukázat tři výhody, cenu a výzvu k akci? Na jeden statický banner se to nevejde bez přeplácaného designu. Animace rozloží sdělení do 3–4 snímků, z nichž každý nese jednu myšlenku.

Brandové kampaně a nový produkt. Při budování značky pomáhá pohyb zaujmout a zapamatovatelnost zvyšuje i opakování stejného vizuálu. Animovaný banner s jasným závěrečným snímkem si lidé zapamatují snáz.

Remarketing s dynamickým obsahem. Pokud ukazujete lidem produkty, které si prohlíželi, nebo střídáte slevy, pohyb dává smysl. O propojení tohoto přístupu s dalšími kanály píšeme v článku Omnichannel kampaně: jak propojit PPC, sociální sítě a e-mail.

Přímý nákup reklamního prostoru. Weby jako Forbes nebo mediální domy nabízejí prémiové pozice, kde banner vidí hodně lidí. Tady se investice do kvalitní animace obvykle vrátí.

Vysoká konkurence ve výsledcích. Když vaši reklamu obklopuje deset dalších, pohyb vás odliší. Pozor ale na přehnané efekty, které návštěvníka spíš odradí.

Kdy stačí statický banner

Animace není zázračný lék. Statický banner je lepší volba, když:

  • Potřebujete rychlost. Statický banner navrhnete za hodinu a otestujete okamžitě. U akcí s krátkou dobou trvání (víkendová sleva, uzávěrka objednávek) nemá smysl čekat na animaci.
  • Testujete hodně variant. Při A/B testování vytvoříte desítky statických kreativ za cenu jedné animace. Rychle zjistíte, který motiv, slogan nebo barva funguje.
  • Sdělení je jednoduché. Jedna výrazná fotka, jedna věta a tlačítko. Vše, co banner potřebuje, vidí člověk hned.
  • Rozpočet je omezený. Pokud kampaň míří na malý okruh lidí nebo má nízký denní rozpočet, výroba HTML5 se nemusí zaplatit.
  • Platforma animaci nepodporuje. Některé reklamní systémy nebo weby přijímají jen statické formáty. U vydavatelů proto vždy kontrolujte technické podmínky.

Pamatujte také, že Google doporučuje používat responzivní obsahové reklamy. Ty se automaticky přizpůsobí téměř jakémukoli dostupnému reklamnímu prostoru a Google z vašich podkladů skládá varianty podle výkonu. Statické i HTML5 bannery proto doplňují responzivní reklamy, nenahrazují je.

Technické limity: na co si dát pozor

Technické požadavky rozhodují často víc než kreativní nápad. Banner, který systém odmítne, vám nepřinese ani jedno zobrazení.

Google Ads. Statický obrázek smí mít nejvýše 150 KB, zatímco ZIP s HTML5 bannerem může dosáhnout 600 KB a obsahovat nejvýše 40 souborů. Animace nesmí běžet déle než 30 sekund. Smyčka je povolená, ale banner se po 30 sekundách musí zastavit.

Seznam Sklik. Sklik HTML5 bannery podporuje a datový limit pro ně je mírně vyšší než pro běžné obrázky. Starší nápověda Skliku uvádí také omezení, že HTML5 banner může vést jen na jednu cílovou stránku, a že funkce nemusí být dostupná všem účtům. Aktuální podmínky proto vždy ověřte přímo v nápovědě Skliku před zadáním výroby.

Vydavatelé a mediální domy. Limity se liší web od webu. Například Media Club uvádí u standardních formátů limit 100 kB, kdežto jiní vydavatelé povolují i stovky kB. Zjistěte specifikace předem a navrhněte banner na nejpřísnější z nich.

Praktická rada: tvořte HTML5 banner od začátku štíhle. Vynechte velké fotografie, použijte CSS místo obrázků všude, kde to jde, a pracujte s lehkými knihovnami. Kvalitní grafiky pro display kampaně dodáváme v rámci služby Grafiky pro internet.

Srovnání: HTML5 vs. statický banner

KritériumStatický bannerHTML5 banner
Rychlost výrobyHodinyDny
Cena výrobyNižšíVyšší
Vizuální dopadStředníVysoký
Datová velikostMalá (do 150 KB)Větší (do 600 KB u Googlu)
Testování variantSnadné a levnéNáročnější
Podpora platforemUniverzálníZávisí na síti a webu
Vhodné proVýprodeje, testy, jednoduchá sděleníBrand, nové produkty, komplexní příběh

Jak navrhnout animaci, která funguje

Pokud se pro HTML5 rozhodnete, držte se několika pravidel:

  1. Nejdůležitější sdělení ukažte do tří sekund. Mnoho lidí banner neuvidí celý.
  2. Vyšší délka ≠ vyšší účinnost. Ideální animace trvá 10–15 sekund a nanejvýš tři smyčky.
  3. Poslední snímek musí fungovat samostatně. Obsahuje logo, hlavní sdělení a výrazné tlačítko, protože ho uvidí nejvíc lidí.
  4. Nepřehánějte efekty. Blikání a rychlé přechody rozptylují a zhoršují čitelnost.
  5. Nezapomeňte na definovaný proklik. Většina reklamních systémů vyžaduje správně nastavený klik, jinak banner nelze zadat nebo nezměříte prokliky.
  6. Připravte statickou náhradu. Když se HTML5 nenačte, zobrazí se záložní obrázek. Dobrá fallback grafika zachrání zobrazení.

Jak změřit, co funguje

Nejspolehlivější odpověď dá vlastní test. Pusťte stejný motiv ve statické a animované verzi se stejným cílením a rozpočtem a po dostatečně dlouhém období porovnejte tři čísla:

  • CTR (míra prokliku), která ukáže, zda animace skutečně přitahuje pozornost,
  • konverzní poměr, který odhalí, jestli proklikávající lidé skutečně nakupují,
  • cena za konverzi, protože vyšší CTR nic neznamená, pokud banner přivádí nekvalitní návštěvníky.

Dobře nastavené měření vám pomůže vyhnout se chybným závěrům. K tomu se hodí správně nastavená digitální analytika a znalost atribuce, kterou vysvětluje článek Jak správně nastavit atribuční modely v Google Ads. Animovaný banner totiž často působí v horní části nákupního procesu a jeho přínos vidíte až v asistovaných konverzích.

Rozhodovací checklist

Zvolte HTML5 banner, pokud většinou odpovíte ano:

  • Potřebujete vyprávět příběh nebo ukázat více výhod?
  • Cílíte na brandové povědomí, nový produkt nebo sezonní kampaň s delším trváním?
  • Zobrazí se banner v prémiových pozicích nebo vysoce konkurenčním prostředí?
  • Máte rozpočet na výrobu i testování?
  • Reklamní síť animované HTML5 přijímá?

Zvolte statický banner, pokud:

  • Potřebujete rychle spustit nebo často měnit kreativu?
  • Chcete testovat desítky variant?
  • Sdělení je jednoduché a dá se říct jednou větou?
  • Platforma nebo web animace nepodporuje?

Nejlepší výsledky přináší kombinace obou přístupů. Statické bannery slouží k rychlému testování motivů a sdělení a vítězné koncepty pak povýšíte na animované HTML5 verze pro hlavní kampaň.

Jak pomáhá Studio Shark

Navrhneme a vytvoříme bannery v obou formátech. Statické i animované HTML5 kreativy připravíme tak, aby splnily limity Google Ads, Skliku i vydavatelů. Pomůžeme vám také zvolit správný formát podle cíle kampaně a nastavit měření, abyste věděli, co skutečně funguje.

Nabízíme zejména:

Chcete poradit s výběrem formátu pro vaši kampaň? Ozvěte se nám.

Chci řešit reklamní bannery   ➜