Comment impressionner facilement chaque abonné avec une image de fond d'e-mail (+ le code pour le faire !)

Publié: 2021-07-23

Les e-mails peuvent sembler un peu prévisibles avec une image ici, un bloc de texte là… Une façon d'animer l'expérience de l'abonné ? Images de fond. Ils sont inattendus et ajoutent une autre dimension à votre conception, rendant vos e-mails « populaires ». Lorsqu'ils sont bien faits, ils donnent à votre e-mail l'impression d'être un million de dollars, mais sont incroyablement faciles à retirer.

Continuez à lire pour :

Les avantages des images d'arrière-plan
Exemples d'e-mails inspirants
Considérations sur la conception
Comment coder les images d'arrière-plan

Que sont les images d'arrière-plan ? (Et à quoi ça sert ?)

Les images d'arrière-plan sont des images appliquées à l'arrière-plan ou derrière un élément. Au lieu d'être un point central de l'e-mail, comme une image de héros, ils sont plus souvent subtils et complémentaires aux autres contenus de la campagne.

Le principal avantage de l'utilisation d'images d'arrière-plan est qu'elles vous permettent de placer du contenu HTML supplémentaire par-dessus. Contrairement à d'autres images, où seule l'image elle-même peut exister dans cet espace, les images d'arrière-plan offrent des possibilités de superposition, vous pouvez donc avoir des images, du texte ou des appels à l'action (CTA) supplémentaires dans ce même espace.

exemple de texte HTML en direct et d'un bouton pare-balles sur une image d'arrière-plan

L'utilisation de texte HTML en direct sur une image d'arrière-plan, au lieu d'inclure ce texte dans l'image, signifie que votre message est lisible lorsque les images sont désactivées, ce qui en fait une excellente technique pour créer des e-mails HTML meilleurs et plus accessibles.

En plus d'aider à créer des campagnes qui offrent une meilleure expérience de lecture, les images d'arrière-plan offrent également une multitude de possibilités de conception, distinguant votre campagne de la concurrence.

Manières créatives que les marques utilisent des images d'arrière-plan

Miro a placé une image d'arrière-plan contenant des formes derrière leur section de héros, attirant l'attention sur le titre principal et la messagerie de l'e-mail, qui sont superposés à l'aide de texte en direct.

E-mail Miro avec image d'arrière-plan — Source : de très bons e-mails

Les uplers ont utilisé une image d'arrière-plan pour mettre en évidence une remise sur leurs services, avec une image de coupon placée derrière un code de coupon.

Uplers email image d'arrière-plan pour le code de coupon — Source : de très bons e-mails

Figma a ajouté un motif de fond répétitif subtil au corps de cet e-mail, nous présentant son nouveau produit de tableau blanc. Le motif qu'ils présentent fait écho à l'arrière-plan trouvé dans le produit.

Image de fond Figma dans l'e-mail — Afficher cet e-mail dans Litmus Builder

Chipotle a placé une image d'arrière-plan géante derrière ce héros et cette zone du corps géants percutants, y compris une photographie de produit et un motif de ligne. Au-dessus de cette image, ils ont un GIF animé avec un arrière-plan transparent et du texte en direct dans la zone du corps.

Courriel Chipotle Friendsgiving avec une image d'arrière-plan subtile — Source : de très bons e-mails

Les GIF animés peuvent également être utilisés comme images d'arrière-plan, comme cet exemple d' Adobe Stock , faisant la promotion de collections festives avec un contenu de héros comprenant du texte en direct et un bouton CTA placé au-dessus de l'arrière-plan animé.

E-mail Adobe Stock avec image d'arrière-plan GIF animée — Source : de très bons e-mails

Considérations sur la conception

Lorsque vous envisagez de mettre en œuvre des images d'arrière-plan, certaines considérations de conception méritent d'être prises en compte.

Contraste

Pour garantir que tous les lecteurs obtiennent la valeur du contenu superposé sur les images d'arrière-plan, il est important de faire attention aux contrastes. Traitez l'image de la même manière que vous le feriez avec une couleur unie et testez les couleurs de votre image par rapport aux couleurs de votre contenu.

Si vous concevez à l'aide de Figma, vous pouvez ajouter des plugins tels que Color Blind et Contrast pour voir si vous respectez les directives d'accessibilité du contenu Web (WCAG). Il existe également un certain nombre d'applications Web, comme le vérificateur de contraste de WebAim, où vous pouvez tester les couleurs de vos conceptions.

Simplicité

