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