Embedding Images in Your Emails. The Facts.


Posted on

pros and consIt’s nice to spice up your transactional emails with a few images from time to time. Even if it’s just a logo, you’ll find it helps to add a touch of legitimacy to what you’re sending out.

However, there’s no one way to do this. Do you link out to the image on a CDN? Do you embed it and reference it via a CID tag? Maybe as a linked image? Which one should you choose?

In this post, we’ll look at the options available and address a few pros and cons of using them, as well as how you would use them with SendGrid, so you can take a look at your needs, and your audience, and make up your own mind. Kicking us off? The mysterious CID.

CID Embedded Images (Inline Images)

To me, CID (or Content-ID) feels old, and something very akin to working with emails in Outlook. That aside, it’s still an option and the ability to use it is supported in our client libraries.

CIDs work by attaching the image to the email you’re sending and then using standard HTML image tags that reference that image to eventually embed it in the email when the user opens it.

Using the SendGrid NodeJS client library, we would attach the image like so:

Then, in your HTML template, you would embed the image in this way:

Wow, right!? No.

The problem with CID embedded images is that they don’t always display properly in email clients. The rule of thumb I use is that CID embedding will work fine in the majority of desktop email clients, but most likely not at all in web based email clients such as Gmail, or Yahoo! Mail. Bummer.

Pros

  • It’s been around for a long time
  • Usage ensures the corrent mime-type of multiplart/related
  • Supported via our client libs

Cons

  • Increases the size of overall email
  • Varying results across email clients, especially webmail
  • Feels outdated
  • Lots more effort
  • Harder for less technical staff to achieve

Inline Embedding (Base64 Encoding)

Inline embedding is much more simple, mostly because you don’t have to completely roll your own emails and dig around in MIME to use it.

Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. There are lots of web based tools to do this, such as ImageToBase64Converter by Web Coder Tools.

Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:

Then you’re done! Send away.

Pros

  • Much simpler to achieve
  • Much faster to do
  • Requires much less deep dive into MIME and application code

Cons

  • Can really increase size of emails especially if you use more than one image
  • Most likely blocked by default in many webmail services
  • Blocked completely in Outlook

Linked Images

As you can see from the above example, if you try to use a lot of base64 encoded images in your email, the actual size of the email being sent will increase significantly, slowing down sending. Your alternative to this is to link out to your images and load them from an external server.

There’s nothing super technical to achieve here. It’s just linking to an image in HTML. However, you should consider the following if taking this approach–how many people are going to receive this email and where are they in the world?

If you’re sending to 100 people over the course of a week then you don’t need to consider this so much–you could host your images in the public folder of your DropBox account if you want and it would be more than sufficient.

However, if 200,000 people are going to get your email over the course of one day, then it would be wise to have your image stored on a Content Delivery Network such as Amazon’s CloudFront.

Pros

  • Keeps email weight light
  • Requires very little extra effort
  • Allows for changes to images after sending

Cons

  • Suffers the same blocking problems as base64 encoding on most services
  • Requires download from external servers

Which One Should You Choose?

It’s quite bleak, isn’t it? Sadly, unified support for any one of these methods isn’t going to happen, so you need to think about what you’re sending and to whom. On top of that, you need to think about where they’re going to be reading it.

You can use the analytics data from your SendGrid account to build up a picture of who is reading what and where they read it. Once you know that you could programatically choose the best template and embedding method for them.

Overall, it’s best to keep imagery light in transactional emails and get to the important stuff quickly, which means mostly you’ll want a logo or two in there. The rest can be achieved using inline CSS.

The best way to figure out what will suit your needs is to look at emails from larger scale companies such as Amazon, Pinterest, Spotify, or Twitter. View the code, look at their email headers, and discover what works for them, then apply it to your emails and test, test, test.*

*Handy hint: Don’t use iOS Mail for testing. It’s very kind to images and loads pretty much everything. Test with Gmail, and Outlook if you can.

For more thoughts on including images in your email, check out some advice from our support team on How to Keep Your Email Looking Great In Any Inbox


Martyn Davies is a Developer Evangelist at SendGrid and a creative developer based in London. He has worked in technology for over 14 years with a background in both the music industry and technology. A serial hackathon organiser, mentor and startup advisor, you’ll find him presenting, demoing, hacking and chatting at hack days, conferences and meetups in the UK & Europe on a regular basis.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>