101

Using a rich-text editor, our users can drag and drop a saved image from their desktop to the editor. The image appears and displays properly in the web page after they submit.

Since the image is not uploaded anywhere, the editor saves the image as a base64-encoded image. 

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb

etc.

But it doesn't show up - not on the iPhone, nor two different versions of Outlook. The image is simply broken. We want to stick with base64 due to it already working with the web page and the ability to view an image if the user is offline.

Vael Victus
  • 3,966
  • 7
  • 34
  • 55
  • Possible duplicate of [How to successfully embed images in HTML for display in webmail clients?](http://stackoverflow.com/questions/13049453/how-to-successfully-embed-images-in-html-for-display-in-webmail-clients) – Amit G Jul 07 '16 at 07:19

2 Answers2

139

Support, unfortunately, is brutal at best. Here's a post on the topic:

https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/

And the post content: enter image description here

kirpit
  • 4,419
  • 1
  • 30
  • 32
Chords
  • 6,720
  • 2
  • 39
  • 61
  • 2
    Marked as answer because it simply is the answer: support sucks for base64 and you should try to avoid it when you can. We managed to get them to work, there was actually a bug in the case of this question. However, we had to mandate that Outlook 2007 be used. Apple works just fine with base64 images. – Vael Victus Sep 06 '13 at 18:44
  • 15
    Supported in Outlook 2003 , but not support in Outlook 2007? What are they thinking? – cytsunny Feb 03 '17 at 03:59
  • 6
    what is the alternative ? –  Jul 10 '17 at 09:52
  • Thanks for this, I was just about to write an SO post with my own base64 sample. I assumed that by checking my resulting email in two browsers (GMail and Outlook), and verifying that my base64 text was uncorrupted, it should be working fine.. – Memetican Aug 09 '17 at 07:34
  • @AkhilJain this worked for me https://stackoverflow.com/a/36870709/5536005 – radbrawler Sep 12 '17 at 11:56
  • This approach does actually work in Thunderbird version 52.6, but it doesn't work in Gmail, Hotmail or Yahoo. – Fiach Reid Feb 23 '18 at 12:19
72

An alternative approach may be to embed images in the email using the cid method. (Basically including the image as an attachment, and then embedding it). In my experience, this approach seems to be well supported these days.

enter image description here

Here's a little more reading: https://sendgrid.com/blog/embedding-images-emails-facts/

Aaron
  • 2,409
  • 29
  • 18
  • 4
    indeed it works, but sadly a few email services will bill you for sending attachments. – Sombriks Jun 22 '16 at 06:09
  • 26
    Also, many clients, including the Gmail web interface, will append a copy of all attached images at the end of the message, which is very, very ugly. – Daniel Saner May 16 '17 at 10:05
  • 1
    This method works well, there are code examples using it with AWS SES in both java and python in answers to [this question](https://stackoverflow.com/questions/48587432/add-embedded-image-in-emails-in-aws-ses-service). – Santiago Marietti Apr 19 '22 at 23:38
  • Linked page no longer exists so is that code exactly how I need to structure my email's source? More explanation, please! – psiodrake Apr 29 '22 at 12:48