Ressource

Production de bannières HTML5 : formats, process et tarifs

Les bannières HTML5 restent le format roi de la publicité display programmatique. Voici tout ce qu'il faut savoir pour produire des bannières efficaces, dans les règles de l'art.

Qu'est-ce qu'une bannière HTML5 ?

Une bannière HTML5 est un format publicitaire digital animé, codé en HTML, CSS et JavaScript. Elle a remplacé les anciennes bannières Flash (disparues en 2020) et les GIF animés (trop limités en qualité et en interactivité).

Ses avantages par rapport aux formats précédents :

  • Animations fluides à 60fpsCSS animations et requestAnimationFrame permettent des transitions douces que le GIF ne peut pas reproduire.
  • InteractivitéHover effects, carrousels, formulaires intégrés, vidéo HTML5 — la bannière peut engager l'utilisateur au-delà du simple clic.
  • Poids optimiséUne bannière HTML5 bien codée pèse 50 à 150 Ko, contre 500 Ko+ pour un GIF de qualité équivalente.
  • Responsive possibleLa bannière peut s'adapter à différentes tailles d'écran grâce au CSS, contrairement aux formats image fixes.
  • Compatibilité universelleFonctionne sur tous les navigateurs modernes, desktop et mobile, sans plugin.

Les formats standards de bannières HTML5

L'IAB (Interactive Advertising Bureau) définit les formats standards de la publicité display. Voici les formats les plus demandés en 2026 :

Formats desktop

  • Medium Rectangle (300×250)Le format le plus répandu. Intégré dans le corps du contenu éditorial. Taux de visibilité élevé.
  • Leaderboard (728×90)Bannière horizontale en haut de page. Bon taux de complétion d'animation grâce à son emplacement premium.
  • Demi-page (300×600)Grand format vertical, fort impact visuel. Idéal pour les campagnes de branding avec storytelling animé.
  • Billboard (970×250)Très grand format horizontal. Haute visibilité, souvent vendu en premium. Permet des animations ambitieuses.
  • Skyscraper (160×600)Format latéral vertical, souvent en sidebar. Moins demandé mais toujours présent dans les plans média.

Formats mobile

  • Mobile Banner (320×50)Le format mobile de base. Omniprésent en programmatique mobile.
  • Mobile Large Banner (320×100)Plus d'espace pour le message et l'animation. Meilleur taux d'engagement que le 320×50.
  • Mobile Interstitiel (320×480)Plein écran mobile. Fort impact mais attention aux bonnes pratiques Google (ne pas bloquer l'accès au contenu).
  • Mobile Medium Rectangle (300×250)Même format que desktop, très courant en in-app et in-feed mobile.

Formats rich media

Au-delà des formats standards, les bannières rich media offrent des fonctionnalités avancées :

  • ExpandableLa bannière s'agrandit au clic ou au hover pour révéler un contenu étendu. Format premium, fort engagement.
  • Vidéo HTML5 intégréeLecture automatique (muet) ou au clic. Idéal pour les teasers produit et les trailers.
  • Carrousel interactifNavigation entre plusieurs slides de produits. Très utilisé en e-commerce et retail.
  • DCO (Dynamic Creative Optimization)Contenu personnalisé dynamiquement selon l'audience, la géolocalisation ou le catalogue produit. Nécessite une architecture template + flux de données.

Le workflow de production de bannières HTML5

Produire des bannières HTML5 de qualité nécessite un process structuré. Voici les étapes clés :

1. Brief et dépouillement

Réception des maquettes design (Figma, Photoshop, PDF) ou du brief créatif. Dépouillement des formats : tableau récapitulatif de tous les formats à produire, poids maximum par format, spécifications de l'ad server cible, contraintes spécifiques (durée d'animation, nombre de boucles, call-to-action).

2. Développement HTML5

