How to Embed Images in Email

embedding image in html email

Try to insert it directly, this way you can insert multiple images at various locations in the email.

<img src="data:image/jpg;base64,{{base64-data-string here}}" />

And to make this post usefully for others to:
If you don't have a base64-data string, create one easily at:
http://www.motobit.com/util/base64-decoder-encoder.asp from a image file.

Email source code looks something like this, but i really cant tell you what that boundary thing is for:

 To: email@email.de
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="Sample Image">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

//EDIT: Oh, i just realize if you insert the first code snippet from my post to write an email with thunderbird, thunderbird automatically changes the html code to look pretty much the same as the second code in my post.

How to embed images in email

As you are aware, everything passed as email message has to be textualized.

You must create an email with a multipart/mime message.
If you're adding a physical image, the image must be base 64 encoded and assigned a Content-ID (cid). If it's an URL, then the <img /> tag is sufficient (the url of the image must be linked to a Source ID).

A Typical email example will look like this:

From: foo1atbar.net
To: foo2atbar.net
Subject: A simple example
Mime-Version: 1.0
Content-Type: multipart/related; boundary="boundary-example"; type="text/html"

--boundary-example
Content-Type: text/html; charset="US-ASCII"

... text of the HTML document, which might contain a URI
referencing a resource in another body part, for example
through a statement such as:
<IMG SRC="cid:foo4atfoo1atbar.net" ALT="IETF logo">

--boundary-example
Content-Location: CID:somethingatelse ; this header is disregarded
Content-ID: <foo4atfoo1atbar.net>
Content-Type: IMAGE/GIF
Content-Transfer-Encoding: BASE64

R0lGODlhGAGgAPEAAP/////ZRaCgoAAAACH+PUNv
cHlyaWdodCAoQykgMTk5LiBVbmF1dGhvcml6ZWQgZHV
wbGljYXRpb24gcHJvaGliaXRlZC4A etc...

--boundary-example--

As you can see, the Content-ID: <foo4atfoo1atbar.net> ID is matched to the <IMG> at SRC="cid:foo4atfoo1atbar.net". That way, the client browser will render your image as a content and not as an attachement.

Hope this helps.

How to embed images in HTML email on the mail server?

What you need to do is encode the file to Base64, and include it like this:

<img src="data:image/gif;base64,R0lGODlhUAA..(the rest of your base64 encoded file)..">

http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

http://dean.edwards.name/weblog/2005/06/base64-ie/

How to embed an image into an Outlook HTML email message?

If a manual step in the process is an option, you can do it like this:

create the HTML automatically or manually as a saved HTML file, with <img> tags that link to locally-saved image files
attach the HTML to an Outlook email using the 'Insert as text' option tucked away under the down-arrow on the "Insert" button when selecting the HTML file as an attachment.

This populates the HTML email with the HTML from the file and embeds all images. I believe this tool uses Base64 encoding to embed the images as described in Sam's email.

Depending on the workflow, this method might be easier than converting images to Base64 yourself.

Note that this method only works in Outlook for Windows, not Outlook for Mac.

How can I embed an image into an email acceptable to Outlook

Most email clients do not support Base 64 images in the HTML. (See https://www.caniemail.com/features/image-base64/)

However, you can add your image as a CID embedded attachment to your email, and then link to that in your HTML email.

Here’s another Stack Overflow thread answering this question : How to embed images in html email

Images in email: link or embed?

Because by embedding the images in the email, the email size gets a lot larger, uses more bandwidth for you to send it, and more for them to receive it. If the images are important to the email's purpose then embed them, if they are to just make it look good then link them.

Embedding attached images in HTML emails

Be more specific on how you build the HTML mail message.

The result will be a multipart-MIME message with a text/html part (if you really do it right with an alternate part of type text/plain) and several images, which are then referenced from within the HTML.

See RFC 1813 and RFC 2378 for more information about content-id in mixed MIME and related data (referred by CID in the HTML source).