Embedding images in email

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

With the well known growth in image blocking by email clients, some customers have been looking for alternatives to linking web based images into HTML emails.

Some years ago, image embedding used to the standard way images were included in emails. It differs from linked images in that the image itself is actually encoded, and included inside the message.

So once you have downloaded the email, you are not reliant on a web connection to view the images, because you have it all locally. It sounds perfect, except for a big increase in email size vs downloading just the HTML and then the images afterwards.

We get asked fairly often why we don't allow image embedding to work around image blocking. Our position ('It is not worth it for the cost in filesize) has been based on testing done some years ago, before image blocking was so common. So we though it was time to update our test results.

Testing embedded images in email

Here's the recipe for creating HTML emails with embedded images:

  • Take one HTML page, with your text content and CSS
  • Grab an image you want to send embedded in your email
  • Use a Base64 encoder to turn your binary photo into a huge text string
  • Replace your normal image source with that string
  • Save your file and send as normal

When you have added your encoded image, you end up with an HTML document which looks something like this:

Encoded image in an HTML document

You will notice you have an enormous text file if you are encoding any kind of photograph. I took this file, and sent it out to a bunch of the major email clients, to see if they would render it.

Embedded images test results

The results were almost uniformly bad. Of all the email clients we tested, only Apple Mail showed the photo at all (and it shows linked images by default anyway).

Email Client Result Notes
Apple Mail Yes Showed perfectly
Entourage 2008 No Alt attribute and image outline only
Gmail No Alt attribute and missing-image outline only
Windows Live Hotmail No A grey block with no alt attribute
Outlook 2003 No Alt attribute and missing-image outline only
Entourage 2007 No Alt attribute and missing-image outline only
Thunderbird 2 No Alt attribute, no missing image outline
Yahoo! Mail No Alt attribute and missing-image outline (Classic & New)

So based on our results, it is clearly not worth using embedded images in your emails. All you will be doing is forcing people to download encoded images that they will not be able to view.

Instead, the best course is to follow our normal design guidelines and design your emails knowing that some people will not see your images.

That means making sure your copy stands alone, and that it is visible high enough for people to see if images are blocked. Don't forget to link prominently to a web version too, especially if your images are particularly important.

Update See our follow up post in which we tested with a different method of embedding, with somewhat better results.

Posted by Mathew Patterson

10 Comments

  • Ron Blaisdell
    25th August

    I have really enjoyed your blog, and have been reading it for a couple of years now - but I must say - I was pleasantly surprised to see that you got the same results that I did when I ran my tests back in early July:

    http://www.b2bemailmarketing.com/2008/07/test-shows-embe.html
    http://www.banane.com/workblog/?p=249
    http://community.constantcontact.com/forum/default.aspx?g=posts&t=2580
    http://tinyurl.com/6drner

    Sounds like my testing method is improving.  Thanks for the testing validation!

  • Dean
    25th August

    I can understand blocking linked images because it stops useless downloads and it also stops a message being sent to people like Campaign Monitor that the email has been opened. But with embedded images, the download has already occurred and no web bug messages are sent, so why not show them?

  • Arjen
    26th August

    Support for data URIs is relatively recent, even in browsers like Safari and Opera. Firefox introduced it years ago but Internet Explorer will only add support in the next version, IE8.

    Multipart email on the other hand has been around for a while. I would be interested in embedding images as attachments and tagging them with a Content-Location header. The img tag in the HTML then refers to the content location and the email client can choose to display the content of the attachment instead of the live URL.

    The technique can be seen in action in, for example, FriendFeed’s daily update emails where the logo and a few small images are being embedded.

    HTML:

    Attachment header:

    Content-Type: image/png
    MIME-Version: 1.0
    Content-Transfer-Encoding: base64
    Content-Location: http://friendfeed.com/static/images/logo-small.png?v=1a8a38ee088024e60e315eb8a54fa121

    Downsides of embedding images like increasing send size and possibly decreasing trackable open rates still stand. But I think the upside of for example being able to immediately show a logo at the top of the email is huge in this age of image blocking.

  • Mathew Patterson
    26th August

    I imaging it is this issue:

    Image blocking was also intended by preventing dodgy images from spam and adult emails from showing, and embedded images are just as likely to cause those problems.

  • Filip Salomonsson
    26th August

    What about images that are attached as multipart/related entities, and referred to by their cid url? Isn’t that a more common way of embedding images than using data urls?

  • Andrius Baranauskas
    26th August

    Filip, second that. We are using the multipart/related entities method and it works perfectly on many email clients. This way we can be more or less sure that the images get delivered and showed. I have not heared about the method mentioned in the article before.

  • Mathew Patterson
    26th August

    Thanks for the comments, we’re also going to test the cid / attachment method and update our results.

  • Matthew Trow
    27th August

    I used the cid attachment method years ago. It worked great, but it really isn’t a good idea. Heck, we used to fire off flash animations in emails for some clients, until those got blocked.

    What I’ve learnt in the years since those heady days, is that you should always give your users the control - if they wish to accept the images, they simply click to enable them or change their preferences.

    The most effective means of newsletter marketing is minimum use of linked text content, letting your users decide whether they wish to download associated images or not and better still, to visit an associated website which is usually what your intention is in the first place!

  • Geert
    27th August

    Today I got a newsletter from Microsoft Architecture team, that immediately showed their images. Curiosity awakened, and it seemed they use the cid method to display their images. Personally I didn’t like it that I had no way to tell I didn’t want to see the images

  • Anna Yeaman
    5th September

    I’ve been looking into embedding video into emails using the cid method. Haven Holidays reported a 50% lift in conversion rates using this technique:

    http://stylecampaign.com/blog/?p=29

    Anyone tried this out? I’ve not been able to test in all email clients…

    I’m still going with a link to online content, but was interested to see it working for Haven. You’re right its open to abuse, nothing stopping adult/Spam content from getting through….

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

Create an account