Click to Sign Up for a 7 Day Free Trial!

Email Development

Coding for DPI Scaling in Outlook 2007-2013

Email On Acid

Does Outlook sometimes make your email look like it was put through a garbage compacter and then fed through a taffy machine? Fonts are huge, tables look tiny and images are all out of whack? Worst of all, the email looks just fine on your machine's Outlook! Why does it look different on your boss's laptop?

The culprit here is DPI scaling, a windows setting to aid readers with visual difficulties. This problem is cropping up more and more as new high DPI laptops often have the setting enabled by default. DPI, or dots per inch, is a measure of how many dots (or pixels) can fit within a given space. This problem affects Outlook 2007-2013. Much thanks to Michael Muscat for finding the solution and posting about it on Campaign Monitor.

Accessing DPI Settings

You can access the DPI scaling on a windows machine by navigating to your display settings. Click on "Make text and other items larger or smaller."

From here you can select 125% or 150% magnification.

You can use this setting on your computer to confirm that DPI settings are the cause of problems in Outlook.

Why does DPI scaling mangle my email so much?

This setting causes some parts of the email to scale in size, while others remain the same. That's why your email looks distorted and warped.

  • Widths and heights specified in HTML attributes remain pixel values.
  • Widths and heights specified in VML code remain pixel values.
  • Other pixel values (px) are converted to point (pt) values instead. This is where the problem comes in.

Desktop scaling affects relative units, like the "pt" values it converts most of your pixel values too. For example, if the user has set their scaling to 125%, a 10pt font would become 12.5pt.

How can I code to accommodate for users with desktop scaling?

You can make sure your email scales properly and looks great on any DPI setting by making a few simple modifications.

#1 - Use inline styles and px units on tables.

You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.

Here's an example of a table formatted this way:

<table>
  <tr>
    <td height="500" style="width: 500px;height: 500px;">
    </td>
  </tr>
</table>

#2 - Use this tag to make VML scale.

This one is easy. Just add the following to your head section to make VML scale well.

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

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

#3 - Use MSO Magic for cellspacing and cellpadding.

Using these inline styles will allow you to create scalable cellspacing and cellpadding.

<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>

That's it! You now have an email that is scalable in Outlook.

Outlook getting you down?

DPI scaling is hardly the only problem email developers face when coding for Outlook. Get the complete guide to Outlook today! We'll help you solve renderability issues before you pull all your hair out.

Want to make sure your email looks perfect everywhere? Start email testing today!

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Came across this issue few days back and man really had no idea where to even start until came across Michael Muscats finding. Many thanks to him for sharing this it did fix my problem. This is definitely gonna be a must for all future email codings unless microsoft comes up with something on this scaling issue.
Tahsin Alam
I could have used this info and fix about a year ago! haha. Thanks.

It should be noted that for #1, this is not a 'set it and forget it' way of defining the width on a table. i.e. If one uses width="500" in your top <td> that is the going to be the width of table no matter what the <td>s after contain.

But, in the example above, if one puts a <td> full of text you're expecting to wrap, it will blow out the width of the table. You need to include the style="width:500px;" in all <td> that have content that could extend beyond the width declared in the first <td>.

(Also, you have a random closing </div> in the code.)
CPuffer
We have struggled with this issue for years! I am so glad to have found this post.
Laura Burnett
Thank you! This has been driving me crazy.
Veritas
We've defined our table widths at 600px which contain 100% spread images, and yet our images are not stretching to width. Redefining the images at 600px width doesn't stretch them, either. Is there a correct way to make sure an image's size increases with this scaling?
reliance
Anything on the font sizes/scaling?
mtdconsulting
I am extremely new to the world of email design. I am having a nightmare trying to figure out why even when I think I implement the above steps my emails still look horrible in Outlook 2013 and outlook 2013 DPI. Is there anyone willing to look at my code and help me figure out the probably stupid and simple issue I am not seeing. It would be much appreciated!!!!
Cara
Cara,
I would recommend posting this question in our forum, and including your code. If you do that, then I (or somebody from the community) will take a look at it!
Geoff Phillips
@reliance: i had the same problem with image scaling and was able to fix it by following the guidelines here. I just had to add the additional XML namespaces and the conditional comment to enable image scaling - even within the email preview.
https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/
Andreas
I only know enough HTML to be confused. Trying to include our logo in email signature with Outlook 365. Sending from my hi res monitor it looks great, but recipients get a large fuzzy distorted logo. I've avoided using MS Word to create the HTML, instead using a stripped down basic code, which up to this point seemed to work fine. Now, it seems outlook alters the image and it is ugly.

Here is the line of my code that I have in the HTML signature file:

<div align="left">http://www2.innsbythesea.com/SMSForms/ibts_sig_logo_nobox.png</div>


The image is 96dpi, and the height and width are the actual dimensions in px. However, sending the email from a hi res laptop shows up in someone else's email really huge; seems its being blown two to three times visually, even though if you same the image and open in image editor it shows 86x72 at 96 dpi

Help!
Mark
Mark,
Sorry, but I'm not sure what can be done about this in OL365 signatures. This blog is intended to help email developers send high DPI friendly emails from an ESP, where they have a lot more control over the code. I hope you can find a fix!
Geoff Phillips
Thanks for the post Mark! I've been struggling with the image signature resize issue for at least a year. My problem is that I'm not a coder, and when you say "This one is easy. Just add the following to your head section to make VML scale well." I'm not sure how to add the code to the head section. I've searched, but not found a solution. Are you aware of a KB article for this, or any other info that could help me implement this in my email. Thank you!
Peter Brady
Peter,
As I pointed out to Mark, these are solutions for email coders using an ESP. This is where you would have control over your head section. I'm not sure of any fix for this issue in signatures.
Geoff Phillips
Thanks Geoff... sorry I'm a little slow in the world of development. FYI, this issue is affecting many people, now that HiDPI laptops are becoming more commonplace. I spoke with Microsoft about the issue (I'm struggling with an Outlook issue) and they pass it off as a hardware issue and not their problem. Either way, there are lots of people looking for a solution to this. Glad you found one that works for your community. If anyone hears of a fix for Outlook Signatures, please let me know... thanks again!
Peter Brady
Hi, this didn't worked for me in Outlook 2016. I tried with either traditional <img> tag and the VML alternative with the <v:rect> tag having the desired image as a background-image / fill.
But it just won't scale when in windows I set the DPI to 150%. I used both: Rule #1 and #2.
Any Ideas?
Julian Lang
I code nested tables to add a black stroke around rectangular images. They're book jackets--client assets I can't touch and that must be served from the client's servers. #2 was all I needed. wink
TCM_andrew
Outlook strips out the code additions in #2 when sending from Outlook. This works when its being sent from a different email program. Frustrating.
Ben
Hi Geoff,
I need to scale down one of my images to 60% of its original size. On outlook 2011 & 16 it works. But on 2007, 10 & 13 - it shows the actual size. How can I fix this?
Mary
That is indeed frustrating Ben! Let us know if you find a workaround smile
Alex Ilhan
Hey @Mary

If you'd like your image to size down on Outlook, you need to set the width of the image with the width principle, rather than inline styles. For example;

" width=

Hope that helps!
Alex Ilhan
I'd like to try the solution but I don't understand how to edit the HTML source of an Outlook 2010 email to make the adjustments to the <html> tag and the <head> section. How do you do that? I've tried many approaches but with everyone, any changes to either of these items is lost.
Darren
Darren,
As far as I know, there is no reliable way to control HTML in Outlook 2010. The above article is intended for use with sending services that allow you to control HTML, like MailChimp or Emma.
Geoff Phillips

Leave a Comment