base64 encoded images in email signatures

Asked 2/2, 2012 at 9:44 Answered 23/3, 2015 at 7:37

127

I have to include some images (company logo's etc) in email signatures. I've had all sorts of issues using the embedded images produced by the email system in question (they get sent as attachments generally) and as linked images (requiring permission to display them in the email received).

I have just seen some email from exchange that has a base64 image representation of the logo and uses a tag to do the displaying. I'm looking for some information on how I could do this in an email signature if possible (how do I generate the base64 version of the logo for a start and what code do I need to get it to work)?

I've tried simple things such as

<body>
<span>
<img src=.... >
</span>
</body>

but all I get is the alt text so I'm obviously doing something wrong here.

Overwork answered 2/2, 2012 at 9:44 Comment(1)

possible duplicate of How to embed images in email – Admonish 2/12, 2013 at 16:58

2024 Update

Important! My answer below shows how to embed images using data URIs. This is a powerful feature in any modern web browser, but is still not supported in some email clients, notably Gmail.

For maximum compatibility be sure to read Shadow2531's answer.
Supported Email Clients

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

Odor answered 2/2, 2012 at 9:49 Comment(8)

Tried this but Gmail doesn't seem to support it. The embedded attachment solution seems to work though. – Cologne 5/6, 2012 at 6:27

Hi Tim it would be a great help if you can provide some inputs on #11125040. Thanks in advance. Another thing is there any resolution so that mail domain like yahoo,gmail also support the your solution – February 20/6, 2012 at 17:10

I think attachments (such as @Shadow2531's solution) may be the more widely supported solution, but the only way to know is to test several major email clients with different security settings applied. Further complicating the matter is that you can receive email both on the web and in a variety of clients. For example, Gmail may behave differently when viewed on the web versus inside of Outlook or Thunderbird. – Odor 20/6, 2012 at 21:21

Check this link for support for using this technique in mail clients campaignmonitor.com/blog/post/3927/… (tl;dr some support but inconsistent, particularly in Outlook) – Ichabod 29/7, 2013 at 3:36

Is embedding still unreliable for most email clients in 2016? – Stockbreeder 23/6, 2016 at 9:58

@EirikBirkeland This website gives an overview of HTML/CSS support in email clients: caniemail.com/features/image-base64 Update 2021: Gmail doesn't support base64 images :-( – Leupold 20/1, 2021 at 14:43

If you using nodemailer, check the solution here – Eyeopening 26/7, 2021 at 15:11

This solution works great (including Gmail as the recipient) and avoids all traceability. – Estriol 17/1 at 6:44

165

The image should be embedded in the message as an attachment like this:

--boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Transfer-Encoding: base64
Content-ID: <0123456789>
Content-Location: sig.png

base64 data

--boundary

And, the HTML part would reference the image like this:

<img src="cid:0123456789">

In some clients, src="sig.png" will work too.

You'd basically have a multipart/mixed, multipart/alternative, multipart/related message where the image attachment is in the related part.

Clients shouldn't block this image either as it isn't remote.

Or, here's a multipart/alternative, multipart/related example as an mbox file (save as windows newline format and put a blank line at the end. And, use no extension or the .mbs extension):

From 
From: [email protected]
To: [email protected]
Subject: HTML Messages with Embedded Pic in Signature
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="alternative_boundary"

This is a message with multiple parts in MIME format.

--alternative_boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

test

-- 
[Picture of a Christmas Tree]

--alternative_boundary
Content-Type: multipart/related; boundary="related_boundary"

--related_boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>test</p>
        <p class="sig">-- <br><img src="cid:0123456789"></p>
    </body>
</html>

--related_boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Location: sig.png
Content-ID: <0123456789>
Content-Transfer-Encoding: base64

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
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

You can import that into Sylpheed or Thunderbird (with the Import/Export tools extension) or Opera's built-in mail client. Then, in Opera for example, you can toggle "prefer plain text" to see the difference between the HTML and text version. Anyway, you'll see the HTML version makes use of the embedded pic in the sig.

Arum answered 2/2, 2012 at 9:49 Comment(22)

it would be a great help if you can provide some inputs on #11125040. – February 20/6, 2012 at 17:13

@MSach Will take a look when I get a chance. – Arum 21/6, 2012 at 1:39

Why do you use the Content-Location header to store the filename? It's supposed to be a URI that functions as an ID so that you can reference that body part from a different body part. See RFC 2557. Since you are not using the way the RFC intends, I'm curious to know why you include it. – Admonish 26/3, 2013 at 16:36

@Admonish It's storing a relative URI to the file, not the filename string. Opera's built-in mail client often uses it so I show it in addition to the content-id way as when supported, it's easier than messing with ids. – Arum 27/3, 2013 at 16:51

"The image should be embedded in the message as an attachment like this ..." could You tell me how can I add this parameters in Intent? – Danikadanila 27/5, 2013 at 14:22

@Danikadanila Sorry. Don't even know what "Intent" is. – Arum 1/7, 2013 at 16:22

Can you tell me @Arum where the multipart/related code will go? is it supposed to be in the same HTML file? – Gauntlett 20/8, 2014 at 18:21

@FaisalAshfaq I'm not sure what you mean. There is no HTML file. This is an eml/mbox file. The multipart/related sections are marked in the example. The HTML markup/page is one of the related sections and the image attachment is the other that the HTML part references. The related parts are inside the second alternative part. – Arum 26/8, 2014 at 3:38

"like this"... like what? I'm with Faisal, how do you get this into your message? – Ziegfeld 1/12, 2016 at 22:55

@Scott This is not something you do manually. Your mail client does this when you insert an image into an HTML message (via an insert command or drag and drop) that you're composing. Also, when you just attach an image file (content-disposition: attachment), your client still embeds it in the source. The only reason you'd do this manually is if you're programming a client or some server-side script or extension etc. Or, in the case of the example mbox file above, I just hand-coded it with a text editor so the example can be imported into a mail client. – Arum 2/12, 2016 at 15:54

This question is specifically about signatures, so you're recommending his users drag and drop the image to the email every time they compose a new message? – Ziegfeld 2/12, 2016 at 15:55

@Scott No. Any client that supports HTML signatures in HTML messages should do things automatically when you set a signature for the account/alias/identity/address once. As in, when you compose/reply, the signature with the image is automatically inserted. If the client doesn't support that, then of course, there's really nothing you can do except to insert an image every single time. Templates (or editing a sent message that looks like a template), in supported clients can help with this too. – Arum 2/12, 2016 at 16:18

How do you get the image into the signature? Your post starts out "the image should be embedded into the message as an attachment". But now you're saying it's automatically done when you set a signature for the account. I'm not trying to be a jerk, I'm genuinely confused! – Ziegfeld 2/12, 2016 at 16:21

@Scott That depends on the client. In Thunderbird, you choose to attach a signature from an HTML file. Then, in the HTML file, you use an HTML img tag with a src="path to local image file". It is then up to Thunderbird to base64-embed that local image and reference it when the signature is inserted. – Arum 2/12, 2016 at 16:28

Okay, that comment jarred my understanding. What I've done is create an HTM file then loaded it into outlook. I then used the signature editors "replace image" functionality to select a local file (instead of the base64 encoded image I had manually included). This seems to do what you mean. Thanks for sticking with me. – Ziegfeld 2/12, 2016 at 16:30

@Scott Awesome. To test that it's truly working, send a message to yourself. In the received message, view source and make sure that Outlook embedded it properly and didn't just reference the local image on your hard drive. If Outlook just does the latter, when you send to someone else, they won't see the image. – Arum 2/12, 2016 at 16:38

hi@Arum The OP was asking about adding an image to an HTML email signature whereas this answer implies you have to add the above code in the body of an email? Or am I understanding this incorrectly? And if I am understanding this incorrectly, where do you add that --boundary code you show? Does it go in the <head> section of a .htm file or above all of the HTML in an .htm file? – Barmen 19/1, 2020 at 1:43

@TheChewy, my post is about how an email client (or a developer coding an email source generator on a server) should generate the source of the message to embed an image in a signature. It's not about how you as a user would insert html markup in the html signature field in your client's signature options. – Arum 23/1, 2020 at 7:52

@Shadow2531Ah OK. Thanks for clarifying. – Barmen 23/1, 2020 at 17:0

I've a base64, how can I know the Content-ID? – Instructor 28/5, 2021 at 11:51

@heisenberg, there's a discussion about that at <#39577886>. – Arum 29/5, 2021 at 2:33

When do this method, does this work with tracking pixels? – Caitiff 23/3, 2023 at 22:46

2024 Update

Important! My answer below shows how to embed images using data URIs. This is a powerful feature in any modern web browser, but is still not supported in some email clients, notably Gmail.

For maximum compatibility be sure to read Shadow2531's answer.
Supported Email Clients

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

Odor answered 2/2, 2012 at 9:49 Comment(8)

Tried this but Gmail doesn't seem to support it. The embedded attachment solution seems to work though. – Cologne 5/6, 2012 at 6:27

Is embedding still unreliable for most email clients in 2016? – Stockbreeder 23/6, 2016 at 9:58

If you using nodemailer, check the solution here – Eyeopening 26/7, 2021 at 15:11

This solution works great (including Gmail as the recipient) and avoids all traceability. – Estriol 17/1 at 6:44

Recently I had the same problem to include QR image/png in email. The QR image is a byte array which is generated using ZXing. We do not want to save it to a file because saving/reading from a file is too expensive (slow). So both of the answers above do not work for me. Here's what I did to solve this problem:

import javax.mail.util.ByteArrayDataSource;
import org.apache.commons.mail.ImageHtmlEmail;
...
ImageHtmlEmail email = new ImageHtmlEmail();
byte[] qrImageBytes = createQRCode(); // get your image byte array
ByteArrayDataSource qrImageDataSource = new ByteArrayDataSource(qrImageBytes, "image/png");
String contentId = email.embed(qrImageDataSource, "QR Image");

Let's say the contentId is "111122223333", then your HTML part should have this:

<img src="cid: 111122223333">

There's no need to convert the byte array to Base64 because Commons Mail does the conversion for you automatically. Hope this helps.

Delorsedelos answered 23/3, 2015 at 7:37 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

2024 Update

2024 Update

Recommended topics

Hot tags