Coding for DPI Scaling in Outlook 2007-2013
Does Outlook sometimes make your email look like it was put through a garbage compactor 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 fine on your machine’s Outlook! Why does it look different on your boss’s laptop?
The issue here is Outlook DPI scaling, a Windows setting that helps readers with visual impairments. DPI, or dots per inch, is a measure of how many dots (or pixels) can fit within a given space.
The Outlook zoom problem is cropping up more and more as new high-DPI laptops often have the Outlook DPI scaling set as default. This problem affects Outlook 2007-2013. Luckily, Michael Muscat for found a solution and posted about it on Campaign Monitor’s forum.
How to Access DPI Settings in Windows
You can access the Outlook 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.
If you want to change resolution for Windows 10, you’ll want to navigate to Settings > Display and chose from the drop-down menu under “Scale and layout.” 
You can check this computer setting to confirm that DPI scaling is the cause of Outlook zoom problems. Essentially, any amount of scaling over 100% will distort the email and the higher the percentage over 100%, the more distorted the email will look.
But, as we’ll note below, it’s really all about how Outlook converts pixels and points.
Seeing the Zoomed-In Version of Your Email
Email on Acid’s Campaign Precheck features a step where you can view your email zoomed in at 200%. This will give you a sense of what your font, images or design will look like if a user has high DPI settings.
The zoom tool is part of Campaign Precheck’s accessibility workflow, which helps you craft emails that are more accessible for users with disabilities or vision impairments.
Here’s an example of the zoom tool in action:
Email on Acid’s Email Testing also features previews at 120 DPI for Outlook 2010, Outlook 2013 and Outlook 2016, so you can easily find rendering issues with versions of Outlook that may distort your email.
Why Does DPI Scaling Mangle My Email So Much?
This display 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 why we see problems, like font display issues.
In other words, Outlook converts pixels to points inconsistently throughout your email, so parts of your code will render differently. Perhaps more annoying is the fact that different versions of Outlook will handle the conversion in different ways (Outlook 2007 will do it slightly different than Outlook 2010 or 2013).
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 Email to Accommodate for Users with Desktop Scaling?
You can help control Outlook image scaling and increased font size in Outlook by making sure your email scales properly. By making a few simple code modifications, you can ensure the email will look great on any DPI setting.
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 will scale without issue.
Here’s an example of a table formatted this way:
<table>
<tr>
<td height="500" style="width: 500px;height: 500px;">
</td>
</tr>
</table>Use this Tag to Make VML Scale
This solution is easy. You’ll need to add the following to your head section to make VML scale properly.
<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>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. If you’re looking for more tips and tricks for coding emails for Outlook, check out these resources:
- Our complete guide to Outlook
- How to Create Excellent Emails in Outlook.com
- How to Code Emails for Outlook 2016
- GIFs and Outlook: What Can We Do?
- How Do I Get Rid of the Lines in Outlook Emails?
You can also use Email on Acid’s Email Testing to see what your email will look like on 11 different versions of Outlook, including three versions at 120 DPI. Try our free, seven-day trial and you’ll also get access to our Campaign Precheck tools, including the zoom feature.
This post was updated on February 11, 2019. It was first published in December 2014.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
22 thoughts on “Coding for DPI Scaling in Outlook 2007-2013”
Comments are closed.
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.
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
But, in the example above, if one puts a
(Also, you have a random closing in the code.)
We have struggled with this issue for years! I am so glad to have found this post.
Thank you! This has been driving me crazy.
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?
Anything on the font sizes/scaling?
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,
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!
@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/
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:
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 86×72 at 96 dpi
Help!
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!
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,
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.
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!
Hi, this didn’t worked for me in Outlook 2016. I tried with either traditional![]()
tag and the VML alternative with the 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?
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. 😉
Outlook strips out the code additions in #2 when sending from Outlook. This works when its being sent from a different email program. Frustrating.
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?
That is indeed frustrating Ben! Let us know if you find a workaround 🙂
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;
Hope that helps!
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,
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.