Outlook Gap Using Large Images Inside Emails

A popular way to keep in touch with your customers and to provide them with valuable information on your company's advancements is to keep a list of newsletter subscribers, where each of them can receive a periodical email containing simple HTML.

It is best to keep this HTML code as simple as possible in order to make sure that all the different email applications accept and display your emails correctly. Executable code, like JavaScript, will not be accepted, and probably images too although that can be customized by the recipient.

I wanted to share with you a very annoying issue involving very simple HTML based emails that contain images, and Outlook (Outlook 2007 to be exact).

I developed a fairly long email containing text, links and a few images and to make sure the HTML code was perfectly OK, I used the official W3C online HTML validator. Then I sent it to a list of email addresses under various domains (gmail, yahoo, hotmail etc.).

I checked each and every one of these emails and the only problem I had was with Outlook. For some unexplained reason, Outlook decided to insert a big gap between some text and the images that was interlaced after it. The HTML code in that section looked something like this:

Some text and text and text<br />
<br />
<img src="..." width="..." height="..." alt="..." border="..." />

Instead of displaying the email content like so:

Some text and text and text
< THE IMAGE >

Outlook decided to display it like this:

Some text and text and text
       / \
         |
         |
         |
(big gap)
         |
         |
         |
       \ /
< THE IMAGE >

I was very puzzled and tried many different things with my HTML code in order to find out what caused this problem, but came up empty handed. After a (very) long time, I started to search a solution, or some explanation, over the internet. Unfortunately, I still came up with nothing.

I got back to my HTML code and started to change tag after tag, attribute after attribute until I saw a difference... It appears that when I changed the image height attribute value to a smaller value, the problem went away!

I am not sure why when the image's height is X pixels high Outlook inserts a big gap before it and when it is smaller than X there is no gap. If you know the reason, I would love to know. I found no information on this on the web, although it could be that I didn't look long enough :).

I hope that nobody else encountered this very bizarre and annoying issue and if you're here because of that, I hope I helped you...

Comments

Interesting finding, thanks

Interesting finding,

thanks for sharing

E-mail issue; gap in e-mails

Hi Ehud, I just bought Outlook 2010 and have this issue on all my e-mails whether I have an image or not, and also whether I use Rich Text or HTML. Can you tell me where in Outlook I should go to change the settings to eliminate this problem? I looked all over the internet and am so happy I found your post...I can't even figure out how to describe this problem, lol. If you know of any links that other people have found solutions as well then please send as well.

Thank you so much, I appreciate it.

John in Chicago

Hard to say

Hi John, thanks for the comment.
It's actually hard for me to give you a solution because the issue I came across was directly linked to the fact I had an image in the email. I was on the email creation and sending side, not the receiving client side.
I solved my issue by making sure the images I use are small enough to not cause it, so it wasn't any setting in Outlook I changed.
Sorry I couldn't help you more. I know these issues are a pain...
Ehud.

OMG Thank you!

I have been encountering the same exact issue. I create emails as part of my job, and I would send a test to myself and have this problem occasionally. It would seem like the gap Outlook rendered was the same height as the image.

If I have no breaks, or tags that would cause breaks (table rows, for example), it displays correctly, except that the image appears too closely to the neighboring text. Outlook seems to ignore the deprecated vspace attribute for img tags, so that was not a solution either.

In my case, as long as I kept the image to 190 or fewer pixels high, it worked out fine. It's possible the surrounding html (width of a table, etc), or the ratio of height to width of the image in question may affect just how tall the image can be, or 190 pixels might be the magic number. More testing would be required to be sure.

Thanks to this post, that I managed to find with careful Google search terms, I have been able to solve this frustrating-as-hell problem with Outlook! Thank you! Thank you! Thank you! :)

Is it a two-column email by

Is it a two-column email by any chance? If so, you may have hit the Outlook 2007 Page Break bug - it's trying to insert a page break, but can't go through the image, so the image drops to the next 'page', causing the huge gap.

Good technology

This is great information regarding adding images in Email and thanks for giving a detailed info related to it. Sending and storing emails via Outlook 2007 can be a problem at time and I believe this fix certainly removes it.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Image CAPTCHA