Base64 external email Images are displaying with Orange outline in outlook desktop app

Question

I want to send email to users by embedding base64 images. The images are rendered properly in outlook when opened from browser and outlook desktop app opened in safe mode. But the same image when viewed in desktop application(without safe mode), have a orange outline,

added image here .

I have tried adding some css to the <img>, <table>,<tr>, <td> tags, with specifying the background color, border(none,0) used important, but nothing seemed to be working. Any suggestions would be appreciated. Thanks. HTML template code:

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Outlook 2007 Test</title>
      <style media="all" type="text/css"> img:not([src]) {visibility: hidden;} 
         .image-container{ color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; z-index: 100000;width:200px;height:200px; border:0px !important; overflow:hidden; display:block;}
         .image-container img{ margin:-1px; padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px !important;}
      </style>
   </head>
   <body>
         <table style="border-collapse: collapse;">
            <tbody>
               <tr style="border-collapse: collapse;&gt;&lt;td style=" border-collapse:="" collapse;="">
                  <span class="image-container">
                  <img width="100" height="100" align="top" src="data:image/png;base64...." alt="graphic">
                  </span>
               </tr>
            </tbody>
         </table>
   </body>
</html>

Have you tried `border="0"` and `style="display:block;"`? – Syfer Jan 03 '23 at 23:06 — Syfer, Jan 03 '23 at 23:06

score 1 · Answer 1 · answered Dec 28 '22 at 11:19

1

A few things.

Outlook blocks base64 encoded images. But, indeed, if you use Outlook /safe, you can workaround this.

Apple email client allows base64 encoded images.

Another approach would be to embed an image by attaching a file.

On this page, you can find a comprehensive guide with all the scenarios:

https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed/

Hope it helps!

answered Dec 28 '22 at 11:19

aamdevsecops

104
8

“Outlook blocks base64 images’ - but it seems the OP is seeing the image, albeit with a warning border around it. Is this an answer you wrote from having tested things yourself? Sorry to question this but it reads very generically. – A Haworth Dec 28 '22 at 11:49
I actually copied the the whole html, changed background to blue and transparent to black, to test the render, but I'm getting the same result (same render, with black background). Then, after trying, I researched this answer: https://stackoverflow.com/questions/12655764/base64-not-being-decoded-in-gmail (forgot to reference it, my bad) and the mailtrap.io article on this issue, and they both lead to the fact that this is not supported anymore. I ran into a microsoft forum discussion about the subject, but can't get the hand on it unfortunately. – aamdevsecops Dec 28 '22 at 12:05

score 0 · Answer 2 · answered Dec 29 '22 at 23:19

The desktop edition of Outlook doesn't understand or render base64 images. If you need to get images delivered correctly you need to upload them to any web server and use a link to web server with such image. But that is not ideal too, Outlook also may block external images by default. The best solution is to embed images by attaching them to the mail item and then referring to them from the message body by using the CID attribute.

In Outlook you need to set the PR_ATTACH_CONTENT_ID MAPI property (the DASL name is "http://schemas.microsoft.com/mapi/proptag/0x3712001F") by using the Attachment.PropertyAccessor.SetProperty method. Then you can refer such attachments using the src attribute which matches the value of PR_ATTACH_CONTENT_ID set on the attachment. The PR_ATTACH_CONTENT_ID property corresponds to the Content-ID MIME header when the message is sent.

attachment = MailItem.Attachments.Add("c:\test\Picture.jpg")
attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F", "YourId")
MailItem.HTMLBody = "<html><body>Your image embedded is <img src=""cid:YourId""></body></html>"

With emails you don't have access to '_PR_ATTACH_CONTENT_ID_' and most don't have access to send attachments either. Not sure if this will help OP — Syfer, Jan 03 '23 at 23:03

Base64 external email Images are displaying with Orange outline in outlook desktop app

2 Answers2