Image Image Image Image Image
Scroll to Top

To Top

Information Resources

Embedded vs Hosted Images, with PHPMailer

March 25, 2022 - Information Resources
Embedded vs Hosted Images, with PHPMailer

If you use PHPMailer in your applications to send HTML emails, you might have noticed that your hosted (or linked) images have become increasingly unreliable, especially with iOS 15 devices running the Mail App.

This article should help those who have encountered this issue by subtly changing the way they produce the HTML for their email messages and taking advantage of the powerful “msgHTML()” function built into the mailer library.

HTML Email Sample Used in this Article

HTML Email Sample Used in this Article

 

Let’s start by having a look at the classic method first.

Hosted Images — No longer as reliable

In the classic method, we simply set the body of the message as HTML, where the images are absolute links to an image accessible on the web.

 

$html = "

<img src='https://example.com/img/red.gif' /><br />
Red<br /><br />

<img src='https://example.com/img/green.gif' /><br />
Green<br /><br />

<img src='https://example.com/img/blue.gif' /><br />
Blue<br /><br />
";
$mail->Body = $html;

 

This method produces the following in your email message content.

Note how there are two message parts, one is text/plain (a plain-text version of your message), the other is text/html (an HTML version of your message).

 

Content-Type: multipart/alternative;
boundary="b1_qvQksPxaXREbCNJUPlFMiG1wvlxjvaqXuU4SLxXZfOs"
Content-Transfer-Encoding: 8bit

This is a multi-part message in MIME format.

--b1_qvQksPxaXREbCNJUPlFMiG1wvlxjvaqXuU4SLxXZfOs
Content-Type: text/plain; charset=us-ascii


Red

Green

Blue

--b1_qvQksPxaXREbCNJUPlFMiG1wvlxjvaqXuU4SLxXZfOs
Content-Type: text/html; charset=us-ascii

<img src='https://example.com/img/red.gif' /><br />
Red<br /><br />

<img src='https://example.com/img/green.gif' /><br />
Green<br /><br />

<img src='https://example.com/img/blue.gif' /><br />
Blue<br /><br />


--b1_qvQksPxaXREbCNJUPlFMiG1wvlxjvaqXuU4SLxXZfOs--

 

Embedded/Inline Images — More reliable with iOS devices

In this method, we take advantage of the PHPMailer “msgHTML()” function, which takes two arguments:
• the HTML we used in the classic method, except the image sources are replaced with a relative path on your server
• an absolute server path to your webroot, underneath which, the images can be found

 

$html = "
<img src='/img/red.gif' /><br />
Red<br /><br />
<img src='/img/green.gif' /><br />
Green<br /><br />
<img src='/img/blue.gif' /><br />
Blue<br /><br />"; 
$mail->msgHTML($html, '/home/example.com/public_html/');


This method produces the following.

You’ll see that the text/plain version of the message is unaltered, however the text/html version has some very impressive differences. Each image source is now replaced with an internal reference (e.g.: cid:0a741f0cca02e34cf6ffc272a9fa3ef7@phpmailer.0) to that image data, which is later attached as its own message part. Mail clients no longer need to “reach out” to a web server to find the image before loading it into the HTML of the message, because all of the images’ data along with other defining properties are included in the message content directly. The mail client will replace the internal reference inline with the image data, and your HTML will be much more reliably presented to the mail recipient.

 

Content-Type: multipart/alternative;
boundary="b1_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c"
Content-Transfer-Encoding: 8bit

This is a multi-part message in MIME format.

--b1_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: text/plain; charset=us-ascii

Red

Green

Blue

--b1_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: multipart/related;
boundary="b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c";
type="text/html"

--b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: text/html; charset=us-ascii

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<img src="cid:0a741f0cca02e34cf6ffc272a9fa3ef7@phpmailer.0"><br>
Red<br><br>
<img src="cid:81bc91555ba231f88fc99fa26968aa43@phpmailer.0"><br>
Green<br><br>
<img src="cid:0f414c40d9d4366f269cf33ad552148a@phpmailer.0"><br>
Blue<br><br>
</body></html>

