html-emailoutlook-2019

Animated .gif distorted in Outlook 2019


I have an animated .gif that is 1200px wide in total, but I'd like to scale it down to 600px wide for a clearer image in 120dpi. Below is the code that's in the message; it's displaying in the right width but the wrong height (as you can see there's no height defined, and it's not auto-scaling the way I'd like it to).

Outlook 2019 is the only email client in which it's displaying wrong. It looks fine in all other email clients. Also, the other images (.jpgs) in my message are displaying exactly the way I want them to, and they contain the same inline CSS.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
<td style="padding: 0; text-align: center"><a href="https://www.lookoptic.com/collections/screen-products" target="_blank"> <img alt="FRAMES FOR THE FAMILY | Make protecting your eyes from harmful blue light a family choice. With matching frames for adults and kids, we keep it easy for the whole family to keep their eyes healthy even while spending more time in front of screens than ever." border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/HQd5zH/images/57fbdbba-e232-441f-abc2-098444d1525f.gif" width="600" style="display: block; border: 0px; outline: none;
width: 100%; height: auto; max-width: 600px;background: #fff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" /></a> </td>

</tr>
    </tbody>
</table>

Any ideas? Thanks in advance.


Solution

  • Outlook will ignore the style sheet for your image. So you can use the height and width tags to direct the behavior of Outlook and allow modern email clients to operate the way they need.

    If your animated image on Outlook is supposed to be 600px x 600px, do this:

    <img src="#" width="600" height="600">
    

    Then for the other clients, add in an inline style sheet (like you did in your example.

    <img src="#" style="width: 100%; height: auto; max-width: 600px;" width="600" height="600">
    

    This will work for any image format supported in Outlook.

    Good luck.