Embedding Images In Email

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

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.