Embedding Images in HTML Emails

Creating HTML emails can be one of the more challenging aspects of web coding.  While HTML web browsers have become standardized, email clients have not.  Hundreds of email clients exist, each with their own rendering and display engine.  To make matters even more interesting, a host of privacy rules often exist to prevent HTML emails from rendering properly.

In line with these obstacles, a well-crafted HTML email can reap high rewards.  Well-designed emails can help develop the brand throughout the sales and marketing process, improve sales conversion, and increase lead generation.  Integrating images into emails is often an essential element in an effective digital marketing campaign.  There are three primary ways to insert the images: web links, multipart MIME messages, and embedded Base64 strings.

Web links are the easiest way to embed images, while also the least effective.  The actual method is simple: upload the image to an external website, and then link to that image from the email using the IMG tag:

<img src="https://www.apharmony.com/images/logo.png" alt="apHarmony" title="apHarmony" />

What makes this method ineffective is that the images are often blocked by email clients.  Most email clients will hide the web links and add a note above stating, “Images in this email have been hidden. Click here to show images.”  The reasoning behind this is good: remote images have been used by many marketing managers to spy on end-users, and find out when they have read the emails.  As a result, many of these emails are also often tagged by SPAM filters.

The next alternative implementation of email images is the multipart MIME message.  Using this technique, the image is added as an attachment, and then linked from the body:

<img width="128" height="48" src="cid:image001.png@02AB5C19.47D24EF0" alt="apHarmony" title="apHarmony" />

Although this technique works, it has the drawback of requiring a custom mail handler.  This can be difficult from write in many programming languages, which brings us to the third technique.

Embedded Base64 strings offer the easiest way to integrate images into emails.  Using Base64 strings, the images are encoded directly into the HTML body, and are displayed by most major email clients.  The syntax is as follows:

<img src="data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXX" alt="apHarmony" title="apHarmony" />

In this example, the string of X characters would be replaced by the Base64 string of the image.  There are a variety of free online tools that can do this, as well as the following simple Python script:

import base64
with open("logo.png", "rb") as image_file:
  print base64.b64encode(image_file.read())

Simply run the script, pipe the output to a file, and paste in the HTML body.  On a final note – if the image is not a PNG, be sure to update the MIME type at the beginning of the image source; this needs to be the same as the image that is Base64 encoded.

Embedded Base64 HTML images can help increase both email campaign deliverability and success.  Using this technique can not only help simplify message delivery code, but also increase lead generation and sales conversion rates in lead nurturing campaigns.

Written by Andrew Palczewski

About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+