Different Ways to Include Related Images in HTML Email

There are a few different ways related images can be contained in the MIME of HTML email.

The 1st is by Content-Location.  The following MIME shows the use of Content-Location.  The URL contained in the <img> tag’s “src” attribute should match the value of the Content-Location header.

Content-Type: multipart/related; boundary=boundary1

--boundary1
Content-Type: text/html; charset=UTF-8

<html>
<body>
<p>This is an email with a related image.</p>
<img src="image.jpg" alt="Embedded Image">
</body>
</html>
--boundary1
Content-Type: image/jpeg
Content-Disposition: inline
Content-Location: image.jpg
Content-Transfer-Encoding: base64

<base64-encoded-image-data>
--boundary1--

The 2nd is by Content-ID:

Content-Type: multipart/related; boundary=boundary1

--boundary1
Content-Type: text/html; charset=UTF-8

<html>
<body>
<p>This is an email with a related image.</p>
<img src="cid:CID-ee985155-0a76-496c-898f-6f5fa5f3d3e8@EXAMPLE" alt="Embedded Image">
</body>
</html>
--boundary1
Content-Type: image/jpeg; name="image.jpg"
Content-Transfer-Encoding: base64
Content-ID: <CID-ee985155-0a76-496c-898f-6f5fa5f3d3e8@EXAMPLE>

<base64-encoded-image-data>
--boundary1--

The following Chilkat.Email methods are for adding related items using Content-ID:
AddRelatedFile, AddRelatedBd, AddRelatedData, and AddRelatedString

The methods for adding related items with Content-Location are:
AddRelatedFile2, AddRelatedBd2, AddRelatedData2, and AddRelatedString2

See the Chilkat online reference documentation, such as at: https://www.chilkatsoft.com/refdoc/csEmailRef.html#method19

Email clients, such as Outlook, GMail, Apple iPhone, Mozilla Thunderbird, etc. have different capabilities.  Some show related images constructed in both ways.  Some don’t and only work correctly with one particular format.  It’s also possible that people use older versions of email programs, which might be limited.  There is no perfect solution that works for all possible email client software.

There is also another way, but it is newer and is not as widely supported.  It embeds the image data directly into the HTML.  For example:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="Description of the image">