Une autre façon d'assurer la lisibilité est de garder les choses simples. Les arrière-plans occupés peuvent rendre difficile l'obtention de la valeur de tout texte en direct que vous placez sur votre image. Il est donc souvent utile de considérer votre image d'arrière-plan comme une amélioration plutôt qu'une fonctionnalité.

Couleur unie de secours

Comme tous les clients de messagerie n'honorent pas les images d'arrière-plan, concevez une solution de secours de couleur unie. Les abonnés utilisant des clients de messagerie qui ne prennent pas en charge vos images peuvent toujours profiter d'une excellente expérience avec une couleur unie. Assurez-vous de choisir une couleur de secours qui correspond à votre conception et contraste bien avec ses éléments de premier plan.

Comment coder les images d'arrière-plan dans les e-mails

Avant de parcourir le code, voyons quels clients afficheront le style CSS d'arrière-plan et lesquels ont besoin de l'aide d'une solution de secours VML.

La bonne nouvelle : la prise en charge du CSS en arrière-plan s'est améliorée, les clients de messagerie Web prenant désormais entièrement en charge cette méthode, ce qui signifie que l'attribut HTML d'arrière-plan n'est plus requis.

La mauvaise nouvelle : Malheureusement, Windows 10 Mail n'aime tout simplement pas les images d'arrière-plan. Il ne rendra pas le CSS en ligne ou l'attribut d'arrière-plan HTML obsolète. Et l'application de VML entraînera des problèmes de rendu avec un message d'erreur « l'image ne peut pas être affichée ».

Si vous êtes préoccupé par l'expérience acquise par les abonnés Windows 10 Mail, envisagez de laisser de côté le VML. Cela garantit que les couleurs d'arrière-plan de secours offrent à votre public Microsoft Outlook Suite une excellente expérience de lecture des e-mails, sans décoration supplémentaire.

à quoi ressemblent les images d'arrière-plan des e-mails dans Windows 10 Mail

Support client de messagerie pour les images d'arrière-plan

Client de messagerie	Utilisation de CSS en ligne	Utilisation de VML
Apple Mail 14	✓	??
Office 365 (Mac)	✓	??
Office 365 (Windows)	??	✓
Outlook 2016 (macOS 10.12.6)	✓	??
Perspectives 2013, 2016, 2019 (Windows 10)	??	✓
Courrier Windows 10	??	??
Application Gmail (Android 10)	✓	??
Application Gmail (iOS 13.4.1)	✓	??
Outlook (Android 7.0)	✓	??
Outlook (iOS 12.0)	✓	??
Samsung Mail (Android 7.0)	✓	??
iPad 11 Air (Gen 4 iOS 14.2)	✓	??
iPhone 12 (iOS 14.2)	✓	??
AOL Mail (Edge)	✓	??
Gmail (Chrome)	✓	??
Bureau 365	✓	??
Outlook.com	✓	??
Yahoo! Courrier	✓	??

Quels clients de messagerie vos abonnés utilisent-ils ?

Jetez un œil à votre propre part de marché de clients de messagerie avec Litmus Email Analytics. Découvrez pour quels clients de messagerie vous avez besoin d'optimiser vos images d'arrière-plan. (Astuce : si Windows 10 Mail est faible, ne vous en faites pas.)

En savoir plus →

Maintenant que nous avons réglé cela, parlons code !

L'une des choses amusantes à propos de l'ajout d'images d'arrière-plan dans vos e-mails est qu'il existe différentes manières d'y parvenir. Vous pouvez remplir une petite section ou couvrir le corps de votre e-mail, utiliser une seule image ou un motif répété, et vous pouvez changer vos images d'arrière-plan selon que votre lecteur est sur ordinateur de bureau, mobile, mode clair, mode sombre ou même quand ils survolent ou survolent votre image.

Chaque technique nécessite une approche différente, alors examinons les meilleures façons de les coder.

Image d'arrière-plan à largeur définie ou fixe

fond à largeur fixe

Lors de l'application d'images d'arrière-plan, il est toujours préférable d'ajouter votre code à la cellule du tableau contenant. Il est peu probable que l'application à tout autre élément HTML tel que <table> ou <body> soit prise en charge par certains clients de messagerie. Voici à quoi cela devrait ressembler :

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Ici, l'image est adaptée à la largeur et à la hauteur de la cellule en incluant background-size:cover dans les styles CSS en ligne, puis positionnée au centre. L'ajout de ces styles vous permet d'utiliser une image 2x, ce qui signifie que vous verrez un rendu net sur les écrans Retina, et elle sera redimensionnée pour s'adapter parfaitement à votre conteneur, même lorsque le conteneur est redimensionné pour le rendu sur différents appareils.

