« Bannière web » désigne deux choses : l’image large affichée en haut d’un site internet (on parle aussi de bandeau ou de hero), et l’annonce graphique diffusée sur d’autres sites pour générer des clics. Pour la première, il n’existe pas de taille normalisée : une image de 1920 px de large, au ratio prévu par votre thème, compressée en WebP, couvre la plupart des cas. Pour la seconde, les dimensions sont fixées par les régies : 300 × 250, 728 × 90 ou 970 × 250 px chez Google Ads, avec 150 Ko maximum.
L’outil ci-dessus recadre n’importe quelle image au bon format et au bon poids, directement dans votre navigateur. La suite de l’article détaille les dimensions par usage (site, Google Ads, réseaux sociaux), analyse des bannières réelles et explique le banner blindness, ce phénomène qui rend une bannière invisible même bien placée.
Pour une approche plus globale des leviers publicitaires, découvrez notre service publicité digitale.
Qu’est-ce qu’une bannière web ?
Une bannière web est un visuel statique, animé ou interactif intégré dans une page web en dehors de la zone de contenu centrale. Elle peut apparaître en haut de page (header), en bas de page (footer), en colonne latérale (sidebar) ou directement au sein du contenu éditorial (in-content). Ce dernier placement est aujourd’hui le plus performant.
L’objectif est unique : générer un clic vers une page de destination. Tout le design, le message et le format doivent servir cet objectif.
Quelques chiffres de référence pour calibrer les attentes. Le CTR moyen d’une bannière display est de 0,1 % sur le réseau Google Display en 2024, selon les données Google Ads compilées par WordStream. Les annonces de recherche payante affichent un CTR de 3 à 5 %. L’écart est massif, mais le coût par clic display est proportionnellement inférieur, ce qui maintient un ROAS correct sur les campagnes bien ciblées.
Le format publicitaire display est défini par l’IAB (Interactive Advertising Bureau), organisation professionnelle qui standardise les dimensions et les specs techniques pour faciliter la production et l’achat d’espace. Ces standards sont repris par Google Ads, Meta Ads et la majorité des régies publicitaires.
Bannière de site internet : quelle taille choisir ?
La bannière d’un site, c’est le grand visuel en haut de la page d’accueil ou d’une page service. Contrairement aux formats publicitaires, aucun organisme ne fixe sa taille : elle dépend de la mise en page de votre thème. En pratique, elle occupe toute la largeur de l’écran et le navigateur la recadre selon la taille de la fenêtre (propriété CSS object-fit: cover). Votre image sera donc rognée différemment sur un grand écran, un ordinateur portable et un téléphone.
Trois proportions reviennent dans la grande majorité des sites. Choisissez celle que prévoit votre thème (elle est souvent indiquée dans l’éditeur, sinon mesurez la zone à l’écran) et exportez l’image à 1920 px de large, une largeur qui couvre la plupart des écrans d’ordinateur sans alourdir inutilement la page.
| Type de bannière | Proportion | Taille d’export conseillée | Usage typique |
|---|---|---|---|
| Plein écran | 16:9 | 1920 × 1080 px | Page d’accueil immersive, photo d’ambiance |
| Bandeau d’en-tête | 3:1 | 1920 × 640 px | Haut de page service ou catégorie, avec un titre par-dessus |
| Bandeau fin | 4:1 | 1920 × 480 px | Haut d’article, page interne, bandeau promotionnel |
Les règles qui évitent une bannière floue, lourde ou coupée
- Le sujet au centre. Sur mobile, un bandeau 3:1 est fortement rogné sur les côtés. Gardez le visage, le produit ou le message dans le tiers central : la grille des tiers de l’outil ci-dessus aide à le vérifier.
- Le texte dans le code, pas dans l’image. Un titre incrusté dans la photo devient illisible sur téléphone, n’est pas lu comme du texte par Google et ne se traduit pas. Écrivez-le en HTML par-dessus l’image.
- Une image assez grande, jamais agrandie. Partez d’une photo au moins aussi large que la taille d’export. L’outil vous prévient si l’image doit être agrandie, ce qui la rend floue.
- Un poids maîtrisé. La bannière est souvent le plus grand élément visible au chargement, donc celui qui détermine le Largest Contentful Paint (LCP), l’un des Core Web Vitals suivis par Google. Exportez en WebP (ou AVIF si votre site le gère) et visez le poids le plus bas qui reste net.
- Pas de chargement différé sur la bannière. Google recommande de ne pas appliquer le lazy loading à l’image principale du haut de page, qui doit au contraire se charger en priorité.
- Un texte alternatif utile. Décrivez l’image en une phrase dans l’attribut alt, pour l’accessibilité et pour Google Images (voir notre guide de la balise alt).
Une bannière qui s’affiche vite et reste lisible sur mobile fait partie du travail de conception d’un site. Si la vôtre est lourde, floue ou mal recadrée sur téléphone, c’est souvent le thème lui-même qu’il faut revoir : c’est ce qu’on traite lors d’une refonte de site internet.
Dimensions des bannières sur les réseaux sociaux
Les réseaux sociaux appellent aussi « bannière » l’image de couverture d’une chaîne ou d’une page. Les dimensions ci-dessous sont celles publiées par les plateformes dans leurs pages d’aide (liens en fin d’article). Elles sont toutes disponibles dans l’outil en haut de page.
| Plateforme | Image | Dimensions | À savoir |
|---|---|---|---|
| YouTube | Bannière de chaîne | 2560 × 1440 px conseillé (2048 × 1152 px minimum) | Zone de sécurité de 1235 × 338 px au centre (au format minimal), seule partie visible sur tous les écrans. 6 Mo maximum. |
| Image de couverture d’une page entreprise | 1512 × 256 px | PNG ou JPG, 3 Mo maximum. | |
| X (Twitter) | Image d’en-tête du profil | 1500 × 500 px | JPG, PNG ou GIF. |
Pour Facebook, les dimensions de la photo de couverture varient selon l’appareil et Meta les fait évoluer : vérifiez-les dans l’aide de Facebook avant de créer votre visuel, et gardez l’essentiel au centre.
Dimensions des bannières publicitaires : Google Display, Pmax et Meta Ads
C’est la question la plus posée avant de lancer une campagne. Les tableaux IAB génériques circulent partout, mais ils ne répondent pas à ce que cherche un annonceur ou un graphiste en 2026 : quelles dimensions préparer pour quelle plateforme, avec quel poids de fichier et quel format.
Les trois plateformes majeures ont des logiques très différentes. Google Display accepte des bannières finies. Google Pmax fonctionne à base d’assets séparés que Google assemble lui-même. Meta Ads a ses propres formats, différents par placement et par réseau.
Google Display : les 8 formats IAB à maîtriser
Le réseau Display de Google couvre plus de 2 millions de sites partenaires. Les formats ci-dessous couvrent 90 % des emplacements disponibles. Le rectangle moyen 300×250 est le seul format à préparer en priorité absolue : il est accepté par la quasi-totalité des emplacements et génère le volume d’impressions le plus élevé.
| Nom IAB | Dimensions | Placement | Poids max | Formats acceptés | Performance |
|---|---|---|---|---|---|
| Rectangle moyen (Pavé) | 300 x 250 px | In-content, sidebar | 150 kb | JPG / PNG / GIF / HTML5 | Meilleure couverture, format prioritaire |
| Leaderboard | 728 x 90 px | Header de page | 150 kb | JPG / PNG / GIF / HTML5 | Forte visibilité avant scroll, desktop uniquement |
| Skyscraper large | 160 x 600 px | Sidebar | 150 kb | JPG / PNG / GIF / HTML5 | Bon en notoriété, faible sur mobile |
| Demi-page | 300 x 600 px | Sidebar, in-content | 150 kb | JPG / PNG / GIF / HTML5 | Espace créatif ample, conversion solide |
| Billboard | 970 x 250 px | Header grand angle | 150 kb | JPG / PNG / GIF / HTML5 | Impact visuel fort, emplacements limités |
| Grand rectangle | 336 x 280 px | In-content | 150 kb | JPG / PNG / GIF / HTML5 | Variante du pavé, légèrement plus visible |
| Bannière mobile | 320 x 50 px | Footer mobile | 150 kb | JPG / PNG / GIF / HTML5 | Standard mobile, format ancre discret |
| Grande bannière mobile | 320 x 100 px | Header mobile | 150 kb | JPG / PNG / GIF / HTML5 | Double hauteur mobile, meilleure visibilité |
Google Pmax : une logique d’assets, pas de bannières
Performance Max est une campagne Google qui achète des emplacements sur Search, Display, YouTube, Gmail et Discover depuis une seule interface. La différence fondamentale avec Display : vous n’uploadez pas des bannières finies. Vous fournissez des assets séparés (images, logos, titres, descriptions) et Google assemble lui-même les formats selon l’emplacement disponible et le signal de performance.
Cette logique a une conséquence directe sur la production : il faut penser en assets, pas en formats. Trois images sont obligatoires pour activer tous les emplacements Pmax.
| Asset | Dimensions | Poids max | Format | Obligatoire | Note |
|---|---|---|---|---|---|
| Image paysage | 1200 x 628 px | 5 Mo | JPG / PNG | Oui | Utilisée sur Display, YouTube, Gmail. Ratio 1.91:1. |
| Image carrée | 1200 x 1200 px | 5 Mo | JPG / PNG | Oui | Emplacements carrés Display et Gmail. Ratio 1:1. |
| Logo carré | 1200 x 1200 px | 5 Mo | JPG / PNG | Oui | Sur fond blanc ou transparent. Logo seul, sans slogan. |
| Logo paysage | 1200 x 300 px | 5 Mo | JPG / PNG | Non | Complément recommandé. Ratio 4:1. |
| Image portrait | 960 x 1200 px | 5 Mo | JPG / PNG | Non | YouTube Shorts, Stories mobiles. Ratio 4:5. |
Le texte dans les images Pmax doit occuper moins de 20 % de la surface. Google rejette automatiquement les assets avec trop de texte.
Meta Ads : formats par placement et par réseau
Meta Ads couvre Facebook et Instagram sur desktop et mobile, avec des formats différents par placement. La règle des 20 % de texte maximum s’applique également : Meta limite la diffusion des visuels trop chargés en texte, même s’il ne les bloque plus automatiquement depuis 2021.
Deux assets couvrent l’essentiel des emplacements Meta : le carré 1080×1080 pour les fils d’actualité, et le portrait 1080×1920 pour les Stories et Reels.
| Placement | Réseau | Dimensions | Poids max | Format | Note |
|---|---|---|---|---|---|
| Fil d’actualité | Facebook + Instagram | 1080 x 1080 px | 30 Mo | JPG / PNG | Format universel Meta. |
| Stories | Facebook + Instagram | 1080 x 1920 px | 30 Mo | JPG / PNG | Marge de sécurité : 250 px haut et bas sans éléments clés. |
| Reels | Facebook + Instagram | 1080 x 1920 px | 4 Go | MP4 / MOV | Vidéo plein écran. Les 3 premières secondes sont décisives. |
| Colonne droite | Facebook desktop | 1200 x 628 px | 30 Mo | JPG / PNG | CPC plus bas, moins visible. Complément de campagne. |
| Marketplace | 1200 x 1200 px | 30 Mo | JPG / PNG | Audience en mode achat. Placement sous-exploité. | |
| Résultats de recherche | 1080 x 1080 px | 30 Mo | JPG / PNG | Placement spécifique à la recherche Facebook. |
Quel format choisir pour votre campagne ? Sélecteur interactif
Les tableaux ci-dessus couvrent tous les cas. Mais si vous préparez une campagne spécifique et que vous voulez aller droit au but, le sélecteur ci-dessous filtre les formats recommandés selon votre plateforme, votre appareil cible et votre objectif.
Il intègre les recommandations de format selon l’objectif de campagne : les formats optimaux ne sont pas les mêmes en notoriété, en conversion et en remarketing, même sur une plateforme identique.
Analyse de bannières web réelles : ce qui fonctionne et pourquoi
Les galeries d’exemples de bannières se multiplient en ligne. Ce qui manque, c’est l’analyse structurée. Voici deux bannières web annotées selon une grille de 5 critères : identité de marque, proposition de valeur, appel à l’action, ratio texte/visuel, et cohérence supposée avec la landing page. Cette grille est applicable à n’importe quelle bannière avant de valider une création.
Exemple 1 : bannière statique BMW
Format identifié : rectangle moyen, 300 x 250 px. Format Google Display le plus courant, adapté au placement in-content et sidebar.
Identité de marque : logo BMW positionné en haut à droite, immédiatement identifiable. La charte couleur est respectée (noir, blanc, reflets). Score : 5/5.
Proposition de valeur : visuel produit centré, sans surcharge textuelle. Le modèle est reconnaissable sans légende. La bannière mise sur la désirabilité du produit plutôt que sur une offre chiffrée. Score : 4/5. Le modèle exact n’est pas identifié, ce qui peut créer une discontinuité sur la landing page si elle présente un autre modèle.
Appel à l’action : présent et visible, contraste suffisant. Score : 4/5.
Ratio texte/visuel : moins de 15 % de texte. Bien en dessous des limites Google Ads (20 %) et Meta Ads. Score : 5/5.
Cohérence landing page : une bannière automobile sans mention de modèle précis doit impérativement atterrir sur une page de modèle spécifique, pas sur la homepage de la marque. C’est le point de vigilance principal sur ce type de création.
Exemple 2 : bannière animée Grim Occasion
Format identifié : rectangle moyen animé au format GIF, 300 x 250 px. Le GIF est le format d’animation le plus compatible tous emplacements Display.
Identité de marque : logo visible à chaque frame de l’animation. La séquence ne démarre pas sans identification de la marque. Score : 5/5.
Proposition de valeur : l’animation permet de dérouler plusieurs messages successifs là où un format statique en contiendrait un seul. Utilisé ici pour présenter plusieurs offres ou modèles. Score : 4/5.
Appel à l’action : présent sur la frame finale. Point d’attention : le CTA doit apparaître sur la dernière frame et rester affiché. Une animation qui reboucle sans marquer de pause sur le CTA fait perdre des clics. Score : 3/5 sur ce critère selon l’implémentation.
Ratio texte/visuel et poids de fichier : les GIF animés doivent rester sous 150 kb pour Google Display. Un GIF avec plusieurs frames peut dépasser rapidement cette limite. L’optimisation du poids (réduction de palette de couleurs, compression) est souvent le point technique le plus sensible sur ce format. Score : variable selon la version finale livrée.
Règle Google Ads sur l’animation : la durée d’animation est limitée à 30 secondes. Au-delà de 3 boucles, la bannière doit s’arrêter sur la frame finale. Cette règle est souvent ignorée et peut entraîner un refus de diffusion.
Ce que doit contenir une bannière web efficace
Trois éléments sont obligatoires dans toute bannière, quelle que soit la plateforme ou le format.
Le logo ou le nom de la marque, visible sans avoir à chercher. L’internaute doit identifier l’annonceur en moins d’une seconde. Une bannière sans identification de marque génère des clics non qualifiés et détériore le score de qualité sur Google.
Un message court et une seule proposition de valeur. Pas une liste de services, pas un catalogue. Un seul bénéfice, exprimé en 5 à 7 mots maximum. Sur un rectangle moyen 300×250, l’espace disponible pour du texte lisible est minimal. Chaque mot qui s’ajoute est un mot qui diminue la lisibilité.
Un CTA visible et contrasté. Le bouton d’appel à l’action doit être identifiable instantanément. La formulation doit être directe : « Voir l’offre », « En savoir plus », « Réserver ». Les CTA vagues comme « Cliquez ici » sous-performent par rapport aux CTA qui nomment l’action concrète.
Un quatrième élément est facultatif mais performant : un élément de réassurance (note client, nombre d’utilisateurs, label qualité). Sur les formats avec de l’espace (demi-page 300×600, billboard 970×250), ce type d’élément améliore le taux de clic en contexte de notoriété faible.
Ce qu’il faut éviter : plus de deux polices différentes, des couleurs de fond qui n’appartiennent pas à la charte de la marque, et les animations sans fin sur les bannières GIF. Selon les guidelines Google Ads, une animation qui boucle plus de 3 fois nuit à l’expérience utilisateur et peut être refusée à la diffusion. Pour intégrer des bannières dans une stratégie complète, consultez notre service stratégie digitale.
Banner blindness : pourquoi les internautes ignorent vos bannières (et comment l’éviter)
Le banner blindness est un phénomène documenté dès 1998 par les chercheurs Benway et Lane, et confirmé depuis par des dizaines d’études en eye tracking. Le principe : après une exposition répétée aux bannières web, le cerveau humain apprend à les ignorer de façon automatique et inconsciente, avant même d’en avoir lu le contenu.
Selon une étude du Nielsen Norman Group (2018, toujours citée comme référence dans les études plus récentes), les internautes ignorent non seulement les bannières, mais aussi tout contenu qui ressemble à une bannière, y compris parfois des éléments de navigation ou du contenu éditorial positionnés dans les zones traditionnellement occupées par la publicité.
La conséquence directe sur les campagnes : un CTR de 0,1 % n’est pas uniquement lié à un mauvais ciblage ou à un mauvais créatif. Une partie de l’audience ne voit littéralement pas la bannière, quelle que soit sa qualité.
Les placements qui amplifient le banner blindness
Le placement en sidebar est le plus touché. Les colonnes latérales des sites web sont la zone la plus filtrée par le cerveau, précisément parce que c’est là que les bannières ont toujours été. Un skyscraper 160×600 en sidebar d’un site d’actualités est quasi-invisible pour un lecteur régulier du site.
Le header leaderboard (728×90) est dans une meilleure position : sa visibilité dépend du moment où l’internaute charge la page, avant de scroller. En revanche, sur les sites avec un contenu riche, le scroll est immédiat et la bannière header n’est plus visible en quelques secondes.
Ce qui contourne le banner blindness
Le placement in-content est la réponse la plus efficace documentée. Un rectangle moyen 300×250 placé dans le corps d’un article, entre deux paragraphes, s’inscrit dans le flux de lecture naturel. L’oeil le rencontre sans l’avoir « attendu ». C’est la raison pour laquelle ce format génère un CTR systématiquement supérieur au même format en sidebar.
Le remarketing dynamique contourne le blindness par la personnalisation. Une bannière qui affiche exactement le produit consulté 10 minutes plus tôt sur un autre site capte l’attention parce qu’elle est pertinente et reconnaissable. Selon les données Google Ads, les campagnes de remarketing display affichent un CTR 2 à 3 fois supérieur aux campagnes de prospection à budget équivalent.
L’animation au scroll (apparition progressive de la bannière lorsque l’internaute atteint sa position) est plus efficace que l’animation en boucle permanente. Le mouvement au bon moment capte l’oeil ; le mouvement permanent est filtré après quelques secondes exactement comme une bannière statique.
Google Pmax a été conçu en partie pour répondre au banner blindness : en laissant l’algorithme choisir le meilleur emplacement, le meilleur format et le meilleur moment selon le profil de chaque utilisateur, il contourne le problème du placement fixe qui génère le blindness. C’est l’une des raisons pour lesquelles Pmax tend à surperformer les campagnes Display standard sur les objectifs de conversion, au prix d’un contrôle créatif réduit.
Le native advertising est l’extension logique de cette réflexion : des formats publicitaires qui épousent visuellement le contenu éditorial du site hôte. Le CTR est supérieur aux formats display standards, mais le format exige une production spécifique par support de diffusion. Pour une stratégie qui intègre ces leviers, consultez notre service référencement naturel qui travaille en complémentarité avec les campagnes payantes.
Ce que le banner blindness change dans la création
La conséquence opérationnelle est claire : une bannière qui ressemble à toutes les autres a moins de chances d’être vue. Les éléments qui créent une rupture visuelle dans le flux de navigation performent mieux. Un fond noir sur un site majoritairement blanc. Une image de visage qui regarde vers le CTA (effet d’orientation du regard documenté en eye tracking). Une animation déclenchée au premier affichage plutôt qu’en boucle continue.
C’est aussi pourquoi les exemples de bannières « inspirantes » partagés en ligne sont souvent des contre-exemples opérationnels : ils sont visuellement remarquables dans un contexte d’article de blog, mais ils répliquent des codes graphiques déjà vus des milliers de fois dans un vrai contexte de diffusion.
Contraintes techniques à respecter avant de lancer une campagne
Les erreurs techniques sont la première cause de refus de diffusion sur Google Ads et Meta Ads. Voici les points de contrôle à valider avant d’envoyer un fichier en prod.
Poids de fichier : 150 kb maximum pour les bannières Google Display (JPG, PNG, GIF, HTML5). 5 Mo pour les assets image Pmax. 30 Mo pour les images Meta Ads. Les fichiers trop lourds ralentissent le chargement de la page hôte, ce qui pénalise l’éditeur et entraîne un refus automatique.
Formats de fichier : JPG et PNG pour les bannières statiques. GIF pour les bannières animées sur Display (attention au poids). HTML5 pour les bannières interactives ou les animations complexes sur Display. MP4 ou MOV pour les vidéos Meta Ads et YouTube. Le format Flash n’existe plus : aucune plateforme publicitaire ne l’accepte.
Animation sur Google Display : 30 secondes maximum, et les GIF animés doivent tourner à moins de 5 images par seconde, selon les spécifications Google Ads des annonces illustrées importées.
Texte dans les visuels : restez sobre. Un visuel chargé de texte se lit mal dans les petits emplacements, et sur les annonces responsives Google assemble lui-même titres et images : mettez le message dans les champs de texte de l’annonce plutôt que dans l’image.
Zone de sécurité pour les Stories Meta : 250 px en haut et 250 px en bas de l’image 1080×1920 doivent rester libres de tout élément important. Ces zones sont masquées par l’interface de l’application (boutons, nom du compte, CTA swipe up).
Cohérence bannière / landing page : selon une étude Nielsen Norman Group, la discontinuité visuelle entre une bannière et sa landing page est l’une des principales causes de rebond immédiat. La charte graphique, le message et l’offre mentionnée dans la bannière doivent se retrouver immédiatement sur la page d’atterrissage, sans que l’internaute ait à chercher.
Questions fréquentes
Bannière web : dimensions, formats et exemples
Une bannière web est une annonce graphique (image statique, GIF animé ou HTML5 interactif) intégrée dans une page web en dehors de la zone de contenu principale. Son objectif est de générer un clic vers une page de destination. Elle peut être diffusée sur le réseau Display de Google, via des campagnes Pmax, sur Meta Ads (Facebook et Instagram) ou sur des régies publicitaires indépendantes.
Les exemples les plus courants sont le rectangle moyen 300×250 (pavé) intégré dans le contenu éditorial, le leaderboard 728×90 en haut de page, le skyscraper large 160×600 en sidebar, et la demi-page 300×600 pour les formats plus créatifs. Sur mobile, la bannière 320×50 et la grande bannière 320×100 sont les formats de référence.
Une bannière numérique est le terme générique pour désigner toute forme de publicité display en ligne : bannières web, formats display programmatiques, annonces Google Display et assets visuels des campagnes Performance Max. Le terme est synonyme de bannière web ou publicité display.
Les dimensions standards définies par l’IAB sont : 728×90 px (leaderboard, bandeau horizontal), 300×250 px (rectangle moyen), 160×600 px (skyscraper large), 300×600 px (demi-page) et 970×250 px (billboard). Sur mobile : 320×50 px et 320×100 px. Ces formats sont acceptés par Google Ads avec un poids maximum de 150 kb.
Pour le réseau Google Display, la taille maximale est de 150 kb pour les formats image (JPG, PNG, GIF) et HTML5. Pour les assets Google Pmax, la limite est de 5 Mo par image. L’animation GIF est limitée à 30 secondes et 3 boucles maximum selon les règles Google Ads.
Il n’existe pas de taille normalisée : elle dépend du thème. Exportez l’image à 1920 px de large, au ratio prévu par votre thème (16:9 pour un plein écran, 3:1 ou 4:1 pour un bandeau), compressez-la en WebP et gardez le sujet au centre, car le navigateur rogne les côtés sur mobile.
YouTube conseille 2560 × 1440 px, avec un minimum de 2048 × 1152 px et 6 Mo maximum. Le texte et le logo doivent tenir dans la zone de sécurité centrale (1235 × 338 px au format minimal), seule partie visible sur tous les appareils.
