How to create an email with embedded images that is compatible with the most mail clients
Asked Answered
C

2

32

We have created a system that allows embedding an image in an outgoing email.

Here is the original message our system creates. This example contains an image attachment and an embedded image.

Mime-Version: 1.0
From: ...
To: ...
CC: 
Subject: test
x-sender: ...
x-mailer: ...
Content-Type: multipart/mixed; boundary="-------------...A128803765634794"

---------------...A128803765634794
Content-Type: multipart/related; boundary="-------------...B128803765634796"

---------------...B128803765634796
Content-Type: text/html; charset="UTF-8"

<p style="margin: 0; padding: 0"><img src="cid:083.gif" alt="" /></p>

---------------...B128803765634796
Content-type: image/gif; name="083.gif"
Content-ID: <083.gif>
X-Attachment-Id: 083.gif
Content-Disposition: Embedded; filename="083.gif"
Content-transfer-encoding: base64

............................................................................
............................................................................
......................................................
---------------PineappleCodeB128803765634796--
---------------PineappleCodeA128803765634794
Content-type: image/gif; name="waiting.gif"
Content-Disposition: Attachment; filename="waiting.gif"
Content-transfer-encoding: base64

............................................................................
............................................................................
......................................................
---------------PineappleCodeA128803765634794--

Is there another header I should add or rule I should follow?

I noticed one thing... I would guess that it is part my issue and part Gmails. but at any rate I would like to make it stop happening

When the email is received into Gmail I get

Images are not displayed.
Display images below - Always display images from ...

The embedded image is then shown as an image attachment (just like my other image attachment)

I click Display Images Below and my image is shown in the body of the email but not removed from the Attachments section.

If I go back to my in box and back to the email it looks fine.

I do not see why it does that. It it not a linked image (from external URL) and it does not happen when sending embedded images from Gmail to Gmail. That is what makes me think I might be doing somthing wrong and I am afraid that it may affect other recipients.

Cystotomy answered 25/10, 2010 at 20:46 Comment(1)
embedded is not a valid Content-Disposition. It must be either inline or attachment.Emporium
E
32

I've had success with exactly the same headers as you're using, with the following differences:

Emporium answered 15/1, 2011 at 2:39 Comment(3)
Thanks for the information @Jan. The main thing I was missing is to put the cid in angle brackets in the Content-ID header of the MIME part, like this: Content-ID: <[email protected]> while still using the non-bracketed version in the HTML like this: <img src="cid:[email protected]">. That solved the problem for me in the GMail client.Rangoon
The other thing people need to concern is that for Hotmail, <img src='cid:xxx' ... /> will NOT work. You have to use <img src="cid:xxx" ... /> instead.Liva
@EarthEngine Took me a bit to see what you meant: use single quotes instead of double quotes.Anesthesia
A
2

I was having trouble loading inline images in Gmail and I found that I was mis-using the PEAR Mail_Mime library in PHP. As already noted, the Content-ID must be formatted like a message id. The PEAR Mail_Mime library will try to add a domainID to your Content-ID if one is not supplied. It will also attempt to regex replace these Content-ID's in the HTML body of the email to maintain the link. In my case, this step was failing which did end up breaking the link from the HTML tag to the MIME attachment. So it was perfectly correct for Gmail to refuse to display the image inline. It did display the image as an attachment however.

Adultery answered 29/9, 2016 at 10:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.