Cependant, cela signifie également que si votre image est trop petite ou n'est pas dimensionnée proportionnellement au conteneur, elle peut sembler pixelisée ou étirée. Surtout s'il s'agit de photographie.

Votre image de fond fonctionne-t-elle ?

Découvrez comment notre code pour les images d'arrière-plan fonctionne dans votre propre e-mail sur les applications de messagerie les plus populaires telles que Gmail et Outlook.

En savoir plus →

Aujourd'hui, la plupart des clients de messagerie prennent en charge le style d'arrière-plan CSS en ligne, vous pouvez donc ajouter votre image d'arrière-plan et la couleur de secours à l'aide de la propriété CSS abrégée d'arrière-plan. En d'autres termes, appliquez-les simplement au style « arrière-plan ». Malheureusement, les styles d'arrière-plan supplémentaires ne fonctionnent pas très bien avec la sténographie lors du codage en ligne, de sorte que tout positionnement ou dimensionnement devrait être écrit en tant que styles distincts. Par exemple, en utilisant background-position: center; taille de l'arrière-plan : 80 % ; au lieu de l' arrière - plan : centre/80% ; .

Faire fonctionner cela dans Outlook avec une solution de secours VML

Outlook et Office 365 pour bureau ont également besoin d'un peu d'aide pour afficher les images d'arrière-plan, car ils ne rendront pas non plus les styles d'arrière-plan CSS. Pour que notre image d'arrière-plan s'affiche dans ces clients de messagerie, nous devons tirer parti d'une technique popularisée par Stig Morten Myre pour Campaign Monitor et appliquer le langage de balisage vectoriel (VML) de Microsoft.

