Taille de bannière email et guide des images d’en-tête
Choisissez la largeur de votre email et la hauteur de la bannière. Vous obtenez la taille d’export pour des images nettes, un aperçu et le code de l’image, et vous pouvez redimensionner votre propre bannière dans le navigateur. Gratuit, sans inscription, aucun fichier n’est envoyé sur un serveur.
Le guide des tailles nécessite JavaScript : exportez à deux fois la largeur affichée dans l’email, en général 1 200 px pour un email de 600 px.
Quelle taille pour une bannière email ?
Aussi large que votre email, exportée au double de cette largeur. La plupart des templates d’email font 600 px de large : c’est une convention plutôt qu’une norme. Une bannière pleine largeur s’affiche donc à 600 px et s’exporte à 1 200 px pour les écrans haute densité.
À vous de choisir la hauteur. Le message doit rester visible sans faire défiler l’écran d’un téléphone : une bannière de 600 × 300 s’y affiche environ deux fois plus petite.
Une bannière qui fonctionne
- Export 2× : 1 200 px de large pour un email de 600 px
- Attribut width renseigné, pour qu’Outlook sous Windows garde la taille
- Texte alternatif qui reprend le message de l’image
- JPG pour les photos, PNG pour les logos et le texte
- Votre message présent uniquement dans une image
Tailles de bannière courantes
Pour un template de 600 px. Cliquez sur une taille dans l’outil pour la prévisualiser.
| Bannière | Taille affichée | Taille d’export (2×) | Convient pour |
|---|---|---|---|
| En-tête logo | 600 × 100 | 1200 × 200 | Bandeau de marque au-dessus du contenu |
| Bannière d’en-tête | 600 × 200 | 1200 × 400 | Newsletters, annonces courtes |
| Image hero | 600 × 300 | 1200 × 600 | Événements, webinars, lancements |
| Image hero haute | 600 × 400 | 1200 × 800 | Un produit ou une personne au premier plan |
Créez la bannière en quatre étapes
De la maquette à une image nette et légère dans votre template.
- 1
Concevez à la taille d’affichage
Mettez-la en page à 600 px de large, avec un texte assez grand pour se lire sur un téléphone.
- 2
Exportez en 2×
1 200 px de large. JPG pour les photos, PNG pour les aplats de couleur et le texte.
- 3
Vérifiez le poids
Ouvrez le fichier dans l’outil ci-dessus : il affiche le poids en Ko et peut redimensionner un fichier plus grand à la largeur d’export.
- 4
Intégrez-la avec le code fourni
Utilisez le code de l’image : attribut width, max-width et height:auto, ainsi que le texte alternatif.
Avant l’envoi
Quatre pièges qui gâchent une bannière une fois le design terminé.
- Pardot et Marketing Cloud Next. Account Engagement (Pardot) et Marketing Cloud Next envoient tous deux le HTML que contient votre template : c’est donc la largeur du template qui fixe celle de la bannière. Importez le fichier 2× et définissez la largeur affichée dans les paramètres de l’image ou dans le HTML.
- WebP et AVIF. Tous les clients email ne les affichent pas. Tableau de compatibilité sur caniemail.com (s’ouvre dans un nouvel onglet)
- Troncature Gmail. Gmail coupe les emails dont le HTML dépasse environ 102 Ko (Google ne documente pas ce chiffre). Les images hébergées n’entrent pas dans le calcul ; le code intégré au message, si. Spam Resource (s’ouvre dans un nouvel onglet)
- Images désactivées. Certains lecteurs ne voient que le texte alternatif. Mettez le titre et le bouton en texte HTML, pas dans la bannière.
Plus d’outils gratuits
FAQ sur la taille de bannière email
Des réponses courtes aux questions fréquentes sur la taille des bannières et des images d’en-tête.
Quelle est la meilleure taille de bannière email ?
Pour un template de 600 px : une bannière de 600 px de large, d’une hauteur adaptée au message, exportée à 1 200 px de large pour rester nette sur les écrans haute densité.
Quelle taille pour une image d’en-tête d’email ?
En général, toute la largeur du template, soit 600 px, et 100 à 200 px de haut pour un logo ou une bannière d’en-tête. Exportez-la au double de cette taille.
Pourquoi ma bannière est-elle floue ?
Elle a été exportée à sa taille d’affichage. Les smartphones et la plupart des ordinateurs portables ont au moins deux pixels physiques par pixel CSS : exportez donc au double de la largeur affichée.
Pourquoi ma bannière est-elle énorme dans Outlook ?
Outlook sous Windows ignore max-width et affiche le fichier à sa taille réelle. Indiquez la largeur affichée dans l’attribut width de la balise img.
Quel format de fichier choisir ?
JPG pour les photos, PNG pour les logos, les aplats de couleur et le texte, GIF pour les animations simples. Toutes les messageries n’affichent pas le WebP et l’AVIF.
Mon image est-elle mise en ligne ?
Non. L’outil la lit et la redimensionne directement dans votre navigateur ; rien ne nous est envoyé.
Avec nous, Salesforce Marketing travaille pour vous
Parlez à un consultant certifié, pas à un commercial, et sortez du premier appel en sachant quelle est votre prochaine étape.