[null, {"document_url": "https://litmus.com/community/discussions/7513-outlook-2016-windows-10-background-rendering-issues", "unformatted_src": "https://secure3.convio.net/mdacc/images/content/pagebuilder/image001.png", "src": "https://secure3.convio.net/mdacc/images/content/pagebuilder/image001.png", "formatted_filename": "image"}, null, {"document_url": "https://litmus.com/community/discussions/7513-outlook-2016-windows-10-background-rendering-issues", "unformatted_src": "https://img.litmuscdn.com/assets/community/stubs/previews-promo-06368aa54bbf897b33eb8156bb3c06cf.png", "src": "https://img.litmuscdn.com/assets/community/stubs/previews-promo-06368aa54bbf897b33eb8156bb3c06cf.png", "formatted_filename": "previews promo aa bbf b eb bb c cf", "alt_text": "Previews promo"}, null]


Join for Free

Outlook 2016 / Windows 10 background rendering issues

Brent Swaine posted 2018-06-12 21:57:52

I've run into an issue that I can't quite figure out.

I have built an email that uses a background image for the header section based on some best practices and code for use with versions of Outlook that run on Windows (using v:image, v:rect, v:fill. etc.). I then ran tests for Outlook 2013/Win 7, Outlook 2016/Win 7, and Windows 10 Mail/Win 10 which turned out to show the image correctly.

However, if I run the tests on an actual computer that has Outlook 2016 running Windows 10 I get formatting errors (see below screenshot). After some troubleshooting on the computer (since Outlook 2016/Win 10 isn't an email client option in Litmus currently), I discovered that if I alter the width and height of the v:image it would look correct on the computer but not in the Litmus tests.

For some reason there seems to be roughly a 150x80px discrepancy between the two versions. For example, if the background image is set to 600x320px, it shows correctly in the Litmus tests but not the computer test. If the background is set to 750x400px it shows correctly in the computer test but not in the Litmus tests.

Does anyone have any idea what would be causing this issue?

Builder code and tests:

Computer screenshot: Brent Swaine replied 2018-06-14 15:55:56

FYI: I discovered that this came down to the 120 DPI version of Outlook, apparently being used by default on Windows 10 computers (at least the ones I was testing on). Litmus has a 2013 Outlook 120 DPI / Windows 7 version to test in and after some troubleshooting and some found best practices I changed the v:image (a background image was what was causing my troubles) dimensions to points instead of pixels and it fixed the issue.

Reply to Brent Swaine
Jed Rosenberg replied 2018-11-01 18:13:45

Brent! Thanks for your post and solution! This helped me out perfectly. 

Start your free 7 day trial

Join the Litmus Community