Het verschil tussen HTML5 en GIF banners (welke kies je?)

Voor onze klanten zetten we regelmatig banners in. Banners zijn geanimeerde afbeeldingen die geplaatst kunnen worden op websites met advertentieruimte. Banners kunnen statisch (niet animerend) ingezet worden, maar omdat de aandacht meer wordt getrokken wanneer er een bewegende afbeelding of tekst te zien is, raden wij altijd aan om te kiezen voor een geanimeerde banner.

Tussen geanimeerde banners zit nog een verschil. Je hebt namelijk een GIF uitvoering en een HTML5 uitvoering. Ik leg graag het verschil uit tussen deze verschillende uitvoeringen.

Het verschil tussen HTML5 en GIF

‘Vroegâh’ had je nog geen HTML5 banners. Toen moesten we het nog doen met GIF banners. Zegt dit al genoeg? Simpel gezegd is HTML5 een veel modernere techniek dan GIF. Ze worden ook op twee totaal verschillende manieren opgemaakt.

Zo werkt een GIF banner

Een GIF banner bestaat uit meerdere losse full-size afbeeldingen die achter elkaar zijn geplakt. Stel je kiest ervoor een banner te maken in het formaat 300 x 250 pixels. Voor elk frame dat je wilt laten zien, dien je de volledige 300 x 250 pixels op te slaan. Het nadeel hiervan is, dat je op deze manier al heel snel aan een groot bestandsformaat zit. Je dient namelijk elk afzonderlijk frame in volledig formaat op te slaan. Google laat maximaal 150KB toe bij het uploaden van een banner en daar zit je met een GIF banner al heel snel aan als je gebruik maakt van een mooie animatie en dus veel frames. Verder heb je bij GIF banners slechts de optie om 256 kleuren op te slaan. Een mooie foto wordt daarom toch al snel minder mooi.

Zo werkt een HTML5 banner

Een HTML5 banner werkt veel slimmer. In tegenstelling tot GIF banners, waarbij je elk frame als full size afbeelding opslaat, werkt HTML5 met losse elementen. Stel je hebt een foto van een product. Deze foto sla je 1 keer op, en kun je hergebruiken in elk frame. Hij stelt de frames en elementen samen met behulp van HTML5 code. Zo kun je animaties opmaken door gebruik te maken van code. De browser waarin de banner wordt geladen, kent deze code en zet dit om in een animatie. Qua bestandsgrootte zit je daarom niet zo snel aan de maximale 150KB en je hebt veel meer mogelijkheden om vloeiende animaties te maken. Verder blijft de kwaliteit van foto’s volledig intact en ziet het er direct een stuk professioneler uit.

Wil je een mooi voorbeeld zien van een HTML5 banner? Bekijk dan de kettingzaag en bladbazer banners van onze klant Husqvarna.

Wat zijn de Google Ads specificaties voor geanimeerde banners?

Met animerende banners kun je heel mooi de show stelen, daarom heeft Google een aantal richtlijnen opgesteld om te voorkomen dat het internet vol staat met bijvoorbeeld irritante knipperende banners.

Google Ads specificaties voor geanimeerde banners

• Bestandstypen: GIF, HTML5
• Maximale bestandsgrootte: 150KB
• Advertentieformaten: Bekijk hier de meest recente formaten.
• Animatie lengte: Maximaal 30 seconden (korte animaties kunnen herhaald worden, maar dienen na 30 seconden te stoppen)
• Frame rate voor GIF banners: Maximaal 5 FPS. Bij 5 frames van 0,2 seconden (dus 5 FPS) blijkt het echter niet te werken. Werk je met 0,21 sec. (of 0,3) dan werkt het wel.

Naast bovenstaande specificaties, kijkt Google ook nog naar factoren als kwaliteit, misleidende content, onduidelijke relevantie en content voor volwassenen. Zo mag een banner bijvoorbeeld niet wazig zijn, irrelevant voor de doelgroep en trucjes bevatten die misleidend zijn. Het uitgebreide beleid kun je hier vinden.

HTML5 is the way to go!

Sta je op het punt om te kiezen tussen HTML5 of GIF? Ga dan zeker voor HTML5. Zoals je hierboven al hebt kunnen lezen, heeft het gewoon veel voordelen en is het een stuk moderner. Dit is er duidelijk aan af te zien en straalt een stukje professionaliteit uit.

Met deze moderne techniek ligt er wel meer een uitdaging. Het opmaken van een HTML5 banner is namelijk iets ingewikkelder dan het maken van een GIF banner. Gelukkig heeft Google een programma ontwikkeld waarbij technische kennis niet direct nodig is, namelijk Google Web Designer.

Nog iets om mee rekening te houden. Je kunt HTML5 banners pas inzetten wanneer je account negentig dagen oud is, je minimaal $ 9.000 hebt besteed en een goede beleidsreputatie hebt.