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">