L’essentiel en bref
- Une image d’en-tête d’email standard fait 1200 par 600 pixels, affichée en 600 pixels de large pour rester nette sur les écrans à haute densité.
- La prise en charge des dégradés CSS varie selon les clients de messagerie : un en-tête en dégradé est donc en général une image, avec une couleur de fond unie en repli.
- Certains clients de messagerie bloquent les images par défaut : chaque en-tête a donc besoin d’un texte alternatif descriptif et d’une couleur de fond derrière lui.
- Le mode sombre peut changer les couleurs autour d’un en-tête mais en général pas à l’intérieur de l’image : concevez donc des en-têtes avec leur propre fond et testez dans les deux modes.
- Placez les mots importants comme les offres, les dates et les appels à l’action dans du texte HTML vivant sous l’en-tête, pas seulement dans l’image.
Sur cette page
Un bon design d’en-tête d’email commence par les contraintes de la boîte de réception. Faites l’image d’en-tête à 1200 par 600 pixels et affichez-la en 600 pixels de large, pour qu’elle soit nette sur les écrans à haute densité. Comme les clients de messagerie gèrent les dégradés CSS de façon inégale, placez le dégradé dans l’image et définissez derrière une couleur de fond unie assortie. Ajoutez un texte alternatif descriptif pour les lecteurs qui ont désactivé les images, vérifiez le rendu en mode sombre, et gardez les mots importants en texte vivant sous l’image.
Ce guide couvre les tailles, l’image contre le CSS, le mode sombre, le poids et le texte alternatif, avec du HTML que vous pouvez adapter. Pour le côté technique des dégradés dans un email HTML, voyez les dégradés dans les emails.
La taille d’un en-tête d’email
La plupart des mises en page d’email font environ 600 pixels de large, une largeur qui tient confortablement dans les volets de lecture des ordinateurs et se réduit bien sur mobile. Exportez les en-têtes au double, 1200 par 600, et réglez la largeur d’affichage de l’image sur 600 dans le HTML. Le format 2:1 laisse la place à un court titre ou à un logo sans repousser le contenu sous la ligne de flottaison sur mobile.
En-tête d’email 1200×600
1200 × 600
Signature d’email 600×200
600 × 200
Bannière de blog 1200×600
1200 × 600
Image ou CSS : comment construire un en-tête d’email en dégradé
Sur le web, un dégradé tient en une ligne de CSS. Dans un email, c’est moins fiable : certains clients rendent background-image: linear-gradient(...), d’autres l’ignorent. Voici les options pratiques.
| Approche | Comment ça marche | Compromis |
|---|---|---|
| En-tête en image | Le dégradé et tout visuel intégrés dans une image de 1200×600 | Identique partout où les images se chargent ; les mots qu’elle contient disparaissent si les images sont désactivées |
| Dégradé CSS et texte vivant | Une cellule de tableau avec un fond en dégradé et du texte HTML par-dessus | Léger et accessible ; retombe sur une couleur unie là où les dégradés ne sont pas pris en charge |
| Hybride | Une image en dégradé pour l’ambiance, du texte vivant pour le message dessous ou sur un repli uni | Le plus robuste : toujours lisible, en général beau |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Concevoir des en-têtes d’email pour le mode sombre
En mode sombre, de nombreuses applis de messagerie changent les couleurs de l’email autour de votre en-tête : les fonds blancs peuvent devenir sombres et le texte sombre devenir clair. Les images sont en général laissées telles quelles. Cela crée deux problèmes classiques : un en-tête à fond blanc qui brille comme une boîte lumineuse dans une boîte de réception sombre, et un logo transparent en encre sombre qui disparaît sur un fond devenu sombre.
À éviter
- Des en-têtes à fond blanc pur
- Des logos PNG transparents en encre sombre
- Des mots importants seulement dans l’image
- Un texte fin et clair sur un dégradé pâle
À faire
- Un en-tête avec son propre fond moyen ou profond
- Des logos sur une forme unie, ou une version claire et une version sombre
- Le message répété en texte vivant
- Un fort contraste dans l’image elle-même
Les dégradés moyens à profonds comme ceux-ci sont le choix le plus sûr. Ils n’éblouissent pas dans une boîte sombre, et le texte blanc qu’ils portent reste lisible dans les deux modes. Le design en mode sombre couvre les principes plus larges.
Poids, texte alternatif et mots qui comptent
Gardez les images d’en-tête légères : exportez en JPEG pour les dégradés photographiques ou granuleux et en PNG pour les visuels à plat avec du texte, et compressez-les. De grands dégradés lisses peuvent former des bandes s’ils sont fortement compressés, et un peu de grain dans le design les aide à survivre ; voyez le banding des dégradés.
Écrivez un texte alternatif qui dit ce que dit l’en-tête, pas à quoi il ressemble : Sélection d’automne : de nouvelles couleurs pour la saison, pas bannière violette. Stylez les propriétés de police de l’image pour que le texte alternatif s’affiche à une taille et dans une couleur lisibles sur le fond de repli quand les images sont désactivées.
Un en-tête de newsletter en 1200 par 600 : titre de la publication, numéro et une ligne.
Un en-tête d’annonce : le message est assez court pour être répété en texte vivant dessous.
Checklist de l’en-tête d’email
- 1
Concevez en 1200 par 600
Affichez en 600 de large. Gardez des mots assez grands pour se lire sur mobile à cette taille.
- 2
Donnez-lui son propre fond
Ni blanc pur ni transparence sur les bords, pour que le mode sombre ne puisse pas en faire une boîte lumineuse.
- 3
Définissez une couleur de repli
Un
bgcolorsur la cellule dans une couleur du dégradé, pour que les images bloquées restent fidèles à la marque. - 4
Écrivez un vrai texte alternatif
Le message, pas une description de l’image.
- 5
Répétez le message en texte vivant
Dates, offres et appels à l’action en texte HTML sous l’en-tête.
- 6
Testez dans les deux modes
Envoyez des emails de test aux applis qu’utilisent vos lecteurs, en mode clair et sombre, images activées et désactivées.
Dans Gradiently, les tailles En-tête d’email (1200 par 600) et signature (600 par 200) sont intégrées, et copier vers les tailles transforme un post social terminé en en-tête assorti pour votre email du jour de lancement.
Les questions qu’on nous pose
Quelle taille pour un en-tête d’email ?
1200 par 600 pixels, affiché en 600 pixels de large dans le HTML de l’email. La double résolution le garde net sur les écrans à haute densité.
Les dégradés CSS fonctionnent-ils dans un email ?
Dans certains clients de messagerie, pas tous. Mettez le dégradé dans une image ou utilisez du CSS avec un repli bgcolor uni, et testez dans les applis qu’utilisent vos lecteurs.
Comment faire fonctionner un en-tête d’email en mode sombre ?
Donnez à l’en-tête son propre fond moyen ou profond plutôt que blanc ou transparent, gardez un fort contraste dans l’image et répétez les mots importants en texte vivant.
Que doit dire le texte alternatif d’un en-tête d’email ?
Ce que dit l’en-tête, comme le titre ou l’offre, pour que les lecteurs dont les images sont bloquées reçoivent quand même le message.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
