0

I am trying to send a simple HTML EDM on Outlook. The HTML simply contains a table wrapped around an image (the content of my EDM), of which I could attach into Outlook and insert as text, along with an attachment of the image file.

The original image size is around width 600px and height 2500px. I wish to have the image displayed at width 100%.

I understand there are some styling constraints for MSO. I have managed to achieve the 100% width with the following code, however, the image seems to be pushed up vertically off the email body, meaning that a good quarter of the top of image cannot be seen, as if it's been cut off.

The following is the code I have written:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Marketing Newsletter</title>
</head>

<body>
    <table width="100%" height="auto">
        <tr>
            <td>
                <img src='cid:Email.png' style="display:block"/>
            </td>
        </tr>
    </table>
</body>
</html>

I have referenced from this entry to not use line-height and to make use of display: block, but still no resolution. Why?

Updated

This is how the results look like, note that they are mimicked and not the real screenshots.

How I thought it should look like (100% width, height: auto): https://i.stack.imgur.com/o94Hv.png

How it turned out like: https://i.stack.imgur.com/k9zzI.png

How it looks like with padding-top given to td or table: https://i.stack.imgur.com/3rqdD.png

How it looks like without the table: https://i.stack.imgur.com/cqoV8.png

Jones Lee
  • 55
  • 7
  • Can you try adding an explicit width/height in px to your table and image? It might be getting stuck on the height="auto" – Ben C Jul 16 '20 at 08:05
  • 1
    Older versions of Outlook had height limitations on images too which caused issues. I think you should be okay with 2500px, but something to be careful of anyway. – Ben C Jul 16 '20 at 08:07
  • @BenC , I tried to add in the explicit width/height, does not work. I tried to remove the table, the top is no longer cut off. However, Outlook automatically resizes the image, despite the explicit width/height on img. – Jones Lee Jul 16 '20 at 09:57
  • I tried to copy the image of the email from the above code where the width managed to hit 100%, then split it into 2 cropped sections stuck together, so that the top can be seen. It works, hence the height cannot be the problem. Not sure what is wrong with the code/Outlook with tables. – Jones Lee Jul 16 '20 at 10:00
  • 1
    @BenC , apologies I misread your comment on height limitations of images as limitations of the email content. Your caution worked. I split the image up into 2 shorter images and stacked them. Thanks! – Jones Lee Jul 17 '20 at 16:17
  • No problem, glad you could fix it! – Ben C Jul 18 '20 at 02:04

2 Answers2

1

Problem is with the height limitation Outlook has for images. Read here (https://stackoverflow.com/a/26359512/10449197) that the limit is approximately 1728px tall.

Steps to solve the issue:

  • Cropped the image up to approximately 1250px tall each
  • Stack the two cropped images vertically in the HTML

<img src='cid:EmailTop.png' style="display:block"/><br /><img src='cid:EmailBottom.png' style="display:block"/>

Jones Lee
  • 55
  • 7
0

You need to style the td and make its width large enough for the image. Your table width and height has to be bigger than your imagr in order to corectly work. Width and height auto for td might make it display the img ccorrectly. Give the value as px.

Mahdyar
  • 65
  • 8
  • The width is ok, as mentioned above. I have also tried an explicit width/height value, no resolution. The image is pushed up and the top part of the image is cut off, the width is fine. – Jones Lee Jul 16 '20 at 13:30
  • Can you add the image to your question? Screenshot – Mahdyar Jul 16 '20 at 14:37
  • Have you also have a td height bigger value than your image? – Mahdyar Jul 16 '20 at 14:38
  • Hi, I have tried adding a td height larger than my image, still get the same result. Added padding to td as well, and image just looked like it got cut off. – Jones Lee Jul 17 '20 at 05:25
  • Have attached images to describe the results. – Jones Lee Jul 17 '20 at 05:25
  • You should have borders: – Mahdyar Jul 17 '20 at 11:09
  • 1
    I think you can solve the problem by using src img with a uploade image link instead of attached image. Try uploading your image to a website and instead of cid just use the link of img. – Mahdyar Jul 17 '20 at 11:46