Sending an animated GIF in an e-mail campaign is a good idea for making a message more attractive. It’s also possible to create a very light animation to make the message more dynamic, without disturbing the reader’s attention with too-fast animations. On this subject, see our article on cinemagraphs.
Outlook doesn’t display animated GIFs
Unfortunately, not all versions of Outlook after 2007 display animated gifs by default. The versions concerned are: Microsoft 365 Outlook 2021 Outlook 2019 Outlook 2016 and Outlook 2013. Windows only. Outlook on Mac, IOS and Android display them correctly. The same applies to the webmail version on Outlook.com, regardless of the operating system used to access it.
On Windows, it is possible to change an option in Outlook to display animations correctly (the solution is here https://support.microsoft.com/fr-fr/office/le-graphique-animé-dans-mon-message-électronique-ne-fonctionne-pas-a5e8a2a3-9d86-4203-8920-c88cb8739e34). But most of your recipients won’t be aware of this possibility, and will see a static image instead of your animated Gif when they receive your email campaign.
How do you integrate an animated GIF into an email campaign?
However, it’s not necessary to completely dispense with the use of animated GIFs for your emailing. Outlook will display a static image created from the first frame of your animated GIF (i.e. the first image of the animation). This is very annoying, as many animated GIFs start with an almost empty image, or even a completely blank one. There are several possible solutions for dealing with this Outlook flaw:
Use the first frame of your animated Gif
To see the best possible display on all environments, simply add the final image of your animation to the first frame of your animated GIF. The last frame of your animated GIF is likely to be the most telling, or the one containing the CTA (call to action).
This frame will only be displayed for a fraction of a second on e-mail programs that handle animations correctly. This will cause a slight jump in the animation, which is not necessarily very annoying. And on Outlook, the static image displayed will remain consistent.
Using conditions in HTML code
Another solution is to provide a different display depending on the capabilities of the e-mail client used by the user. The animated GIF will be displayed for software that displays animation correctly, and a static image will be provided for e-mail clients like Outlook that don’t display animation.
Here’s an example of conditional code that works:
<!--[if !mso]><!--> <img src="image_version_gif_anime.gif"> <!--<![endif]--> <!--[if gte mso 9]> <img src="image_version_statique.jpg"> <![endif]-->
The use of a condition in your HTML code ensures optimal display whatever the recipient’s environment. Oulook users will see an image that doesn’t move, and others will see the animation correctly, without the little jump at the beginning of the animation that the previous solution causes.
