Geanimeerde banners binnen de limieten van elk platform

Beweging trekt het oog, maar elk advertentieplatform begrenst hoe lang en hoe vaak een banner mag bewegen. Deze gids zet de limieten naast elkaar en laat zien hoe je een animatie opbouwt die daarbinnen blijft: in welke volgorde elementen binnenkomen, wat er op het laatste beeld staat en welk bestandstype je waar gebruikt.

De limieten: 15 of 30 seconden

De platforms tellen in tijd, niet in herhalingen. De regel “maximaal drie keer herhalen” komt niet van het IAB, maar uit de specificaties van afzonderlijke uitgevers.^[1] Apple News schrijft bijvoorbeeld dat geanimeerde GIF’s maar drie keer mogen herhalen, binnen 15 seconden in totaal.^[5]

De praktische keuze: houd een displaybanner binnen 15 seconden. Dan voldoet hij aan het IAB en aan elk platform hierboven, en hoef je geen aparte versie te maken voor uitgevers die strenger zijn dan Google.

Op sociale media gelden ruimere grenzen. Meta, LinkedIn, TikTok en Pinterest accepteren video’s van minuten lang,^[6][7][8][9] maar geven zelf kortere adviezen: LinkedIn raadt 15 tot 30 seconden aan,^[7] Pinterest 6 tot 15 seconden voor video-advertenties,^[9] en TikTok noemt 9 tot 15 seconden voor zijn gereserveerde in-feed-advertenties.^[10]

Binnenkomen in leesvolgorde

Een animatie in een banner vertelt geen verhaal, ze stuurt de blik. Laat de elementen daarom binnenkomen in de volgorde waarin iemand ze leest: eerst het beeld, dan de kop, dan de tekst, en als laatste de knop. Wie halverwege kijkt, ziet dan al een kop die klopt, en niet een knop zonder context.

Drie dingen om te vermijden:

• Alles tegelijk. Als elk element tegelijk beweegt, valt er niets op.
• Flitsen en knipperen. Google Ads wijst stroboscopische, flitsende en afleidende beelden af.^[11] Adform verbiedt advertenties die schudden of flikkeren met 5 tot 30 wisselingen per seconde.^[12]
• Beweging zonder einde. Een animatie die nergens naartoe werkt, eindigt toevallig ergens, en dat beeld blijft staan.

Het IAB raadt aan de animatie pas te starten als de banner in beeld is, en haar onder te brengen in de subload: het deel van de banner dat pas laadt als de pagina eromheen klaar is.^[1]

Het laatste beeld

Als de animatie stopt, blijft het laatste beeld staan zolang de banner in beeld is. Dat beeld is dus je eigenlijke advertentie. Twee regels:

1. Het laatste beeld is compleet. Logo, kop, aanbieding en knop staan er allemaal, zodat iemand die pas aan het eind kijkt de hele boodschap krijgt.
2. Het laatste beeld krijgt tijd. Laat het minstens drie seconden staan, zodat iemand het in rust kan lezen.

Ontwerp het laatste beeld daarom eerst, als statische banner, en bouw de animatie ernaartoe. De statische versie heb je toch nodig: als back-upafbeelding voor adservers en voor plaatsingen die geen animatie tonen.

300 × 250

HTML5, GIF of MP4

Welk bestandstype je levert, hangt af van waar de banner draait:

HTML5 beweegt vloeiend en blijft scherp bij elke pixeldichtheid. Een GIF is de uitweg waar HTML5 niet mag, en door de lage framerate ontwerp je de beweging daar in een paar duidelijke stappen in plaats van een vloeiende overgang. Op sociale media lever je bewegend beeld als video; LinkedIn neemt in een advertentie met één afbeelding daarnaast een geanimeerde GIF van maximaal 250 frames aan.^[13]

Bestandsgrootte

Animatie mag het gewicht niet opdrijven. De belangrijkste grenzen voor display:

• Google Ads: 150 KB voor een GIF, 600 KB voor een HTML5-ZIP.^[2]
• Adform: 300 KB uitgepakt voor een desktopbanner, 200 KB op mobiel,^[4][14] en bij voorkeur 150 KB of minder bij het eerste laden.^[12]
• IAB: een gewicht per formaat, zoals 150 kB bij het eerste laden voor een 300 × 250 en 50 kB voor een 320 × 50.^[15]

Met CSS-animatie hoeft er geen animatiebibliotheek mee in de ZIP, zodat het gewicht naar beeld en letters gaat. Werk met één sterk beeld in plaats van drie, en neem van je lettertype alleen de tekens op die je gebruikt.

Zo animeert Sizewright

Elk formaat in een set wordt ook geanimeerd gebouwd. De elementen komen binnen in leesvolgorde, met een van acht binnenkomsten per element en desgewenst een korte puls op de knop. De animatie is geschreven in CSS-keyframes, zonder JavaScript voor de beweging. Een cyclus duurt bij de bewegingsstijlen Rustig en Zelfverzekerd vijf seconden en bij Energiek vierenhalve, en speelt één tot drie keer binnen de limiet van het formaat: 15 seconden voor display, 30 seconden voor de andere kanalen. Drie cycli van vijf seconden vullen die 15 seconden precies. Het laatste beeld blijft altijd minstens drie seconden staan.

Uit één animatie komen vier bestanden: een HTML5-ZIP met de clickTag van je adserver, een geanimeerde GIF waarvan frames en kleuren stap voor stap afnemen tot hij binnen de limiet past, een MP4 in H.264 voor sociale media en een back-up-JPG van maximaal 150 KB voor Campaign Manager 360, Adform, Xandr en het IAB-profiel. Elke export wordt gecontroleerd op duur, herhalingen en framerate voordat je hem downloadt. In de editor pas je per element de binnenkomst, de vertraging en de duur aan, en voor de hele animatie de lengte en het aantal herhalingen.

Verder lezen

Bij Geanimeerde HTML5-banners zie je een animatie van de engine afspelen en lees je wat elk bestand bevat. De advertentiespecificaties geven per platform de limieten voor duur, herhalingen en bestandsgrootte, met de bronnen erbij.