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:
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?
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.
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.
22nd February
Hi Robin, you’ll find a how-to on embedding images in email in our previous post on the topic.
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?
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.
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.