# Bannières publicitaires animées : un mouvement au service du message

[Canonical HTML page](https://gradiently.design/fr/guide/animated-banner-ads)

Une bannière obtient un regard du coin de l’œil. Le mouvement peut gagner ce regard, puis il doit passer la main à un message assez simple pour se lire en une seconde.

## The short version

- Les bannières publicitaires animées efficaces suivent en général un court storyboard en trois images : une accroche, la proposition de valeur, puis la marque et l’appel à l’action.
- La dernière image d’une bannière animée doit fonctionner seule, car beaucoup de régies limitent la durée ou le nombre de lectures de l’animation.
- Les formats display courants incluent 300×250, 728×90, 300×600, 160×600 et 320×50 pixels.
- Les bannières animées sont généralement livrées en paquets HTML5 ou en GIF, et les régies imposent des limites de poids strictes pour les deux.
- Le mouvement d’une bannière doit attirer l’œil une fois, puis laisser les mots immobiles assez longtemps pour être lus.

Les bonnes **bannières publicitaires animées** utilisent le mouvement pour accrocher l’œil une fois, puis s’effacent devant le message. La structure fiable tient en trois images : une accroche, la proposition de valeur, et une image finale avec la marque et un appel à l’action clair qui reste à l’écran. Gardez la séquence courte, faites en sorte que cette dernière image fonctionne seule comme une publicité fixe, et gardez un fichier léger, car les régies limitent à la fois la durée de l’animation et le poids du fichier.

## Le storyboard en trois images

Les bannières se voient en passant, à côté de ce que le lecteur est réellement venu chercher. Personne n’attend la fin d’une bannière. Préparez la séquence pour que chaque image ait du sens seule et que leur ordre raconte une toute petite histoire.

1. **Image 1 : l’accroche** Une ligne courte ou une image frappante. Son seul rôle est de faire regarder. « Votre bureau, plus calme. » Deux à trois secondes.
2. **Image 2 : la valeur** Ce que vous proposez, dans les mots du lecteur. « Des goulottes de câbles pour tous les bureaux. » Deux à trois secondes.
3. **Image 3 : l’image finale** Logo, offre en bref et appel à l’action en forme de bouton. « Voir la gamme. » Cette image reste jusqu’à l’arrêt de la publicité.

Image de publicité carrée avec l’accroche Votre bureau, plus calme sur un dégradé qui bouge lentement

Première image : une accroche en quatre mots sur une couleur en mouvement. Rien d’autre ne lui fait concurrence.

Image finale carrée montrant un nom de marque, une courte ligne de valeur et l’appel à l’action Voir la gamme

L’image finale : marque, valeur et appel à l’action ensemble. Si c’est tout ce que l’on voit, la publicité fonctionne quand même.

Le même storyboard fonctionne pour les publicités sociales, qui sont souvent de courtes vidéos plutôt que des bannières. Le [design de publicité Facebook](https://gradiently.design/fr/guide/facebook-ad-design) et le [design de publicité Instagram](https://gradiently.design/fr/guide/instagram-ad-design) couvrent ces formats.

## Rythme et boucles des bannières animées

Beaucoup de régies et d’éditeurs limitent la durée de l’animation et le nombre de boucles, et ces limites varient. Google Ads, par exemple, limite les publicités animées importées à 30 secondes d’animation. Vérifiez la spécification en vigueur de chaque régie que vous utilisez, et concevez la publicité pour qu’elle se termine sur son image la plus forte, quelle que soit la limite.

| Partie | Durée | Règle |
| --- | --- | --- |
| Image d’accroche | 2 à 3 secondes | Mots courts, grand texte |
| Image de valeur | 2 à 3 secondes | Un bénéfice, pas une liste |
| Image finale | Reste affichée | Marque, offre et appel à l’action, lisibles comme une image fixe |
| Transitions | 300 à 500 ms | Rapides et cohérentes ; un seul style pour toutes les images |
| Séquence entière | Environ 6 à 10 secondes par lecture | Assez courte pour boucler quelques fois dans les limites |

Une règle simple pour le temps de lecture : si vous ne pouvez pas lire une image deux fois à voix haute avant qu’elle change, laissez-la plus longtemps ou coupez des mots.

> **Évitez les flashs et le mouvement frénétique** Les flashs rapides sont désagréables et peuvent être dangereux pour les personnes atteintes d’épilepsie photosensible, et les régies les refusent souvent. Faites bouger couleurs et texte en douceur, jamais plus vite que l’œil ne peut suivre.

## Formats standard de bannières publicitaires

Les réseaux display utilisent un ensemble de formats standard. Une campagne en couvre généralement plusieurs : concevez donc un système plutôt qu’une publicité, une mise en page qui se réorganise pour les emplacements larges, hauts et petits en gardant les mêmes mots, la même couleur et le même mouvement.

- Pavé: 300 × 250
- Demi-page: 300 × 600
- Skyscraper large: 160 × 600
- Leaderboard: 728 × 90
- Bannière mobile: 320 × 50

Les formats display courants à l’échelle. Les emplacements très larges et très bas demandent moins de mots et une image finale plus simple.

| Taille (px) | Nom | Ce qui y tient |
| --- | --- | --- |
| 300×250 | Pavé | L’histoire complète en trois images ; un bon format de référence |
| 300×600 | Demi-page | De la place pour une image au-dessus des mots |
| 160×600 | Skyscraper large | Des mots empilés, deux ou trois par ligne |
| 728×90 | Leaderboard | Une ligne par image, logo et bouton côte à côte |
| 320×50 | Bannière mobile | Accroche et bouton seulement ; le logo peut servir d’accroche |

Concevez d’abord le 300×250, puis adaptez. Éditeurs et régies demandent souvent aussi des versions en double densité.

## GIF ou HTML5 pour les bannières animées

La plupart des réseaux display acceptent les publicités animées en GIF ou en HTML5, un petit paquet de HTML, CSS, JavaScript et images. Le HTML5 offre un mouvement plus fluide, un texte net à toutes les densités et toutes les couleurs, et convient aux publicités plus riches. Le GIF est plus simple à produire et accepté presque partout, mais sa limite de 256 couleurs crée des bandes dans les dégradés. Les limites de poids sont serrées pour les deux, mesurées en kilo-octets plutôt qu’en méga-octets, donc vérifiez la spécification de chaque régie.

Si vous choisissez le GIF, les techniques des [GIF animés](https://gradiently.design/fr/guide/gif-maker-tips) réduisent le poids : moins d’images, une palette construite à partir de l’animation et aussi peu de surface en mouvement que possible. Pour le mouvement lui-même, un [easing](https://gradiently.design/fr/guide/easing) cohérent sépare une bannière soignée d’une bannière saccadée.

## Les règles de design qui font fonctionner une bannière

### À éviter

- Quatre ou cinq images de texte
- Un petit texte sur un mouvement rapide et chargé
- Le logo seulement sur la première image
- Un style d’animation différent pour chaque élément
- Une image finale sans appel à l’action clair

### À faire

- Trois images, quelques mots chacune
- Un grand texte sur une couleur lente et calme
- La marque sur l’image finale qui reste
- Un seul style de transition du début à la fin
- Un appel à l’action en forme de bouton sur la dernière image

Un fond singulier est le moyen le moins cher d’être reconnu sur toute une campagne. Quand le même champ de couleur bouge derrière chaque image et chaque format, les gens associent le mouvement à vous avant de lire un mot. Testez des variantes de l’accroche plutôt que de la publicité entière ; le [test de créations publicitaires](https://gradiently.design/fr/guide/ad-creative-testing) explique comment le faire équitablement.

Gradiently convient au volet social d’une campagne. Concevez l’accroche et l’image finale sur un Mark qui vous appartient, déclinez en 1080×1080, 1080×1350 et 1080×1920 en une étape avec Pro, et exportez chacun en MP4. Le Mark est rendu pour chaque format, donc sa zone calme reste derrière les mots à toutes les tailles.

## FAQ

### Quelle durée pour une bannière publicitaire animée ?

Une lecture d’environ 6 à 10 secondes convient à la plupart des bannières. Beaucoup de régies limitent la durée totale d’animation, Google Ads à 30 secondes pour les publicités animées importées, donc vérifiez la spécification de chacune.

### Combien d’images doit avoir une bannière animée ?

Trois est une structure fiable : une accroche, la valeur et une image finale avec la marque et l’appel à l’action. Plus d’images signifie généralement plus de mots que personne ne lira.

### Quelles sont les tailles de bannières publicitaires les plus courantes ?

300×250, 300×600, 160×600, 728×90 et 320×50 pixels font partie des formats display les plus utilisés. Commencez par le 300×250 et adaptez les autres à partir de lui.

### Bannière animée en GIF ou en HTML5 ?

Le HTML5 offre un mouvement plus fluide et un texte plus net, et convient aux publicités riches ; le GIF est plus simple et accepté presque partout, mais crée des bandes dans les dégradés. Les deux doivent respecter la limite de poids de la régie.

### Que doit montrer la dernière image d’une bannière ?

La marque, l’offre en bref et un appel à l’action clair, mis en page pour que l’image fonctionne comme une publicité fixe complète si l’animation s’arrête là.