Embedded image support in HTML email

Using data URIs to embed images in email has continued to attract a respectable amount of interest since our original post in 2008. While the results then were disappointing, we thought we'd give them a refresh to see if it's now a viable workaround for those who can't stand image blocking in email clients.

First, I personally have to admit that I've always approached image embedding with a sour dollop of skepticism, given this technique's track record of:

  • Sloppy support in email clients
  • Producing large email file sizes, since the image data is embedded in the HTML file as a huge text string
  • Adding attachments to the email message (when images are embedded as a data URI in MIME Multipart/Related content)
  • Being a technique used by spammers (and penalized by spam filters)

Nonetheless, its popularity has endured, generally because of the promise that embedding is a legitimate workaround to image blocking in email clients. But is this still true now?

The lowdown on inline embedding

Before we go elbows-deep into the results, it's worth mentioning that we're going to look at support for inline embedded images only. Unlike the aforementioned MIME Multipart/Related content method, this is something you can try at home, in your Campaign Monitor account, without having to source your own scripts or specialized tools. However, if you're comfortable with rolling-your-own multipart messages, you're more than welcome to share your experiences with us in the comments below.

To get testing, we base64 encoded a JPEG image, as per the recipe described here. The resulting text string looked something like this:

<img alt="Embedded Image" height="128" width="128" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD....snip..." />

Using this hot mess, we added the image to an email and tested away. Sadly, the results across the most popular email clients were almost as choppy as before:

Email client Embedded image displays? Comments
iOS Mail Yes  
Outlook 2003 Yes All images blocked by default
Outlook 2007+ No ALT text is replaced by 'Linked image cannot be displayed' in 2010+
All images blocked by default
Outlook.com (Hotmail) No Grey 'blocked image' placeholder displays, no ALT text
All images blocked by default
Apple Mail Yes  
Yahoo! Mail No Placeholder and ALT text display
All images blocked by default
Gmail No Placeholder and ALT text display
All images blocked by default
Android default Yes All images blocked by default

The word is out - embedded images in email do not evade image blocking. In the case of 'the Outlooks'1 above, not only were the images blocked, but they largely remained blocked, even when the other images in a newsletter were downloaded. The majority of email clients which reliably display embedded images (being Apple and iOS Mail) don't block images by default, making this technique redundant.

Now, it's over to you - have you used encoded images successfully in your campaigns? Why? Examples and lively discussion are welcomed in the comments below.

1 By the way, 'The Outlooks' is my future indie-band name, hands off yuppies.

Posted by Ros Hodgekiss

15 Comments

  • Robin
    22nd February

    Interesting.
    But how can i embed an image. Is there any service or any tutorial on how to do that.
    Eagerly waiting for the reply.

  • Ros Hodgekiss
    22nd February

    Hi Robin, you’ll find a how-to on embedding images in email in our previous post on the topic.

  • lmeurs
    6th March

    Great test, but what about MIME Multipart/Related content? Your most recent test dates from 2008, my experiences since then are great!

    I understand mailings should not be too bulky, so we would appreciate the possibility to at least embed some light default template images like a logo, header and footer image by ie. adding an ‘embed’ attribute to an image tag.

    —-

    Later (sadly caught by our filter):

    I understand that your customers have over a million feature requests and you can only honor a few of them, so do not read this post as a complaint or whatsoever.

    Having that said, I thought it wouldn’t be hard for an e-mail delivery company like yourself to replace image URL’s for content id’s and add the actual image as MIME parts. I thought you did not support this technique deliberately, to prevent exorbitant bandwidth usage.

    In the past we worked on some Perl scripts to embed images, but nowadays ie. PHPMailer (search https://code.google.com/a/apache-extras.org/p/phpmailer/wiki/UsefulTutorial for ‘AddEmbeddedImage’) and the Drupal Mime Mail module (http://drupal.org/project/mimemail) offer the same functionality (almost) out of the box.

    I do not understand why you state “Editing MIME content is out of reach to pretty much everyone” since this is a thing that should be handled by the a server side script, not by your end users.

    I assume bandwidth consumption is one of your concerns for your own as well as the subscribers’ sakes. To optionally only embed marked images (HTML image tags with an ‘embed’ attribute) would be a great improvement. And maybe by limiting the total size of an e-mail to ie. 50KB and charge extra credits for over usage you can make customers aware of what they are doing and prevent bulky e-mails.

    Thanks for the effort!

    PS: Is there a way to receive an e-mail alert when a new message in a forum thread is posted?

  • Ros Hodgekiss
    7th March

    Hi lmeurs, for the sake of practicality, we decided to only cover an embedding method that could be tried and tested by the majority of senders. Editing MIME content is out of reach to pretty much everyone (unless you’ve written your own mail script), so whether or not it works better is moot.

    That said, we’d love for you to share your methodology and results here - that would be awesome!

    Happy to add your vote to make it possible to embed images, however admittedly it may be a little hard to justify, given the poor showing above.

    ——

    Update: Sorry, we should try and get email notifications happening.

  • Tom
    24th April

    Had been using this while developing a client’s signature - as I thought support was better, but then came across this article.

    However, there is a problem with your results… I’ve just tested this with OL 2010 and gmail - both of which loaded/displayed the image immediately.

    The test email was sent from an email address whose images would normally have to be loaded manually.

  • Tjarko
    24th August

    I see no problems with Outlook, Gmail, Kerio, Thunderbird using inline cid:embedding of images…??

  • Thomas Bachem
    26th November

    The “cid” method works in ALL major email clients these days!

    I just tested it on all available clients (desktop, mobile, web) over at Litmus.com:

    Apple Mail 5: YES
    Apple Mail 6: YES
    Lotus Notes 6.5: NO
    Lotus Notes 7: NO
    Lotus Notes 8: YES
    Lotus Notes 8.5: YES
    Outlook 2000: YES
    Outlook 2002/XP: YES
    Outlook 2003: YES
    Outlook 2007: YES
    Outlook 2010: YES
    Outlook 2011: YES
    Outlook 2013: YES
    Thunderbird 3.0: YES
    Thunderbird latest: YES
    Android 2.3: NO
    Android 4.0: YES
    Gmail App (Android): YES
    Gmail (Android): YES
    Outlook.com (Android): YES
    BlackBerry 4 OS: YES
    BlackBerry 5 OS: YES
    iPhone 5s: YES
    iPad: YES
    iPad (Retina): YES
    iPad Mini: YES
    iPhone 4s: YES
    iPhone 5: YES
    Symbian: YES
    Windows Phone 7.5: YES
    AOL Mail (Explorer): YES
    AOL Mail (Chrome): YES
    Gmail (Explorer): YES
    Gmail (Chrome): YES
    Outlook.com (Explorer): YES
    Outlook.com (Firefox): YES
    Outlook.com (Chrome): YES
    Yahoo! Mail (Explorer): YES
    Yahoo! Mail (Firefox): YES
    Yahoo! Mail (Chrome): YES

  • Ros Hodgekiss
    26th November

    Wow, this is brilliant - thank you for sharing your results, Thomas! Do you have a share link to the Litmus test that you can add to this thread? We’ll certainly look into this on our end, too.

    Keen to see if more folks take to embedding images in the future :)

  • Shane
    8th January

    Haha, ‘The Outlooks’, an instant hit! Thanks for the info, and the laugh :)

  • simon
    28th January

    has the behavior of GMail changed with their new image policy?

    I would expect it’s more likely they’d show up now right?

    http://gmailblog.blogspot.com/2013/12/images-now-showing.html

  • Ros Hodgekiss
    28th January

    Hi simon, you’re right - images now show up by default. We’ve got a few observations on this change and its impact on reports in our blog.

  • Php Exp
    5th March

    I recommend http://base64image.org web tool to encode image to Base64 and back to Image. It supports drag and drop, multiple files and automatic CSS,HTML generation.

  • Olivier Jacquet
    7th March

    Something that is missing from your test is the size of the image you’re encoding. I can imaging having different results because embedding small base64 encoded images actually shows up in Gmail.

  • Ros Hodgekiss
    8th March

    Hi there Oliver, please note that all images now show up by default in Gmail, encoded or no. To our knowledge, image size generally doesn’t have an impact on display in other email clients - however large embedded images may increase the likelihood of a higher spam score, or may be annoying to download on slow/cellular connections.

  • Terry Riegel
    3rd April

    Embeded cid: images work in all html clients I tested except LotusNotes 6.6 and 7.

Got something to add?

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

Create an account