En prenant le code que nous avons déjà créé, nous plaçons le VML requis et un <div> contenant à l'intérieur de notre cellule de tableau :

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Pour les images qui doivent remplir le conteneur sans se répéter, nous devons utiliser 'frame' dans la balise vml:fill. De cette façon, vous pouvez utiliser des images 2x dans cette balise. Assurez-vous simplement de définir la largeur de votre conteneur en utilisant le style en ligne sur la balise v:rect (dans l'exemple ci-dessus, elle est définie sur 600px).

Si vous souhaitez un rembourrage sur votre conteneur, vous pourriez trouver que le fait de placer le VML dans le conteneur fera s'effondrer le rembourrage. La façon dont nous résolvons ce problème consiste à envelopper le VML autour de notre conteneur, nous devons donc imbriquer notre conteneur dans une autre table comme suit :

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Répéter l'image d'arrière-plan

Vous pouvez également ajouter un arrière-plan qui se répète dans le conteneur où vous le placez. Un bon exemple est de répéter un motif dans tout le corps de votre e-mail.

exemple de répétition d'une image d'arrière-plan

Si l'image que nous plaçons dans notre cellule conteneur est plus petite que le conteneur, elle se répétera automatiquement à la fois horizontalement et verticalement. Pour répéter dans une seule direction, appliquez le style CSS « background-repeat » et ajoutez la valeur repeat-x pour répéter horizontalement ou repeat-y pour répéter verticalement.

Pour remplir tout le conteneur avec un motif entièrement répétitif, le code est très simple :

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Faire fonctionner cela dans Outlook avec une solution de secours VML

Encore une fois, si vous souhaitez voir votre rendu en arrière-plan dans les clients Outlook, vous pouvez appliquer VML. Le code est un peu différent cette fois, avec le VML placé avant le conteneur :

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Pour que l'arrière-plan se répète, remplissez la balise v:fill avec le type 'tile'. Pas de surprise, il y a quelques problèmes de rendu avec Windows 10 Mail, et avec des arrière-plans répétés, les problèmes de rendu peuvent être beaucoup plus disgracieux. Ainsi, laisser de côté le VML peut être l'approche la plus sûre si vous avez des abonnés Windows 10 Mail.

Techniques avancées

Les images d'arrière-plan fixes et répétitives offrent de nombreuses possibilités d'améliorer vos conceptions d'e-mails, mais il y a plus :

Échange d'images de contraste

Maintenant que le mode sombre est disponible dans plusieurs clients de messagerie et que le respect des préférences des abonnés vous aide à toucher un public plus large et à renforcer la confiance, changer votre image d'arrière-plan est un excellent moyen de compléter une conception en mode clair ou sombre. Et c'est aussi une amélioration amusante et simple.

modes-contraste

Pour implémenter cela, vous devez ajouter du CSS intégré aux requêtes multimédias en mode sombre. Cela garantira que votre image d'arrière-plan en mode sombre est diffusée dans les clients de messagerie qui prendront en charge ce type de requête multimédia :

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Cela vaut la peine d'ajouter une couleur de secours sombre. Cela aidera les clients de messagerie qui ne chargeront pas les images sans que le lecteur n'agisse et garantira que votre message peut être lu lorsque votre image n'a pas été chargée.

Maintenant, dans votre HTML, appliquez votre classe à la cellule contenant votre image de fond en mode clair. Simple!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Remarque : Il est difficile de concevoir, et encore plus de coder, les clients de messagerie qui inversent les couleurs de vos e-mails dans un environnement en mode sombre, ignorant complètement tout le travail acharné que vous avez consacré à la rédaction de requêtes multimédias en mode sombre.

Il est presque impossible d'obtenir l'adhésion de ces clients de messagerie. Cependant, vous pouvez jouer avec des images d'arrière-plan qui ont un niveau de transparence et appliquer une couleur d'arrière-plan à contraste élevé à votre conteneur, comme le blanc pour le mode clair et le noir pour le mode sombre. Cela permettra d'inverser la couleur de fond. J'ai essayé ceci avec l'exemple suivant :

image de fond d'e-mail dans différents scénarios de mode sombre

Mon image de fond en chevron a une opacité de 30% sur les flèches et est entièrement transparente entre elles. Cela signifie que lorsque les clients de messagerie incriminés prennent le contrôle de mon rendu en mode sombre, le contenu est lisible.

Pour plus d'informations sur le codage du mode sombre et la prise en charge des clients de messagerie, consultez notre guide ultime sur les e-mails en mode sombre.

Contexte interactif

Que diriez-vous de ravir les abonnés avec une certaine interactivité ? Vous pouvez répandre un peu de joie avec un simple effet de survol ou de survol, en changeant l'arrière-plan de votre conteneur lorsque le lecteur déplace son curseur sur votre contenu.

basculement de l'image d'arrière-plan de l'e-mail lors du survol ou du survol

Vous avez besoin d'un peu de CSS intégré pour que celui-ci fonctionne. Placez ceci dans votre balise <style> :

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Maintenant, tout ce que vous avez à faire est d'appliquer cette classe à votre cellule de tableau, comme ceci :

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Améliorez vos conceptions

Avec une multitude d'opportunités, l'utilisation d'images d'arrière-plan pour améliorer la conception de vos e-mails est un excellent moyen de repousser les limites et de faire ressortir vos e-mails dans la foule. Pour vous aider à mettre ces techniques en pratique, nous avons créé une ressource pratique où vous pouvez récupérer le code présenté dans cet article.

Nous aimerions voir comment vous utilisez les images d'arrière-plan dans vos e-mails. Partagez vos exemples dans les commentaires ci-dessous.

Assurez-vous que vos images d'arrière-plan fonctionnent avec Litmus

Cela a-t-il fonctionné ? Prévisualisez vos images d'arrière-plan (et le reste de vos e-mails) dans plus de 100 clients de messagerie, applications et appareils avec Litmus. Et dites bonjour aux e-mails sans erreur sur la marque.

Commencez votre essai gratuit →

Publié à l'origine le 24 mai 2019, par Jason Rodriguez. Dernière mise à jour le 21 juillet 2021.

Partagez, merci!

Comment créer de puissants parcours d'e-mails d'intendance à but non lucratif qui captent l'attention

Quelles sont les meilleures pratiques pour créer des parcours d'intendance avec le marketing par e-mail ? Apprenez à démarrer en 6 étapes et voyez quelques exemples concrets.

20 métriques d'e-mail et KPI pour mesurer le succès et inciter à l'action

Découvrez ce que les spécialistes du marketing d'analyse des e-mails utilisent pour suivre le succès et voyez lesquels de ces métriques d'e-mail et KPI vous devez ajouter à votre propre rapport d'e-mail.

Comment éliminer les e-mails du Black Friday et du Cyber Monday (BF/CM)

Démarquez-vous et convertissez les abonnés avec ces stratégies éprouvées pour les e-mails du Black Friday Cyber Monday et des exemples parfaits dont vous pouvez vous inspirer.

Préparez-vous pour l'avenir des informations et des analyses sur les e-mails : enregistrement de webinaires + points à retenir

Dans notre webinaire, nous avons partagé des conseils pratiques pour vous aider à vous préparer à l'avenir des informations et de l'analyse des e-mails. Regardez l'enregistrement maintenant et lisez nos plats à emporter.

Comment réparer les liens bleus de Gmail pour un rêve d'e-mail devenu réalité

Frustré par la couleur bleue du lien de votre e-mail dans Gmail ? Découvrez comment vous débarrasser des redoutables liens bleus de Gmail afin que votre marketing par e-mail reste fidèle à votre marque.