Les images de fond dans l’email : J’ai le pouvoir suprême !

Les images de fond dans un email sont une plaie. Vous le savez. Leur mise en place technique est une souffrance pour tout intégrateur emailing. On a l’impression à chaque implémentation que leur interprétation est toujours différente, que plus rien ne fonctionne. Pourquoi ? Il est temps de prendre le temps de s’y attarder, un tant soit peu, et qu’importe le temps que cela nous prendra puisque le sujet est plus qu’important. Et si il est plus qu’important, alors le temps attendra. (Raymond Devos! Et ouais, j’suis pas peu fier!).

Cas pratique

Prenons un cas de figure on ne peut plus simple, basique comme dirait Monsieur Orel : je crée un tableau de 600 pixels de large, avec une cellule à l’intérieur de 400 pixels de haut, et du texte dedans.

Jusque là, tout va bien. Si vous voulez voir ce que ça donne, suivez les mouches. Cette cellule, je veux lui mettre une image de fond, derrière mon texte donc. Cette image est la suivante :

Image de fond

Le graphisme, on s’en cogne ici, ok ? Je préfère vous le dire tout de suite, vous pourrez pas me dire comme ça “Ouiiii mais c’est pas très beau ce que tu fais là, avec ce texte en blanc au-dessus d’une image peu qualitatiiive…” Balek ! Ce qui compte, c’est que la technique fonctionne. Donc, en principe, si je veux mettre cette image de fond sur ma cellule, j’applique les propriétés CSS ou les attributs HTML correspondants, à savoir l’attribut HTML background (suivi de l’url de l’image), et/ou la propriété CSS background-image ou la propriété CSS background (toujours avec le chemin de l’image renseigné). Ce qui devrait donc nous donner ceci:

Cependant, les tests ne sont pas concluants sur Outlook 2007/2010/2013/2016/2019 sur Windows. Pas vraiment de surprise, puisqu’on sait en principe qu’il faut utiliser le langage VML pour qu’une image de fond fonctionne sur ces versions du logiciel de messagerie.

Le VML

Passons donc directement par la plateforme backgrounds.cm développée par Campaign Monitor. Je renseigne donc le chemin de mon image de fond, ma couleur de fond de secours, et j’applique cette image de fond à une cellule unique dans un tableau. Le code alors généré est le suivant:

Ce qui donne, appliqué à mon code de départ, le code HTML qui suit:

Mauvaise nouvelle, si l’on s’arrête à cela, le résultat escompté n’est pas correct. Il y a des soucis de répétition de l’image de fond sur Outlook 2007/2010/2013/2016/2019 sur Windows et un étonnant résultat sur Outlook 2013 120 DPI sur Windows. Je vais donc d’abord résoudre ce problème de répétition de l’image de fond en modifiant l’attribut type de mon <v:fill> compris dans le code VML fournit par background.cm. De “tile”, il passe à “frame”. Voici donc le nouveau code:

Bonne nouvelle, ce premier souci de répétition de l’image de fond est désormais résolu. Cependant, sur Outlook 2013 120 DPI sur Windows, il subsiste toujours cet étrange rendu. J’applique alors un autre petit hack propre au 120 DPI. La balise :

devient :

et je viens ajouter, juste avant la fermeture de ma balise <head>, le code spécifique à Outlook suivant :

Dorénavant, mon code finalisé sera donc le suivant:

Victoire.

Mes tests sont enfin concluants. Cependant, allons un peu plus loin : si je souhaite ajouter des marges internes (padding) à mon contenu, je me heurte à une nouvelle problématique. Considérons donc le code suivant :

Concrètement, je viens ajouter une marge interne de 10 pixels en haut, à droite, en bas et à gauche à ma cellule et j’applique à cette même cellule une couleur de fond (un rouge criard). Ensuite, j’insère un tableau dans cette cellule, et j’y place mon texte de départ. La cellule comprenant ce texte a elle-aussi une marge interne de 10 pixels, mais je lui applique une autre couleur de fond (un vert atroce). L’idée est de simuler la complexité des tableaux imbriqués. Et je constate que les marges internes à droite et à gauche de mes cellules ne sont pas respectées sur Outlook 2013/2016/2019 sur Windows.

Malheureusement, le fait de passer par l’attribut cellpadding pour essayer de résoudre le souci ne fonctionne pas plus. Il ne me reste alors, bien que la méthode ne soit pas très orthodoxe, à simuler des marges internes à droite et à gauche via des cellules vides. Je n’aime pas spécialement cette technique, mais c’est encore le moyen le plus sûr pour s’assurer de la bonne présence des marges internes sur des cellules comprises à l’intérieur d’un code VML pour image de fond. Voici le code final :

PS : Si tout cela vous semble simple et inné, sachez qu’il n’en est pas de même pour tout le monde. Ces informations sont à glaner à droite à gauche, au travers de différents forums, commentaires, blogs. C’était l’occasion pour moi de faire un point sur le sujet et de régler une bonne fois pour toute la problématique. Pour que, plus jamais, vous n’ayez à galérer avec vos images de fond sur Outlook. Ça n’a que trop duré. Que justice soit rendue. Je demande d’ailleurs à Microsoft la somme d’1 Milliard d’euros pour préjudice morale. Je pense y avoir le droit.

Bisous tout doux !

 

A propos de Thomas Defossez

Thomas a démarré sa carrière en tant qu'intégrateur emailing chez Experian avant de créer sa propre agence web. Aujourd’hui, Thomas a décidé de se focaliser sur l’email afin d’être un spécialiste de l’intégration HTML de ce médium. Depuis fin 2014, Thomas collabore à divers projets de l'Agence Badsender.com.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *