Embedding images revisited

We have updated results for embedded image/data URI support in email - view our latest post.

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 MailYes Image displays inline and as attachment
Entourage 2008Yes Image displays inline and as attachment
GmailNo Image will not display
Windows Live HotmailNo Image will not display
Outlook 2003Yes Image displays inline and as attachment
Outlook 2007Yes Image displays inline and as attachment
Thunderbird 2Yes Image displays inline and as attachment
Yahoo! MailNo 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. Please note that Campaign Monitor itself does not support embedding images in this way at all, we tested outside of our application.

Thanks to everyone who commented and suggested this additional test, we appreciate the feedback.

Posted by Mathew Patterson

7 Comments

  • Bart
    29th August

    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
    29th August

    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
    30th August

    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
    30th August

    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
    27th September

    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
    28th September

    Good call Anna, that’s definitely worth looking into. We’ll give it a shot when we get some spare time.

  • Atrum Amicus
    10th October

    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: .(JavaScript must be enabled to view this email address)”;
      $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—-

Sign up for free.
Then send campaigns for as little as $9/month

Create an account