A Fix for Outlook Image Issues in HTML Email Campaigns

We produce an HTML email newsletter once a month that has a readership of over 8,000 people. Outlook users account for only 2.5% of our readership, but that’s still nearly 200 readers. And we value people, so every one of them matters to us.

We don’t know for certain how many Outlook users experienced image explosion problems with our emails, but after researching how various versions of Outlook reinterpret HTML and CSS standards in some unexpected ways, we wrote a fix.

Here’s what the template should look like across all email clients:

Correct desktop view of the email template
Correct mobile view of the email template

Here’s what Outlook (in some cases) was delivering:

Outlook’s creative, but unwelcome reinterpretation of image and table styles

You can see that the ITEAMS logo is far larger than it should be and it forces the table structures to expand to accommodate it.

Research

I found a lot of people attempting to solve various Outlook issues for HTML emails. The few addressing image resizing, though well-written and promising, didn’t work for me.

Eli Dickinson provided a clue and a way forward for me in his email template trick on GitHub. What he was proposing was for a different issue, but it got me thinking about conditional formatting for MS Office/Outlook in our template code.

Fixing the Code

There are essentially three (probably more) problems Outlook has with our template. Problem 1 and 2 work together and problem 3 is a separate issue related to font resizing we recommend fixing while you’re at it.

Problem 1: Table Width

Outlook doesn’t like and CSS values, even if inline. The of our template begins like this (pre-fix):

<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->

The width of is set to a and is set inline to a so it adjusts well to various screen sizes, but Outlook seems to ignore those values—or at least the value.

We used conditional formatting to insert an additional centered table inside the . It only renders if the client is (italics and bold).

<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">

<!--[if mso]>
<center>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="600">

<![endif]-->
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->

So, within the existing structure, we’re just adding another table set to and centering it. We have to add an additional conditional expression at the end of the table to close these elements as well. Here’s what that looks like near the very end of our HTML:

<!-- // END FOOTER --><!--[if mso]>
</td></tr>
</table>
</center>

<![endif]-->
<!-- // END TEMPLATE --> </td><!-- /#bodyCell -->
</tr>
</table><!-- /#bodyTable -->
</center>
</body>

On it’s own, this does not fix the exploding image problem.

Problem 2: Exploding Image Size

We ended up calling the full image element separately with adjusted width properties and wrapping the second image in a that would hide the original image only if the email client is . Otherwise, MS Office/Outlook would duplicate the image. Here’s the original code without the conditional fix:

<table style="width: 100%;" width="100%">
<tr>
<td style="text-align: left; width: 50%;" width="50%">
<h1 style="color: #12646d !important;" mc:edit="newslettername">YOUR NEWSLETTER NAME</h1> </td> <td style="position: relative; text-align: right; width: 50%;" width="50%"> <a href="http://iteams.us" style="border: 0; text-decoration:none;"> <img id="ITeamsLogo" src="https://gallery.mailchimp.com/c2ce47add15fcafd7072b3dd2/images/d8ac365e-7397-4bb1-ba7f-a1cacdd78cfd.png" alt="ITEAMS" style="text-align: right; min-width: 50px; max-width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"> </a> </td>
</tr>
</table>

I’ll explain this below but here’s the code with the conditional fix (italics and bold):

<table style="width: 100%;" width="100%">
<tr>
<td style="text-align: left; width: 50%;" width="50%">
<h1 style="color: #12646d !important;" mc:edit="newslettername">YOUR NEWSLETTER NAME</h1></td><td style="position: relative; text-align: right; width: 50%;" width="50%"><a href="http://iteams.us" style="border: 0; text-decoration:none;">

<!--[if mso]>
<table width="50%"><tr><td><img width="200" src="https://gallery.mailchimp.com/c2ce47add15fcafd7072b3dd2/images/d8ac365e-7397-4bb1-ba7f-a1cacdd78cfd.png" alt="ITEAMS" style="text-align: right; width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">

<![endif]-->
<img id="ITeamsLogo" src="https://gallery.mailchimp.com/c2ce47add15fcafd7072b3dd2/images/d8ac365e-7397-4bb1-ba7f-a1cacdd78cfd.png" alt="ITEAMS" style="text-align: right; min-width: 50px; max-width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"> <!--[if mso]>
</div>
<![endif]-->
</a></td>
</tr>
</table>

In the conditional fix, we added a table around the image set to as a precaution, and set the inside the conditional.

We then opened a set to so that the standard image element that followed would not render if we’re viewing the email in MS Office/Outlook.

It’s crucial to close the open within another conditional after the standard image, of course.

Problem 3: Pixel Resizing

If you want to learn more about how Outlook resizes pixels in fonts and images, DPI Scaling in Outlook 2007–2013 by Michael Muscat is a great read.

Based on that article, we recommend throwing the following conditional in your to address some or all of these issues.

<!--[if gte mso 7]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->

The Result

Despite additional cringe-worthy style shifts in Outlook, the screenshot below shows how the fixes above now perform for our newsletter template.

Navigating complexity. 🏉 Poet collaborating for a bold beautiful creative future via leadership, design thinking, UX, and Product Management at Kandji.io. ⚡️