Embedded image in html email base64 outlook

A classic challenge!

To embed an image in an HTML email that works in Outlook, you'll need to use a combination of techniques. Here's a step-by-step guide:

Step 1: Convert the image to Base64

Use a tool like Online-Convert.com or a programming language like Python to convert your image to Base64. You can also use an online Base64 encoder like Base64.io.

Step 2: Create the HTML code

Create an HTML email template with the following structure:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- Your email content here -->
    <img src="data:image/jpeg;base64,[Base64 encoded image]" alt="Image">
  </body>
</html>

Replace [Base64 encoded image] with the actual Base64 encoded image.

Step 3: Use a fallback for Outlook

Outlook doesn't support the data: protocol, so you'll need to provide a fallback. Add a cid attribute to the img tag:

<img src="cid:image" alt="Image">

Step 4: Add the image as an attachment

Add the image as an attachment to your email. This will allow Outlook to display the image correctly.

Step 5: Use a content ID (CID) in the email

In the email's multipart/mixed section, add a Content-ID header that matches the cid attribute in the img tag:

<META http-equiv="Content-Type" content="multipart/mixed; boundary="multipart-mixed">
--multipart-mixed
Content-Type: image/jpeg; name="image.jpg"
Content-Transfer-Encoding: base64
Content-ID: <image>

[Base64 encoded image]

--multipart-mixed--

Putting it all together

Here's the complete HTML email template:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- Your email content here -->
    <img src="cid:image" alt="Image">
  </body>
</html>

<META http-equiv="Content-Type" content="multipart/mixed; boundary="multipart-mixed">
--multipart-mixed
Content-Type: image/jpeg; name="image.jpg"
Content-Transfer-Encoding: base64
Content-ID: <image>

[Base64 encoded image]

--multipart-mixed--

Tips and Variations

Make sure to use the correct MIME type (image/jpeg) and encoding (base64) for the image attachment.
If you're using a programming language to generate the email, you can use libraries like email in Python or nodemailer in Node.js to help with the encoding and attachment process.
Some email clients may not support Base64 encoded images. You can provide a fallback image or use a different encoding method, like inline images.

By following these steps, you should be able to embed an image in an HTML email that works in Outlook.

Mail Knowledge

Embedded image in html email base64 outlook