embedding image in html email

how to send html email with images
embed base64 image in email
cid image email outlook
sendgrid embed image
embed image in email
embed image in email c#
inline embedding
embed image in email outlook

I'm trying to send a multipart/related html email with embedded gif images. This email is generated using Oracle PL/SQL. My attempts have failed, with the image showing up as a red X (in Outlook 2007 and yahoo mail)

I've been sending html emails for some time, but my requirements are now to use several gif images in the email. I can store these on one of our web servers and just link to them, but many users email clients will not show them automatically and will need to either change settings or manually download them for each email.

So, my thoughts are to embed the image. My questions are:

  1. What am I doing wrong here?
  2. Is the embedding approach the correct one?
  3. Any other options if I need to use more and more images? Attachments won't work, as the images are typically logos and icons that won't make sense out of the context of the message. Also, some elements of the email are links into an online system, so generating a static PDF and attaching won't work (to my knowledge anyway).

snippet:

MIME-Version: 1.0
To: me@gmail.com
BCC: me@yahoo.com
From: email@yahoo.com
Subject: Test
Reply-To: email@yahoo.com
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html> 

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--

Many thanks.

BTW: Yes, I have verified that the base64 data is correct, as I can embed the image in the html itself (using same algo use for creating header data) and see image in Firefox/IE.

I should also note that this is NOT for spam, the emails are sent to specific clients who are expecting it daily. The content is data-driven, and not adverts.

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="">
  </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 Your Emails: The Facts, of embedding images in your email by 1) Linking out to the image on a CDN 2) Referencing via a CID tag 3)Linking to an image in HTML. Using Base64 to embed images in html is awesome. Nonetheless, please notice that base64 strings can make your email size big. Therefore, 1) If you have many images, uploading your images to a server and loading those images from the server can make your email size smaller. (You can get a lot of free services via Google)

The other solution is attaching the image as attachment and then referencing it html code using cid.

HTML Code:

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id="1" src="cid:Logo.jpg">
    </body>
</html>

C# Code:

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("abc@xyz.com");
string file = @"C:\Users\acv\Pictures\Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments[0].ContentId = "Logo.jpg";
email.SendAndSaveCopy();

What Does It Mean to Embed Images in An HTML Email? (Updated , Embedding an Image in an HTML Email is still a bit of a touchy subject. Our guide includes both embedding suggestions and alternate methods  Inline embedding is a simple and faster method to use. You can inline your images into the HTML code by embedding it as a base64 string. Web coding tools such as ImagetoBase64Converter can be used

I don't find any of the answers here useful, so I am providing my solution.

  1. The problem is that you are using multipart/related as the content type which is not good in this case. I am using multipart/mixed and inside it multipart/alternative (it works on most clients).

  2. The message structure should be as follows:

    [Headers]
    Content-type:multipart/mixed; boundary="boundary1"
    --boundary1
    Content-type:multipart/alternative; boundary="boundary2"
    --boundary2
    Content-Type: text/html; charset=ISO-8859-15
    Content-Transfer-Encoding: 7bit
    [HTML code with a href="cid:..."]
    
    --boundary2
    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]
    
    --boundary2--
    --boundary1--
    

Then it will work

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  Inline embedding requires you have a base64 string — a type of encoding scheme — of your image. But with that encoded string, you can simply embed your image into your email through a standard HTML

Top Expert Tips on How to Embed Images in HTML Emails, file on your computer. Select the file and then click the "Insert" button. Inserting Images Into HTML Email. Images can be displayed within HTML email without physically inserting them. This keeps email size down because the images do not travel with the email. Thus, there is less chance of getting trapped in email filters when filtering rules consider the size of the email.

Using Base64 to embed images in html is awesome. Nonetheless, please notice that base64 strings can make your email size big.

Therefore,

1) If you have many images, uploading your images to a server and loading those images from the server can make your email size smaller. (You can get a lot of free services via Google)

2) If there are just a few images in your mail, using base64 strings is definitely an awesome option.

Besides the choices provided by existing answers, you can also use a command to generate a base64 string on linux:

base64 test.jpg

How to Embed Photos in Email Messages, How do I insert an image into an HTML email in Outlook? Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:

Embedding images in email? Consider these 3 techniques, Here are a few options available to embed images in your HTML emails: Linking Images Directly. The best practice is to upload the images to a directory on your server and then link them to your HTML email using full URL paths. Base64 Encoding. Inline embedding is a simple and faster method to use. CID Embedding. tag in the HTML email body and the 'src' of the image tag points to the HTTP URL of the image. To get this HTTP URL, the image has to be hosted somewhere, either on your own website or somewhere on the internet. But in many scenarios, you don't have the HTTP URL to the image and you want to send

Using Images in HTML Email | Jason Rodriguez, But with that encoded string, you can simply embed your image into your email through a standard HTML tag and be done. No deep dives into  Embedding an image into an email message is the act of adding the image into the coding of the email template for it to appear amongst the text once the subscriber opens it, instead of appearing as an email attachment.

Images, Coding Images. Adding an image to an email is actually surprisingly simple. All it really requires is the img tag. But, there are a few  Whether you’re creating a Read Me or streamlining your file structure, embedding images directly into your HTML may be just the thing you need. This isn’t practical for day-to-day decide, but at least now you have the option.

Comments
  • Quick question: are you hosting these images off-site or embedding them directly into the email?
  • Part of my question really, I can do either. I'm try here to embed them, but not sucessfully. If I just link to them, many users won't see the images without downloading them first, which I'd like to avoid.
  • A regular <img src="URL" /> worked for me, but it was an image that I hosted off-site. That doesn't work for you?
  • "works" is subjective...yes, it works if the user is willing to download the images each time, but I'd like to avoid that and embed the image.
  • @JonLim: thanks for looking into it, see my comments in the answer for what I was missing.
  • tried this first, it doesn't work for me for email. works fine for viewing in IE/Firefox, but not sent as email.
  • Perhaps u know a way (what would the content type be? text/html? the email headers I'd need to know to send a mixed html/image file this way)
  • @Zesty use @[username] to alert someone, just saw your question. I use utl_smtp. For me, I had to create build a clob with the html body, boundaries, etc and then send via utl_smtp. See here for simple example: oracle-base.com/articles/misc/EmailFromOraclePLSQL.php Note that this link does not show embedded images approach, but has detail to get you going.
  • Data URIs in emails aren't supported in many mainstream clients and should not be used, see: campaignmonitor.com/blog/post/3927/…
  • It does not seem to work in hotmail / icloud =( did I miss anything
  • Struggling on this one. I have coded exactly as above, but the image is not appearing (just a frame with the alt text; the text works fine). My Content-ID is <filename.jpg> so my href="cid:filename.jpg" -- is there some special trick to the value or syntax of Content-ID and cid: ?
  • I checked with RFC2392 and the CID expression appears to be valid. But it still doesn't display.
  • I wrote an answer to a similar question and created an ascii art to explain the structure: stackoverflow.com/a/40420648/633961