Bannières animées : durée, boucles, poids et image finale

Animer une bannière, c’est travailler dans un cadre précis : chaque plateforme limite la durée, les boucles et le poids. Ce guide rassemble ces limites, d’après les pages des plateformes et les recommandations de l’IAB, et explique comment construire une animation qui les respecte et qui se termine sur une image complète.

Les limites de durée

Deux chiffres reviennent : 15 secondes pour l’IAB, 30 secondes pour Google Ads, Display & Video 360 et Adform.

Google prévient que l’animation ne peut boucler qu’à l’intérieur de ces 30 secondes, et qu’au-delà l’annonce est refusée.^[5] L’IAB, lui, ne fixe pas de nombre de boucles : la limite est la durée totale.^[1]

La règle des « trois boucles » ne vient pas de l’IAB. On la trouve dans les spécifications de certains éditeurs : celles d’Apple News, par exemple, limitent les GIF animés à trois boucles et à 15 secondes au total.^[6] Si votre plan média passe par un éditeur précis, ses propres règles s’ajoutent à celles de la plateforme.

Pour une campagne diffusée sur plusieurs plateformes, la limite la plus stricte décide. Si vous suivez aussi l’IAB, 15 secondes au total couvrent toutes les sources de ce tableau.

Construire le cycle

Une animation de bannière se pense en cycles. Un cycle fait entrer chaque élément, montre le message complet, puis recommence ; la dernière boucle s’arrête sur l’image finale.

Dans Sizewright, un cycle dure 5 secondes pour un rythme calme ou assuré, 4,5 secondes pour un rythme énergique. Il se répète une à trois fois dans la limite du format : 15 secondes pour le display, 30 secondes pour les autres canaux. Trois cycles de 5 secondes remplissent donc exactement la limite de l’IAB.

L’ordre des entrées

Les éléments entrent dans l’ordre où on les lit : l’image, puis le titre, le texte et enfin le bouton. Un bouton qui apparaît avant le titre demande au lecteur d’agir avant de savoir pourquoi. Sizewright propose huit animations d’entrée et, en option, une légère pulsation du bouton pour attirer le regard une fois le message en place.

Ce qu’il faut éviter

Les plateformes refusent les animations agressives. Google interdit les images stroboscopiques, clignotantes ou autrement distrayantes.^[7] Adform proscrit les annonces qui tremblent ou qui scintillent à haute fréquence, entre 5 et 30 transitions par seconde, ainsi que la lecture automatique de vidéo ou de son.^[8] L’IAB recommande de démarrer l’animation quand l’annonce est visible à l’écran.^[1]

L’image finale

Une fois la dernière boucle terminée, la bannière reste figée sur son image finale pour tout le reste de son affichage. Cette image doit donc être complète : logo, titre, offre et bouton, tous lisibles.

• Tenez-la au moins trois secondes. Dans Sizewright, l’image finale reste affichée au moins trois secondes.
• N’y cachez rien. Un message qui n’apparaît que dans une image intermédiaire est perdu pour qui regarde la bannière une seconde trop tard.
• Prévoyez sa version statique. Les emplacements qui ne diffusent pas d’animation affichent une image fixe, et les serveurs publicitaires affichent une image de secours là où le HTML5 ne peut pas s’exécuter.^[9]

HTML5, GIF ou MP4

Le même mouvement se livre en trois formats de fichier, selon l’endroit où la bannière sera diffusée.

Le HTML5 reste net à toute densité d’écran et pèse peu quand l’animation réutilise les mêmes images. Chez Google Ads, son import est réservé aux comptes qui remplissent les conditions d’ancienneté, de dépenses et de respect des règles fixées par Google ; ces comptes doivent ensuite en faire la demande, et l’accès n’est pas garanti.^[2]

Le GIF animé est la solution de repli quand le HTML5 n’est pas accepté. Sa contrainte de cadence est forte chez Google : moins de 5 images par seconde, ce qui impose un mouvement simple, par étapes.^[2]

Le MP4 sert aux réseaux sociaux. Les plateformes recommandent des vidéos courtes : de 15 à 30 secondes chez LinkedIn, de 6 à 15 secondes chez Pinterest, de 9 à 15 secondes pour les publicités TikTok en réservation.^[10][11][13]

Le poids d’une bannière animée

Le poids d’une animation se joue sur trois postes : les images, les polices et le code.

• Les images. Une seule photo forte pèse moins que trois. Dans un GIF, chaque image supplémentaire ajoute du poids : réduisez le nombre d’images et de couleurs avant d’abîmer la photo.
• Les polices. Une police réduite aux caractères utilisés par la bannière pèse beaucoup moins que la police complète.
• Le code. Une animation en CSS n’a besoin d’aucune bibliothèque à charger avant de démarrer.

L’IAB raisonne en chargement initial et en chargement secondaire, mesurés après compression gzip : 150 Ko puis 300 Ko pour un 300 × 250, un 728 × 90 ou un 160 × 600, 50 Ko puis 100 Ko pour un 320 × 50.^[14] Il recommande de faire de l’animation une partie du chargement secondaire.^[1]

Ce que fait Sizewright

Sauf si vous choisissez le style statique, chaque format est créé en version statique et en version animée. L’animation HTML5 est écrite en keyframes CSS, sans JavaScript d’animation ; le GIF est capturé puis allégé, en images et en couleurs, jusqu’à respecter sa limite ; la vidéo est encodée en MP4 H.264. La durée, les boucles et la cadence d’images de chaque fichier sont vérifiées à l’export, avant le téléchargement.

La page Bannières HTML5 animées montre une animation exportée par le moteur et détaille chaque fichier. Les spécifications publicitaires donnent les limites de chaque plateforme, notamment pour Google Ads et Adform, avec leurs sources.