Codage des bannières en HTML5, CSS3 et JavaScript vanilla (ou avec des frameworks légers comme GSAP pour les animations complexes). Points d'attention :

  • Poids maximumGénéralement 150 Ko pour les formats standards (avant chargement des assets polite). Les ad servers rejettent les fichiers trop lourds.
  • Durée d'animation15 à 30 secondes maximum, 3 boucles maximum. Au-delà, la bannière doit s'arrêter sur le dernier frame.
  • ClicktagLe lien de redirection doit être géré dynamiquement via le clickTag de l'ad server, pas codé en dur.
  • Polite loadingLes assets lourds (images, vidéos) sont chargés après le chargement initial de la page pour ne pas impacter les Core Web Vitals.

3. QA et tests

Vérification sur chaque format : poids conforme, animations fluides, clickTag fonctionnel, rendu navigateurs (Chrome, Safari, Firefox, Edge), responsive le cas échéant. Test sur l'ad server cible avant livraison pour garantir la compatibilité.

4. Livraison et révisions

Archives ZIP structurées par format, prêtes à l'upload sur l'ad server. Fichiers source inclus. Deux tours de révisions standards inclus dans la plupart des devis.

Compatibilité ad servers

Chaque ad server a ses propres spécifications techniques. Les principaux que nous maîtrisons :

  • Google Campaign Manager 360 (CM360)L'ad server le plus utilisé en programmatique. Clicktag via Enabler.js, contraintes de poids strictes, validation automatique.
  • AdformAd server européen très répandu en France. Clicktag via dhtml.js, bonne documentation technique.
  • Sizmek (Amazon Ads)Rich media puissant, bon support des formats expandable et vidéo. SDK dédié pour les interactions avancées.
  • The Trade DeskDSP avec ad serving intégré. Formats standards HTML5, validation via leur outil de preview.
  • Xandr (AppNexus)Formats standards et custom. Bon support du DCO.

Tarifs de production de bannières HTML5

Les tarifs varient selon la complexité des animations, le nombre de formats et le volume. Ordres de grandeur :

  • Bannière standard animéeAnimation CSS/JS simple, 1 format : 150 à 300 € HT. Le tarif unitaire baisse significativement avec le volume (déclinaisons de formats à partir d'un master).
  • Set complet standard5 à 8 formats à partir d'une maquette design : 800 à 1 500 € HT.
  • Bannière rich mediaExpandable, vidéo intégrée, carrousel : 400 à 800 € HT par format.
  • Template DCOArchitecture template + intégration flux de données : 1 500 à 4 000 € HT selon la complexité.
  • Production en volume (forfait)Pour les agences avec des besoins réguliers : forfait mensuel avec tarifs dégressifs. Nous proposons des contrats cadre à partir de 2 000 € HT/mois.

Questions fréquentes

Nous pouvons travailler à partir de maquettes design (Figma, Photoshop, PDF), d'une charte graphique, ou même d'un brief créatif. Si vous n'avez pas de maquettes, nous pouvons concevoir le design en amont — c'est un poste supplémentaire dans le devis.

Le HTML5 est le standard pour la publicité display programmatique : léger, interactif, compatible avec tous les ad servers. La vidéo est pertinente pour les pré-rolls (YouTube, IPTV) ou les formats in-feed sociaux, mais pas pour le display classique. Pour le rich media, on peut intégrer de la vidéo HTML5 dans une bannière HTML5 — le meilleur des deux mondes.

Set standard (5-8 formats) : 3 à 5 jours ouvrés. Campagne volumineuse (20+ formats) : 7 à 10 jours. Service express sous 48h disponible avec surcoût. Les délais dépendent aussi de la rapidité de validation côté client.

Oui, c'est une grande partie de notre activité display. NDA systématique, livraison au nom de l'agence, communication directe avec le client final si besoin. Nous sommes le bras armé technique de nombreuses agences média et créatives.

De moins en moins. Le GIF est limité à 256 couleurs, ne supporte pas l'interactivité, et pèse beaucoup plus lourd que l'équivalent HTML5. La plupart des ad servers ne l'acceptent plus comme format principal. Il reste parfois utilisé comme fallback ou dans des contextes email, mais pour le display programmatique, le HTML5 est le standard.

Lancer une production de bannières

Envoyez-nous vos maquettes ou votre brief — devis sous 24h.

Voir notre expertise display →