Using Animated GIF in HTML emails

Do you remember what the Internet was like 10-15 years ago? The highly competitive struggle for audience attention forced web developers to use animated content on websites. Many pages had a lot of Flash and video banners that started playing automatically, often with a sound. Some of them even covered text or navigation elements. We have to thank browser developers for stopping that madness by installing limits for interactive content on webpages. Fortunately for people and for the sorrow of marketers, emails never had much ability to use high interactive and animated content. AMP emails, <video> tag, and CSS animation are still very limited in support by email clients. The surest way to add animations in email templates is by still using animated GIFs.

The Graphics Interchange Format (GIF) is a bitmap image format that was developed on June 15, 1987. It has since come into widespread usage on the Internet–including emails. Initially, GIF was not designed as an animation medium. It could just store multiple images in one file. Later developers added Graphic Control Extension (GCE), which allows the images (frames) in the file to be painted with time delays, forming a video clip.

You can easily prepare GIF-files for your templates in Adobe Photoshop or any special online services, like GIPHY. Then, you just need to use the <img> tag.

<img alt="Animated GIF" src="animated.gif" />

The problem is that some versions of Outlook (2007-2013) don't support animated GIFs. It's interesting, though, because the previous versions of Outlook did support animation. This is due to the fact that starting from version 2007, Outlook started using the text processor Word for rendering emails. The good news is that, in 2019, Microsoft issued an update for Office 2013-2019 and added support for animated GIFs in Outlook.

So, let's take a look at two ways of using animation compatible with all versions of Outlook.

First Frame in Animated GIFs

If the email client doesn't support an animated GIF, it would only display the first frame of a GIF file. It means some recipients wouldn’t have any chance to see all the frames of your animation.

I don't need to explain to you how bad that is. A solution is putting all important information into the first frame as a static image.

It's easy and it works in all email clients. But sometimes it's difficult to create an animation with all the information in the first frame. In this case, you can use this second solution.

Different images

This solution is using different images for Outlook and non-Outlook email clients. You have to prepare two images: the static image for Outlook clients and the animated GIF for others. Then put both images into your email template using conditional code.

<!--[if !mso]><!-->
  <img alt="Animated" src="animated.gif" />
<!--<![endif]-->
<!--[if mso]>
  <img alt="Static" src="static.jpg" />
<![endif]-->

But we know Outlook started displaying animated GIFs from version 2013. So, let's improve our code.

<!--[if !mso]><!-->
  <img alt="Animated" src="animated.gif" />
<!--<![endif]-->

<!--[if gte mso 15]>
  <img alt="Animated" src="animated.gif" />
<![endif]-->

<!--[if lte mso 14]>
  <img alt="Static" src="static.jpg" />
<![endif]-->

gte - greater than or equal to; lte - less than or equal to; 15 - Outlook 2013; 14 - Outlook 2010.

This solution works as well, but I wouldn't recommend it. There are many other situations where GIF animation doesn't work. An example would be if the email was printed or saved in some format without supporting animation. Based on my experience, I recommend you prepare GIF files with all your important information in the first frame. Also, don't forget to test all your templates using the Email Template Testing Tool.

Related Articles