CODEWITHSUNDEEP
emailbase64html-emaildata-uri
Vael Victus
Vael Victus

Reputation: 4122

Send a base64 image in HTML email

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.

Upvotes: 104

Views: 247345

Answers (3)

Yohanes AI
Yohanes AI

Reputation: 3621

You can link to the image hosted on some external server. It is super easy and doesn’t impact the email size. You just refer to the image as a link in the HTML body with a simple “img” tag:

<img src="/wp-content/uploads/2018/11/blog/-illustration-email-embedding-images.png?w=640" alt="img" />

The image will be loaded as external content. Even though it doesn’t affect the size of the email message, it still impacts the performance.

Choose the server to host images properly: it should cope with high loads (in case your message is a part of mass email sending and targets thousands of recipients), and demonstrate the highest possible uptime so that the image is downloaded and displayed any time a recipient opens the email.

What to keep in mind:

  1. Dependence on the image host (if it crashes – there will be red crosses instead of images).
  2. Possible negative effect on the message spam rate.
  3. By default might be blocked by Outlook and other email clients. Remember that if the image contains security-sensitive information, you might not be allowed to host it on the third-party service.

I’ve checked our Gmail inboxes to inspect HTML emails and found out that titans like Amazon, GitHub, PayPal, and Twitter use linked images in their both transactional and marketing emails, moreover, they host them on their own dedicated servers. Not every sender can afford it, though.

Upvotes: -1

Aaron
Aaron

Reputation: 2699

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/

Upvotes: 74

Chords
Chords

Reputation: 6850

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

Upvotes: 143

Related Questions