Rendering in Outlook 2007 - Uncovering a Great Mystery

Absolute brilliance! I never would have thought to look at the DPI settings. Thanks for the post.

Something very similar to this happened with the way our website was being displayed on Mac's - but it was the general screen resolution, versus the dpi. Very good reminder, though, that not everyone has the same settings!

I wonder if this has to do with how Outlook renders pixels. Most email layouts are still fixed instead of fluid, defined by pixels instead of percentages. If the DPI setting is causing Outlook to render pixels differently for image files than it does for HTML, that could possibly be the problem.

I was just thinking about this the other day. When I create emails in html, they look awesome on the page, but not-so-awesome when an email browser renders my emails. I have tested Outlook 2003 & 2007, gmail, hotmail and yahoo. The emails look the best in Outlook by far, but even so there are glitches.

Do you know if there is a definitive resource on how to build an html/css email that looks decent in most major email clients?

Genevieve,

While there is no 100% definitive resource (it's the nature of our industry that best practices and design techniques will grow and evolve), I can definitely offer some advice here. One site that I have found to be very useful is the Email Standards Project (http://www.email-standards.org) - they provide a very up to date report of all of the HTML/CSS that the major email clients support.

In addition to using standards compliant code, the absolute best way to ensure your messages are appearing properly in all the email clients is to test, test, test.

We're always willing to lend a hand with your testing if you need a hand or access to an email client that you don't have. Just let us know.

Thanks for reading!
Lucas

Thanks for pointing this out! Another insightful post!

Good article! Although it didn't help me directly, but I had a similar problem:
I had to use a background image in a newsletter for one of our customers. Using a JPG in the background-attribute of the body-tag worked. Well..almost worked. The problem was that the image was about 30% to big! 100px became 130px. Very strange. Also checked the DPI settings and they were set to default. After hours of frustation I came up with a solution: use GIF instead of JPG! Now is that wierd or what!

Your post saved my day. A customer of mine had this very problem. When I had a look at her computer I noticed that the appearance of her screen fonts was different. Somehow I already smelled a connection here. She was also using an on-screen ruler to check the dimensions of the pictures in that email. This ruler gave wrong values which became clear after check the actual properties of the images. So I would have probably tried to check and change the DPI settings at some point after several desperate attempts to fix that issue through other ways. But it's definitely not the first place where you start to look for the cause of strange HTML email rendering. Thanks for the insights!

mate thanks for that! you saved me lots of hours of investigating this stuff, thanks again!

I recently had a problem where the image was just huge on outlook 2007 but fine elsewhere. This helped me to fix the problem. However, there was a slight difference from your situation - I had an image that was a 72 dpi jpeg while my display resolution was set at 96 dpi - this somehow caused outlook to render the image at almost twice the actual size. So I believe the actual problem is that if the image dpi does not match the display dpi - outlook 2007 renders it with an incorrect size. Replacing the image with a 96 dpi image fixed my problem. I believe your images were at 96 dpi which caused them to display incorrectly on displays set at a different dpi.

--
Thanks

This information could have saved me 2 full days worth of frustration. Glad I found it before we went to day 3. Thank you so much!

I had this problem, tracked it to DPI but also to something else (that seemed an easier fix).

Essentially, my image code had width and height in 'px'. Turns out that removing the px marker fixed the rendering problem.

So width="140px" became width="140"

It's an odd problem, because with font sizes you have to include px, otherwise outlook 2007 ignores makes up it's own font size.

Wow, I was really excited to find this article...but it didn't help. Where are these "DPI settings"??

I have used Outlook for years, and have always had no problem until this new laptop (Dell XPS Studio 1645). I always size my images to 96dpi, but now all of a sudden when I insert a picture into an Outlook e-mail, it gets resized to 72dpi. (?!?@%&#$%) Any idea how to get Outlook to do the obvious - display the image as I sized it - 96dpi? Thanks

This solved my problem in Outlook 2007!!!! You.are.awesome.

This information saved my day. Thank you so much for posting this!!!!!!

We discovered this problem when running a demo with a client. Our heavily tested email templates suddenly broke just like the samples above when using the client checked his laptop. To make a long story short Windows 7 + Outlook 2007 (and 2010) + a large monitor will break EVERY Graphic based email by scaling the image some amount to make your image match the screen's current DPI. Why? - Well windows 7 automatically detects the size of your screen and adjusts the DPI of your Screen and sets it to non-default setting of 96 DPI. For my 27" imac it's 120 DPI.

So in the past this problem only showed up for people who tweaked their DPI settings (which is basically no-one). I've tried many experiments by manually resetting the dpi of images in photoshop and I've found that if you set the DPI to 96 manually (non-default for adobe products and basically everything else which defaults to 72 DPI). At 96DPI, Outlook 2007 butchers the images less because it doesn't re-render the image, but it does change it's scaling with the HTML produced! So for now this is a "less bad" solution.

We're looking into this too because windows 7 + outlook 2007/10 + big monitors are going to be a constantly growing market. Wow I think we'll just get clients to send text emails. Logos in your signature - Better like it blurry.

I was having problems with image sizing as well...so did a little bit of testing by creating messages with images (and resizing the images) IN outlook, then looking at the resulting code to see how it differed from mine. The answer: I always specify units (usually px) on image sizes. Images resized in outlook did not - just something like "height=100 width=100". I tried taking the units off in my custom html and viola....it started resizing properly. Not sure if it will work in all situations, but it sure did the trick for us.