Display issues with embedded images in email

Problem: I receive emails from a company, but I get the images embedded in the email showing dumped at the bottom of the email rather than in the body (“Quilter” in green, and the white pretend signature), with the place where the images are supposed to be showing a blue “?” box.

Question: What causes this and is there a way for sender or receiver to fix it?
Why is the sender’s PNG images (“logo.png” and signature.png") appearing at the bottom of the email?

I have a feeling this may be caused by the sender in how they compose their automated emails…?


Points to note:

  1. Same thing appears in Mail app on both macOS and iOS/iPadOS (for last few months). Using macOS Big Sur+Monterey and iOS/iPadOS 15+16).
  2. macOS Mail app setting “Load remote content in messages” does not fix this, BTW.
  3. None of the privacy settings nor any content blockers affect this on Mac or iOS.
  4. Clicking on (right or left click) the blue “?” doesn’t do anything, or offer any contextual menu.

I contacted the sending company who responded (obviously they presume I’m an Outlook user!):

I can confirm that occurs when Outlook on your current device is blocking the images. This can usually be resolved by selecting’ enable content’ on the pop-up that appears.

Do you have an option anywhere inside of the email that gives you this option? If there is nothing obvious that sticks out for you, can I ask you to click onto the blue question mark, please? The system will present you with an option to download the pictures.

None of these solutions work or are relevant on Apple Mail apps.


macOS Mail app screenshot (similar on iOS), redacted for privacy:

macOS Outlook app screenshot (M365 user, so tried it to see what happens), redacted for privacy:

Images used in e-mail are either internal or external. And they always require HTML formatting.

External images are typical HTML image links. An <IMG ...> tag, where the SRC parameter is a URL, used to fetch the image. Your mail app will download the image (if external images are enabled) and display it as it would on a web page with the same HTML content.

(This is why disabling external images is a privacy feature - the web server that provides the image has probably logged the request. Depending on how that URL is constructed, that log entry may be enough to identify the specific mail message, and therefore its recipient, and the fact that the message was opened.)

Internal images are sent as an attachment to the e-mail. The <IMG ...> tag in the message body will have a special format URL that references the attachment.

An attachment that is not referenced by the message body is usually presented as an object you can click on to view/download it. The actual presentation will vary from app to app.

In this case, it seems clear that the message body is displaying broken-link icons because the URLs used by the image tags are broken. Note that Outlook is presenting the images as download links at the top of the message (how Outlook presents attachments).

As for why the sender seems to think it’s OK and you are clearly seeing different results, that would require a close investigation of the message’s raw content.

1 Like

Thanks for detailed technical reply, but I’m confused a bit here.

If I understand you, you’re saying these are internal attached-type ones, rather than external ones to be downloaded by HTML when opening the email … yes?

(I too thought they were internal ones, as they are appearing as attachments – at the bottom of the email in (in Mail app), and as separate attachments to the email (in Outlook).)

If that’s right, then does this likely mean the reason they do not appear in the message body correctly is because of bad message design (i.e. the tags not being applied correctly in the message body in order to reference the attached images and have them display in the correct position)?

Email = confusing! :upside_down_face:

They are internal images - that’s why they are being presented as attachments in your mail app.

Without seeing the guts of the message, it’s impossible to say for sure why they are not being displayed inline, but I am guessing that either the message body is malformed or the sender is using a non-standard feature that works with his mail software but not yours.

1 Like

Well I emailed the company again – they may or may not be able to fix the issue, who knows.

The reason I asked the question, was that apart from some of this company’s emails, this weird email graphics display problem has happened intermittently on emails from other sources for years now, and I’ve always wondered what causes them to not display in the message body, but instead only be separate attachments.

Anyway, thanks! ;-)

Here’s some of the ugly details if you want to dig through the raw text of the problematic e-mail.

MIME is a standard for representing arbitrary data types in e-mail (also used for other Internet services). There are a few MIME types that are used to send mail with images embedded in the message:

multipart/mixed

This MIME type allows a single message to contain multiple items that are considered independent of each other. Like a message and some attachments. For example:

From: Me <me@example.com>
To: You <you@example.net>
Subject: Attachment
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary=AnyArbitraryString

--AnyArbitraryString
Content-Type: text/plain

Hi.  Here's a picture for you.
--AnyArbitraryString
Content-Type: image/jpeg; name="picture.jpg"
Content-Transfer-Encoding: base64

.... Lots of BASE64-encoded binary data ...
--AnyArbitraryString--

In the above example, the Content-Type in the main header declares this as a multi-part message, which contains a mixture of different independent documents.

