Embedding images in email

August 22, 2008

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).

Apple Mail	Showed perfectly
Entourage 2008	Alt attribute and image outline only
Gmail	Alt attribute and missing-image outline only
Windows Live Hotmail	A grey block with no alt attribute
Outlook 2003	Alt attribute and missing-image outline only
Entourage 2007	Alt attribute and missing-image outline only
Thunderbird 2	Alt attribute, no missing image outline
Yahoo! Mail	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 in: Tips & Resources

10 Comments

Ron Blaisdell
August 25, 2008 12:57pm

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
August 25, 2008 6:15pm

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
August 25, 2008 8:31pm

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
August 25, 2008 8:45pm

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
August 25, 2008 9:12pm

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
August 25, 2008 9:59pm

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
August 26, 2008 12:58pm

Thanks for the comments, we’re also going to test the cid / attachment method and update our results.
Matthew Trow
August 26, 2008 9:59pm

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
August 26, 2008 11:37pm

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
September 5, 2008 5:19pm

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….

Blog