Embedding images revisited

Published August 28, 2008 by Mathew Patterson

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.

Screenshot of a multipart embedded attachment 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	Image displays inline and as attachment
Entourage 2008	Image displays inline and as attachment
Gmail	Image will not display
Windows Live Hotmail	Image will not display
Outlook 2003	Image displays inline and as attachment
Outlook 2007	Image displays inline and as attachment
Thunderbird 2	Image displays inline and as attachment
Yahoo! Mail	Image will not display

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

Posted in: Tips & Resources

7 Comments

Bart
August 28, 2008 8:21pm

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
August 28, 2008 8:41pm

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.

--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
August 29, 2008 8:14pm

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
August 30, 2008 9:08am

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
September 27, 2008 5:12am

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
September 28, 2008 9:27am

Good call Anna, that’s definitely worth looking into. We’ll give it a shot when we get some spare time.
Atrum Amicus
October 10, 2008 1:21am

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.

function SendCallMail($to,$Subject,$Html)
{
$to =$to;
$subject = $Subject;
$random_hash = md5(date(’r’, time()));
$headers = “From: ”;
$headers .= “rnContent-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---

Blog