Envoyer un GIF animé dans une campagne emailing est une bonne idée pour rendre un message plus attractif. Il est également possible de créer une animation très légère afin de rendre le message plus dynamique, sans pour autant perturber l’attention du lecteur avec des animations trop rapide. Sur ce sujet, consultez notre article sur les cinemagraphes.
Outlook n’affiche pas les GIF animés
Malheureusement, toutes les versions de Outlook après la 2007 n’affichent pas les gif animés par défaut. Les versions concernées sont : Microsoft 365 Outlook 2021 Outlook 2019 Outlook 2016 et Outlook 2013. Uniquement sur Windows. Outlook sur Mac, IOS et Android les affichent correctement. De même que la version webmail sur Outlook.com quel que soit le système d’exploitation utilisé pour y accéder.
Sur Windows, il est possible de changer une option dans Outlook pour afficher les animations correctement (la solution est ici https://support.microsoft.com/fr-fr/office/le-graphique-animé-dans-mon-message-électronique-ne-fonctionne-pas-a5e8a2a3-9d86-4203-8920-c88cb8739e34). Mais la plupart de vos destinataires ne seront pas au courant de cette possibilité et verront une image statique à la place de votre Gif animé lorsqu’ils recevrons votre campagne emailing.
Comment intégrer correctement un Gif animé dans une campagne emailing ?
Pour autant il n’est pas nécessaire de se passer complètement de l’utilisation de gif animés pour vos emailing. Il faut savoir que Outlook va afficher une image statique créée à partir de la première frame de votre GIF animé (c’est-à-dire la première image de l’animation). Ce point est très gênant, car de nombreuses animations en GIF animées commencent par une image quasiment vide, voire une image complètement blanche. Pour pallier à cela plusieurs solutions sont possibles pour gérer ce défaut d’Outlook :
Utiliser la première image de votre Gif animé
Pour voir le meilleur affichage possible sur tous les environnements, ajoutez simplement l’image finale de votre animation dans la première frame de votre GIF animé. La dernière image de votre GIF animé sera certainement la plus parlante, ou celle contenant le CTA (appel à l’action).
Cette frame ne s’affichera qu’une fraction de seconde sur les logiciels de messagerie qui gèrent correctement les animations. Cela provoquera un léger saut dans l’animation qui n’est pas forcément très gênant. Et sur Outlook, l’image statique affichée restera cohérente.
Utiliser des conditions dans le code HTML
Une autre solution consiste à prévoir un affichage différent en fonction des capacités du logiciel de messagerie utilisé par l’internaute. Le GIF animé sera affiché pour les logiciel qui affichent l’animation correctement, et une image statique sera prévue pour les client messageries comme Outlook qui n’affichent pas d’animation.
Voilà un exemple de code conditionnel qui fonctionne :
<!--[if !mso]><!--> <img src="image_version_gif_anime.gif"> <!--<![endif]--> <!--[if gte mso 9]> <img src="image_version_statique.jpg"> <![endif]-->
L’utilisation d’une condition dans votre code HTML permet un affichage optimal quel que soit l’environnement du destinataire. Les utilisateurs d’Oulook verront une image qui ne bouge pas, et les autres verront correctement l’animation, sans avoir le petit saut au début de l’animation que provoque la solution précédente.