--b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: image/gif; name=red.gif
Content-Transfer-Encoding: base64
Content-ID: <0a741f0cca02e34cf6ffc272a9fa3ef7@phpmailer.0>
Content-Disposition: inline; filename=red.gif

R0lGODlhKAAoAIAAAP8AAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlk
PSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpu
czptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEw
LzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cu
dzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjph
Ym91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnht
cE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDov
L25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29s
PSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlp
ZDpFNUQyM0NGQ0FCQjUxMUVDQjQ2RkZFNUZGODNFMDI5MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1w
LmRpZDpFNUQyM0NGREFCQjUxMUVDQjQ2RkZFNUZGODNFMDI5MSI+IDx4bXBNTTpEZXJpdmVkRnJv
bSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1RDIzQ0ZBQUJCNTExRUNCNDZGRkU1RkY4M0Uw
MjkxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1RDIzQ0ZCQUJCNTExRUNCNDZGRkU1RkY4
M0UwMjkxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hw
YWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX
1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+e
nZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2Zl
ZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0s
KyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAA
ACgAKAAAAieEj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rOIwUAOw==


--b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: image/gif; name=green.gif
Content-Transfer-Encoding: base64
Content-ID: <81bc91555ba231f88fc99fa26968aa43@phpmailer.0>
Content-Disposition: inline; filename=green.gif

R0lGODlhKAAoAIAAAAD/AAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlk
PSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpu
czptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEw
LzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cu
dzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjph
Ym91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnht
cE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDov
L25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29s
PSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlp
ZDpFRTkwMTE1MUFCQjUxMUVDOUQzMEZBM0ZFRUVGN0IxQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1w
LmRpZDpFRTkwMTE1MkFCQjUxMUVDOUQzMEZBM0ZFRUVGN0IxQSI+IDx4bXBNTTpEZXJpdmVkRnJv
bSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVFOTAxMTRGQUJCNTExRUM5RDMwRkEzRkVFRUY3
QjFBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVFOTAxMTUwQUJCNTExRUM5RDMwRkEzRkVF
RUY3QjFBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hw
YWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX
1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+e
nZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2Zl
ZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0s
KyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAA
ACgAKAAAAieEj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rOIwUAOw==

--b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c
Content-Type: image/gif; name=blue.gif
Content-Transfer-Encoding: base64
Content-ID: <0f414c40d9d4366f269cf33ad552148a@phpmailer.0>
Content-Disposition: inline; filename=blue.gif

R0lGODlhKAAoAIAAAAAA/wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlk
PSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpu
czptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEw
LzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cu
dzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjph
Ym91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnht
cE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDov
L25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29s
PSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlp
ZDpGNEJGNDFFRkFCQjUxMUVDQTIwNUMzMzg3QTZCQzk0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1w
LmRpZDpGNEJGNDFGMEFCQjUxMUVDQTIwNUMzMzg3QTZCQzk0RCI+IDx4bXBNTTpEZXJpdmVkRnJv
bSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY0QkY0MUVEQUJCNTExRUNBMjA1QzMzODdBNkJD
OTREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY0QkY0MUVFQUJCNTExRUNBMjA1QzMzODdB
NkJDOTREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hw
YWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX
1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+e
nZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2Zl
ZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0s
KyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAA
ACgAKAAAAieEj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rOIwUAOw==

--b2_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c--

--b1_kSCw0A5ZF3YskM1efU58gDq1SwUVLni73cWkk93c--

 

More information about this powerful feature can be found on the PHPMailer documentation, at these links:

https://github.com/PHPMailer/PHPMailer

http://phpmailer.github.io/PHPMailer/classes/PHPMailer-PHPMailer-PHPMailer.html#method_msgHTML

Tags | , , , ,