Outlook 2007 Image Height Limitations and DPI

Published by John on November 19, 2012 Under Web Design

About a year ago, I designed a pretty neat HTML email, which made use of a background image and worked well in all(at the time) versions of Outlook, as well as Gmail, Yahoo, Aol, Hotmail, Squirellmail, ect. I ended up doing a ton of testing to ensure everything worked correctly, using the “<v:image />” and “<v:shape>” method of getting the background image to work in Outlook 2007.

And, it is a really cool email template if I do say so myself, with a 2 and 3 column version, sidebar, some cool buttons.

Recently, the clients I designed it for wanted to send a rather long email, which ended up being > 3200px or around 40 something inches long. Now, IMHO, this is way longer than an email should be and is longer than best practices dictates when doing email marketing.

However, after discussing my concerns with them, they still wanted to go ahead, putting me in touch with their in-house designer who was having issues with the email cutting off towards the bottom.

After fixing the padding and sizing, as Outlook was adding a ton of extra space between each element, I was able to get the email a a lot longer in Outlook. It was, however, still cutting off at the end, no matter what I set the height to in the corresponding vb:shape object that was holding the text. After a bit of debugging, I determined this was because there is a height limit associated with VML objects, like “v:image”, or in this case a v:shape vector shape, in Outlook 2007.

Outlook 2007 and Microsoft Word’s Rendering Engine

Starting in 2007, Microsoft decided to use the same HTML engine used in Microsoft Word to display HTML in emails that are viewed in Outlook. This ends up crippling Outlook a good bit, as well as introducing a host of spacing/padding issues that are due to limitations in the way these versions of Outlook render HTML.

In addition, there is also a height limitation, as well as likely a width limitation, on how large of an image can be displayed in an email. From testing, with what I think are default settings, the limit appears to be around 22-26 inches, although this can vary a bit depending on a setting in word(see below) and DPI.

Testing the VML v:shape and Image Height Limit

I used the following code to test the height limit, with this 72DPI picture: Outlook Size Test

<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="long_image" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:3200px; width:820px; top:0; left:0; border:0; z-index:1; ' src="http://url_of_image/outlook_size_test.jpg"/>
</v:shape>
<![endif]-->

Note: You would need to change the url_of_image to wherever you downloaded the outlook_size_test image

The outlook_size_test image is 3200 pixels tall and there is a line every 10 inches. When viewed in Outlook, depending on the DPI of the image and the DPI setting in outlook, it ends up getting cut off without showing the full image, despite height settings.

Workaround Via Word: Adjusting DPI of Images

In Microsoft Word Goto: Word Options -> Advanced -> General -> Web Options(button) -> Pictures -> Adjust Pixels per inch -> Save and Restart Outlook/Microsoft Word

By tweaking the DPI in Microsoft Word, you can get the image to display a bit longer, but realistically this isn’t something you could expect people to do, aside from internally.

Mine was set to 96DPI, with bumping it up to 120 digital pixels per inch having the effect of displaying more of the image, although still not the entire thing(even after redoing the actual image itself at a higher DPI too.)

Conclusion

Ultimately, this is sort of an edge case, as a 3200px tall email is rather huge, arguably well past the size of best-practices, especially for people that are only prospective customers and not actual users of your service.

In this case the email was originally designed at around 800 to 1200px and in order for the background image to work with the nested tables and for performance, having it run full length was easiest.

However, it still ends up being another annoyance when dealing with the limitations of Microsoft Outlook 2007/2010 and its rather crippled HTML engine.

It would be interesting to see how Outlook behaves in Windows 8 Metro and I intend to do a bit of testing to see if there is a better way of adding a background image in Outlook. Redoing the design is possible, but given the way the sidebar and such is, it would be a bit of a pain. Especially considering that this is probably an abnormally long email.

6 Comments |