Base64 Encoded Images in Email Signatures

base64 encoded images in email signatures

Important

My answer below shows how to embed images using data URIs. This is useful for the web, but will not work reliably for most email clients. For email purposes be sure to read Shadow2531's answer.


Base-64 data is legal in an img tag and I believe your question is how to properly insert such an image tag.

You can use an online tool or a few lines of code to generate the base 64 string.

The syntax to source the image from inline data is:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

Base64 encoded image is not showing in gmail

base64 encoded images are not well supported in email. They aren't supported in most web email clients (including Gmail) and are completely blocked in Outlook. Apple Mail is one of the few clients that does support them, that's why you're able to see them there but not elsewhere.


Another thing to be mindful of with base64 encoded images is email file size. Gmail App (iOS, Android) and Outlook (iOS) truncate email messages whose file size exceeds 102KB. Remotely referenced images (Eg. <img src="http://www.website.com/image.png"> do not count towards the email's file size, but base64 encoded images do and can quickly blow out an email's file size past the 102KB limit. Just something else to consider.

Send a base64 image in HTML email

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:
Sample Image

Alternative to base64 Encoded Image sources (E-Mail Signatures)

External image file that will be added as an attachment is the only way - Word (which renders HTML messages in Outlook) does not support base64 embedded images.

Try to create a new signature with an image in Outlook and see how they reference the images.



Related Topics



Leave a reply



Submit