How you can Embed Images in Your Emails (CID, Inline, & Extra)

It’s nice to Spice up your marketing or 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 show you how to embed an image in an email with all these options—plus, we’ll address the pros and cons of each. For Twilio SendGrid users, we’ll show you how you would use these options with Twilio SendGrid, so you can take a look at your needs, and your audience, and make up your own mind.

Let’s start with the mysterious CID.

3 ways to embed images in emails

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

CID images 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:

Whoa, 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.

boom

Pros of CID images

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

Cons of CID images

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

2. 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 the said image as a base64 encoded string. 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 of inline embedding images

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

Cons of inline embedding images

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

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

Follow these simple steps to use linked images in your emails:

  1. Upload images to a directory on your server or into any cloud storage public folder
  2. Reduce the image size so that it doesn’t require additional bandwidth
  3. Link to the images in your HTML email with the full URL path
  4. Make sure the image is publicly accessible

Pros of linked images

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

Cons of linked images

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

Test your emails before sending

Regardless of which image embedding method you choose, you’ll want to test your emails before you send. With our integrated email testingyou can see how your marketing emails look across clients, browsers, and devices—including iOS, Android, Gmail, Outlook, and more.

Testing your emails beforehand will let you know if an image is failing to render on an important browser or in a popular inbox. If your Twilio SendGrid stats show that the majority of your recipients use Gmail, then you’ll want to test your emails to make sure your images render properly in that inbox.

If your image renders—congratulations! If it doesn’t, then it’s time to start the troubleshooting. A simple solution may be to experiment with another image embedding method. Switch up your method, send another test email, and see if that fixed the problem.

Even if your images do render, it’s important to design emails with the assumption that the images will not load. Regardless of your recipient’s browser, device, or inbox, they may have adjusted their personal settings to automatically block images. Thus, you’ll need to make sure your emails look great (not broken) when the image you planned for doesn’t appear:

You should include ALT text to make your emails more accessible to your visually impaired subscribers. Plus, if the image fails to load, your non-visually impaired subscribers will know the context around the image that was supposed to load.

Maintain your deliverability

Playing around with images can have adverse effects on your deliverability. Here are a few things you’ll want to keep in mind as you add images to your emails.

Don’t add attachments

Regardless if it’s a PDF, flyer, or cute cat GIF, don’t add attachments to your emails. Inbox providers will usually flag emails with attachments as spam, even if the content of your email is legit. If you’d like to include any of these image elements, either add them via the 3 methods we mentioned above or link out to them with an effective call to action.

Include more than just an image

With an image, you have complete control over all the design elements and can really create a one-of-a-kind inbox experience. However, having your email only consist of an image (with no text) can cause your email to be flagged as spam.

Don’t add too many images

Add variety to your email. Include images (sparingly) with text blocks and headers throughout. Too many images could be a negative factor to your deliverability.

If you have more questions about email deliverability, download our newest Email Deliverability Guide. It’s chockful of all the latest tips, tricks, and advice to make sure your emails get delivered where they’re supposed to go.

What’s the best way to embed images in email?

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 Twilio SendGrid account to build up a picture of who is reading what and where they read it. Once you know that, you could programmatically 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.

Remember why you’re embedding images

When you’re running all these tests and trying these different methods, remember why you’re trying to embed emails in the first place. Is it to improve your brand consistency? Is it to improve email engagement? Or is it just to keep up with your competitors?

Monitor your sending analytics and compare and contrast your results. If you try sending image-rich emails for a couple of weeks but find your engagement is dipping, it might not be worth the slight bump in your brand consistency.

Your audience wants varies as widely as the different email clients, browsers, and devices—make sure to include their and needs in your design decisions, too.

Leave a Reply

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