0

I have an email with a width of 650. When I view the email in Content Builder it looks as I expect except the widths are all bigger than defined. They seem proportionately bigger.

enter image description here

When I do a Test Send to Litmus the email looks good across email clients including Outlook 2013. The problem I'm seeing is in my Outlook 2013 the table is respecting the 650 width, but the image is now 410px. The actual image size is only 275px. In the template the width on the image is set to 100%.

enter image description here

What am I doing wrong? I started with the SFMC Templates as a starting point.

Improve this question

1 Answer 1

Reset to default
3

This is not actually anything from SFMC, but an Outlook issue. See below for more information on this issue.

Your best two solutions are to:

  1. Resize the actual hosted image to the maximum width/height you want it to appear in Outlook
  2. Define the width in pixels and use media queries to resize the image to fit in a mobile or tablet environment.

In #2 solution, you can actually do a hacky version and set something like below:

<img width="640" src="yourimage.jpg" style="width:100%" />

and since Outlook ignores the percentage it will provide the width attribute value (640px) instead, but as CSS styles overwrite HTML attributes, all other clients will go off of the 100%. This is not a perfect solution and definitely should be tested extensively prior to use.

More info on issue:

Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) that is percent based and goes off of the embedded information in the image. This is all based off DPI setting as well as the renderings of the Word HTML engine.

Mailchimp solutions

Below is snippet explaining the issue in more detail from here

"This issue usually happens when you are using a picture other than 96dpi.

When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high; 88px/150dpi * 96dpi = 56px

It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.

If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).

This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."

For the 125DPI issues, You should read up on this blog post.

The main issue is, as was stated that the DPI of the screen is blowing up the image, but not changing the table or other HTML elements.

A couple solutions would be:

  1. Match HTML attribute (e.g. height="XX") with a matching CSS property (e.g. style="height:XXpx;")

Example code from blog post:

<td align="left" width="244" height="68" style="width:244px;height:68px;" valign="top" bgcolor="#000000">
    <img src="/path/to/image" alt="Something Descriptive" style="display:block;" width="244" height="68" border="0" />
</td>
  1. Include Microsoft XML link in HTML tag and MSO conditional to set default DPI. See below:

You’ll first need to amend the root HTML tag in your template to incorporate some XML namespaces that Outlook will need to understand the special directives that are going to be used.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office">

The first part is to enable VML support, what is VML? Its a subset of XML specifically for images and shapes that is supported in Microsoft Office and hence Outlook 2007, 2010 and 2013. While VML isn’t required directly to fix this, Michael did some experiments with VML which helped lead to the discovery below. The second part is to enable the Microsoft Office namespace for use in Outlook.

Normalise the DPI of images (which is referred as PPI by Microsoft Office):

This is where the magic is, you’ll now need to place this Microsoft Office specific code in the head section of your template, it should be included right before the closing tag of the head.

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

This snippet will now scale up your images upon landing in the inbox, meaning the preview pane will display the images properly, along with when the email is opened separately making whole email looking more like its 96 DPI counterpart that you probably dreamed of seeing on HiDPI. You’ll notice some quality loss on the images i.e. jpeg, but overall it works well.

Improve this answer
2
  • Thanks Gortonington. I had the image sized to the max size I wanted, but Outlook still displayed it bigger than it should. Looking through all kinds of stuff it seemed to be related as you said to the DPI stuff. I looked at my computer settings (since Litmus showed the Outlook 2013 DPI correctly) and my display setting showed to increase change the size of text, apps, etc up 175%? I set this back to 125% (the post I was reading said this was the default) and the email appeared like the Litmus rendering? I'm not sure if this is a solution or not.
    – victorcorey
    Commented Dec 7, 2016 at 17:17
  • Judging from your comments, the issue seems to be the Outlook 2013 125DPI version and not just Outlook. I will adjust my answer to include more info on that.
    – Gortonington
    Commented Dec 7, 2016 at 17:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .