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
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
Permalink: https://www.era404.com/info/embedded-vs-hosted-images-with-phpmailer/
