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:
Here’s what Outlook (in some cases) was delivering:
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 max-width and min-width CSS values, even if inline. The body 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 #bodyTable is set to a max-width: 600px and is set inline to a width="100%" so it adjusts well to various screen sizes, but Outlook seems to ignore those values—or at least the max-width value.
We used conditional formatting to insert an additional centered table inside the #bodyTable. It only renders if the client is mso (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 table structure, we’re just adding another table set to width="600" 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 div that would hide the original image only if the email client is mso. 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 mso 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 width="50%" as a precaution, and set the width: 207px inside the mso conditional.
We then opened a div set to display: none 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 div within another conditionalmso 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 <head> 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.
