Liz Banach Liz Banach - 1 year ago 84
HTML Question

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

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 Source

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]>
    <img src="fallback.jpg">

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

There is a good SO thread here that discuss various ways to target specific versions of Outlook.