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:
- Resize the actual hosted image to the maximum width/height you want it to appear in Outlook
- 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.
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:
- 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" />
- 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"
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
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]>
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.