The boundary is a string used to separate the parts from each other within the mail message. The string, when prefixed with -- indicates the start of a part (ending the previous part, if applicable) and the string, when also suffixed with -- indicates the end of all the parts. Although the string can be anything, most real-world e-mail software will generate a very long string containing some mix of keywords, random data and serial-number data, in order to ensure that it is unique and won’t ever appear within a part’s content. (If the boundary string appears within any part’s content, you’ll end up with a corrupt message.)

Each part may contain part-specific e-mail headers. In the above example, they identify the data type and (for the JPEG image) the way the binary data is encoded in the mail (since e-mail is a text-based medium).

multipart/alternative

This MIME type is meant for two parts that are meant to be alternative representations of the same content. It is usually used when sending HTML or rich-text format messages, in order to include a plain text version, so e-mail clients that don’t support HTML or rich text can display something useful to the reader. For example:

From: Me <me@example.com>
To: You <you@example.net>
Subject: Alternative mail
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary=myBoundary

--myBoundary
Content-Type: text/plain

Hi!.  How are you doing?
--myBoundary
Content-Type: text/html

<HTML><BODY><P>
<B>Hi!.</B>  How are you doing?
</P></BODY></HTML>
--myBoundary--

In the above example, the Content-Type in the main header declares the message as having alternative representations.

Within each alternative are more headers (in this case, Content-Type) identifying the format of the data. In the above example, there’s a plain-text version and an HTML version. The HTML version has some formatting. It could be any valid HTML document. An e-mail client is expected to choose the format it can best present and display it, and will normally not display the other alternatives unless explicitly told to do so (e.g. by a “View Original” button or menu item).

Note that while the alternatives should be variations on the same content, there’s nothing forcing them to be. For example, I’ve seen phishing e-mail where the plain-text version looks perfectly innocent, but the HTML version contains links to malware. Shenanigans like this can make it difficult to figure out what’s going on when problems occur. Fortunately, most legitimate mail-sending software doesn’t play games like that.

But that’s just how HTML mail is put together (at its simplest). In order to embed an attachment in the middle of an HTML message, we need to declare two parts as being related to each other, not separate independent or alternative parts. For this we have:

multipart/related

This tells the mail client that the two parts should be considered parts of a single item. Like an HTML file and an embedded image combine to form a single document. For example:

From: Me <me@example.com>
To: You <you@example.net>
Subject: Embedded
MIME-Version: 1.0
Content-Type: multipart/related; boundary=TheBoundary

--TheBoundary
Content-Type: text/html

<HTML><BODY><P>
Here's a picture for you: <IMG SRC="cid:picture.jpg" />
</P><P>
I hope you enjoy it.
</P></BODY></HTML>
--TheBoundary
Content-Type: image/jpeg; name="picture.jpg"
Content-Transfer-Encoding: base64
Content-ID: <picture.jpg>

.... Lots of BASE64-encoded binary data ...
--TheBoundary--

In this message, there are two related parts. One is an HTML message and the other is a JPEG image.

Note that the JPEG image has a Content-ID header. This identifies the image. It is used by the HTML code via its cid: URL, telling the HTML rendering engine to display the image at that place in the message.

Commonly, the message text is a multipart/alternative part, not just HTML. So readers without HTML capability can see something. This isn’t a problem. When nesting one multipart document in another, software will use two different boundary strings, and this will let the recipient’s mail client know which parts go with which other parts.:

From: Me <me@example.com>
To: You <you@example.net>
Subject: Embedded with Alternative
MIME-Version: 1.0
Content-Type: multipart/related; boundary=Boundary1

--Boundary1
Content-Type: multipart/alternative; boundary=Boundary2

--Boundary2
Content-Type: text/plain

Here's a picture for you:

I hope you enjoy it
--Boundary2
Content-Type: text/html

<HTML><BODY><P>
Here's a picture for you: <IMG SRC="cid:picture.jpg" />
</P><P>
I hope you enjoy it.
</P></BODY></HTML>
--Boundary2--
--Boundary1
Content-Type: image/jpeg; name="picture.jpg"
Content-Transfer-Encoding: base64
Content-ID: <picture.jpg>

.... Lots of BASE64-encoded binary data ...
--Boundary1--

In the above example, we have three parts. Two alternatives containing the message body and a related part containing the image.

An HTML-capable mail viewer should display the HTML message, which will inline the related image via its cid: URL. A non-HTML-capable viewer will display the plain text message and (hopefully) will provide a way to download the image as an attachment.

There are many other ways to do this, but the above examples should be enough to help you muddle through the guts of an e-mail’s raw content.

See also:

4 Likes