Embedding Image in HTML 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 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 to embed image in HTML email template?

Host the Image publicly in Google Drive by sharing the link 'public on the Web' or 'anyone with the link'. Then use this link http://drive.google.com/uc?export=view&id=FILE_ID to get direct access to the image. You should replace the FILE_ID with actual id from Google Drive link.

Example :

Google Drive Link : https://drive.google.com/file/d/17iWczcf1T_D4kGRaQYBh6J2XOQI181u6/view?usp=sharing

Generated Link : http://drive.google.com/uc?export=view&id=17iWczcf1T_D4kGRaQYBh6J2XOQI181u6

Now you can use this link in your template.

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).

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/

Embedding Image in HTML Email