Embedding images revisited
Posted by Mathew Patterson on August 28, 2008
In a recent post we discussed our (poor) results from testing embedded images in email. A couple of people pointed out a different method we could use that may produce better results.
So we've run through our tests again, this time with the image as a Base64 encoded attachment to the message. Here's how it went.
Embedding as an attachment
Rather than having the image src be the encoded data, this time we define the email as a multipart/related file, and place the encoded image in a separate section of the email.

Then in the body of the message, we refer to the image via its identifier which is specified for each attachment.
Results for embedded attachment cid method
This time around, we did see some better results. The image was rendered by default in the desktop clients at least, but still not in webmail clients.
| Apple Mail | |
| Entourage 2008 | |
| Gmail | |
| Windows Live Hotmail | |
| Outlook 2003 | |
| Outlook 2007 | |
| Thunderbird 2 | |
| Yahoo! Mail |
Although the images did show up ok in desktop clients, in webmail clients they did not at all, even after clicking 'display images' or equivalent. Additionally, in the desktop clients the images are shown inline, but also as attachments on the bottom of the email.
If you have just one image, it might be ok, but with most newsletters you will have an email that ends with a messy jumble of individual image attachments. Imagine the Threadless newsletter for example.
The increased initial download size, and hence slower speed, the failure to show for increasingly popular webmail clients and the hassle of attachments still seem to indicate that embedded images are not the way to go in most cases.
Our recommendation is still to have the understanding that your images may not display, and design your emails accordingly.
Thanks to everyone who commented and suggested this additional test, we appreciate the feedback.
7 comments so far
Search all posts
Dig into a category
- Articles/Tips (134)
- Email Newsletter Design (129)
- Happy Customers/Press (94)
- In the Forums (12)
- Interviews & Case Studies (10)
- New Features & Updates (115)
- Observations & Answers (116)
Stay in the loop
Prefer updates via email? Sign up below and we'll send you all the good bits each month.
Popular articles
Email design guidelines
Straight to the point advice for creating effective emails.
Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.
CSS support in email for 2008
The CSS support of even more popular email environments tested and recorded.
Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.
Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.
Email design gallery
Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.

Bart
wrote on August 28, 2008 7:21 PM
I've done a little test too with a different (but better) outcome. I've sent a mail from Outlook 2007 using a template with our company footer which contains our logo in GIF format. I've sent this mail to Gmail and Windows Live (the former Hotmail). In Gmail the image appears successfully and the option to hide/show images is not even displayed. In Windows Live the image appears as a gray square, but after I click "mark as safe" the image appears successfully. If I check the full headers of the mail I clearly see that base64 encoding has been used.
Why does my test have a different outcome? Is my test setup different?
Arjen van Reeven
wrote on August 28, 2008 7:41 PM
Thank you for testing this. The method I pointed out in the comments of the previous post was similar but not quite the same thing.
In the HTML, instead of having the IMG tag refer to a "cid:" URI point it to the actual URL of the image hosted on a server. Then append an image part to the email that includes a Content-Location header pointing to the same URL:
--multipart_related_boundary
Content-Type: image/png
MIME-Version: 1.0
Content-Transfer-Encoding: base64
Content-Location: http://example.com/images/logo.png
(image data goes here)
--multipart_related_boundary
At least in Gmail these images are shown immediately, without clicking 'display images'. Even better, they do not show up as attachments.
I would be curious to know how well this method of image inclusion works in other mail clients.
Jamie Learmonth
wrote on August 29, 2008 7:14 PM
Matthew,
We have been using this method for years, and I am not sure what we are doing differently to you, but Yahoo Mail (New version) and Gmail have no problem displaying the images without us even having to click Display images.
We have however recently had a problem with the new Mac Mail having to click 'Display Images'. Also, we of course lose the ability to track opens unless someone clicks on a link.
Jamie
Mathew Patterson
wrote on August 30, 2008 8:08 AM
Hey Jamie, if you want to contact support here at Campaign Monitor we can take a look at a typical example you use and test that too.
Anna
wrote on September 27, 2008 4:12 AM
If you guys have time I would really like to see the same test done using an embedded video file rather than an image. I was only able to test on a handful of email clients...
I'm not endorsing this over using a screenshot, I would just like to know how well its supported.
Thanks!
Dave Greiner
wrote on September 28, 2008 8:27 AM
Good call Anna, that's definitely worth looking into. We'll give it a shot when we get some spare time.
Atrum Amicus
wrote on October 10, 2008 12:21 AM
I am really struggling to bring this comcept together with a PHP HTML generated email I am making. Essentially I want to embed my images into the email I send, but I have little experience in both PHP and MIME. This is the code I have thus far.
EMAIL:
function SendCallMail($to,$Subject,$Html)
{
$to =$to;
$subject = $Subject;
$random_hash = md5(date('r', time()));
$headers = "From: s@d.co.za";
$headers .= "\r\nContent-Type: multipart/alternative; boundary=\"PHP-alt-".$random_hash."\"";
ob_start(); //Turn on output buffering
?>
--PHP-alt-
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit
Hello World!!!
This is simple text email message.
--PHP-alt-
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit
--PHP-alt---
Got anything to add?