How to swap a GIF in an HTML email with a different image for unsupported clients

Question

I have a client that wants me to create a HTML email template for them. They want to include a banner image of an animated GIF, which is not supported in all email clients. The animation that they want would not have a readable first frame, and from my research, the email clients that do not render GIF formats will simply display the first frame of the GIF. I was wondering if there was a way to swap out the image used and serve a different image rather than a GIF for the email clients that do not support GIF formats. Thank you for your help!

Answer 1

The easiest way is to design a GIF where the first frame is readable, but since that's not an option you can hack the clients that don't support GIFs.

Fortunately GIF support is pretty good, it's basically Windows Outlook 2007/2010/2013/2016 that don't support GIFs. So we target this range using Outlook Conditional CSS. Outlook 2007 - Version 12, so something like this should display what we want. (might need to fool around with exactly what tags get nested)

<!--[if gte mso 12]>
<td>
    <img src="fallback.jpg">
</td>
<![endif]-->

<!--[if !gte mso 12]><!-- -->
<td>
    <img src="animated.gif">
</td>
<!--<![endif]-->

Here is a good thread on Stack Overflow discussing various ways to target specific versions of desktop Outlook.

Answer 2

Most email clients don't support scripting so this would be hard. But you could always use a second gif that does have a visible first frame that's a picture of whatever you want and then have the rest of the gif be transparent. Once you have this, you could overlay both gifs on top of each other. This way if the client supports animated gifs, your gif on top would become transparent and if it is not supported, you would see what ever the first frame is.