Outlook : Hack du background image dans vos emails

Email-Tricks_Hack-Outlook

Hack du background image dans vos emails :

Si il y a bien une chose frustrante quand on intègre des Emails, c’est de s’apercevoir que certaines versions d’Outlook n’interprètent pas les images de fond (background ou background-image). Mais il est possible de contourner le problème…

Le code de background utilisé pour la démo :

La première chose qu’il faut savoir c’est que le moteur de rendu des emails est différent en fonction de la version d’Outlook. On se retrouve donc avec les associations suivantes :

  • Outlook 2000 : IE6 engine
  • Outlook 2002 : IE6 engine
  • Outlook 2003 : IE6/IE7 engine
  • Outlook 2007 : Word engine
  • Outlook 2010 : Word engine
  • Outlook 2011 (Appelé aussi Outlook pour mac) : Webkit
  • Outlook 2013 : Word engine
  • Outlook 2016 : Word engine
  • Outlook 2016 (pour mac) : Webkit

On obtient alors le rendu suivant (testé avec email on acid) :

outlook-background-render

On s’aperçoit donc que toutes les versions utilisant le moteur de rendu de Word ne sont pas “compatibles” avec les images de background. Il existe cependant un hack vous permettant de contourner le problème dans vos futures intégrations.

Analysons le code précédent :

Ce code représente un commentaire conditionnel lu par Outlook et qui permet d’ajouter des balises dans le code pour la version 9 et supérieure de MS Outlook. (La version 9 correspond à Outlook 2000) voir l’article sur les commentaires conditionnels pour plus de détails.

Il s’agit de language “vml” interprété par Outlook qui créé un rectangle de la taille voulue (ici 600*482) et qui va dessiner le background. Il est important de remplir les dimensions (width,height), la couleur de substitution du background (color) et la source de l’image en url absolu (src).

Une fois le hack placé dans notre code on obtient le résultat suivant :

outlook-background-render-hack

Outlook 2007,2010,2013 et 2016 pour windows affiche bien le background voulu.

N’hésitez pas à partager cet article s’il vous a plu, et nous dire si vous utilisez à présent le hack du background image dans vos emails.