Embedding Images in HTML Email: Have the Rules Changed?

Recently we shared helpful tips on creating and designing HTML emails, and today we’d like to focus on a related topic which is really important for email developers. We will talk about email attachments, including their types and limitations, primarily concentrating on how to send an HTML email with images.

Attached vs embedded images

There are two basic approaches to attaching images to email messages: enclosing and embedding. Everything is straightforward with enclosing: you add it as a separate file which doesn’t affect the HTML structure. In this case, your recipient will get the attached image as it is, unchanged and uncompressed. The only thing you should worry about is the maximum email size limit. Even if your email client/service is able to send a large attachment, it doesn’t mean that your recipient will receive it. So, if you are not sure about the email client used on the other end, follow the smallest possible limit. There are a lot of ways you can edit image online for free or even use an AI image editing software to increase the quality after compression. Overall, email services tend to increase the size limits: Outlook desktop allows sending up to 20 MB, while other common email clients allow 25 MB and above.

When you are building transactional emails, whether it’s an order confirmation, account notification, or an automatically generated payment receipt, you most likely will be adding some design elements or at least your company logo. In this case, you need to embed an image in the email, and here is where things get complicated. By embedding, we, in fact, are also attaching an image, but now it’s an integral part of the HTML message body. Besides the image size, you should now decide where it will be hosted and how it will be encoded, as no one can guarantee that it will be properly displayed.

Below is a table which shows how some email clients treat images by default.

	Email client type	Default image display	Other options
Gmail	Web-based email client	Yes	Gmail informs a user that images are not displayed and offers to “Display images below” and “Always display images from the recipient” if “Ask before displaying external images” is enabled in email settings.
Yahoo Mail	Web-based email client	No	Yahoo Mail informs a user that this message contains blocked images and allows you to choose “Show images” and “Always show images” options if the automatic display of images is disabled in the Security and Privacy settings of the email client.
Apple Mail for Mac	Apple’s mail app	Yes	Apple Mail displays an image and asks if a user wants to “Load Remote Content” when “Load remote content in messages” is disabled in mail preferences.
Apple Mail for iPhone	Apple’s mail app	Yes	Apple Mail allows a user to block images by simply switching.
Outlook (applies to Outlook for Office 365 Outlook 2016 Outlook 2013 Outlook 2010)	Web- and desktop-based mail client	No	A user may unblock image downloads for a single message, for all messages, or from a particular email address or domain. Follow this link for further instructions.

Keeping the behavior of email clients in mind, you may choose one of three main techniques of embedding images in emails. 

CID attachments, or embedding an image using MIME object

MIME (Multipurpose Internet Mail Extensions) is an Internet standard initially designed for SMTP that allows sending several content types (like HTML and text) in a single message body and supports non-text attachments like images.

It means that your message should contain at least two parts, HTML and plain text, which should be separated by defining boundaries.

To embed an image, attach it and reference in the message body by setting its CID (Content-ID) and using a standard HTML tag:

<img src="cid:some-image-cid" alt="img" />

This method of working with images has been used for a long time. However, since it’s an attachment, it affects the email message size. The bigger the email size, the longer the loading time, and it might be pretty upsetting for your recipient. Several things to consider:

• CID images play well with desktop clients.
• There are known issues with displaying in web-based email clients.
• In MacOS Mail, it might be also shown as attachments.

Inline embedding, or base64 images in emails

Another way to display an image in the body of your message is to embed base64 image in HTML. It also refers to the MIME standard, but here you don’t need to worry much about it. Base64 is a group of similar binary-to-text encoding schemes. If you want to know more about it, refer to Wikipedia since it has a comprehensive article on this topic.

To insert an image to your email, you need to encode the image file as base64: use one of the many encoding services and then just paste base64 digits into HTML code like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB" alt="img" />

This way, the image is stored within the HTML, as a single file.

Be ready to see a really long code for the image as each Base64 digit represents 6 bits of data. This long image path also increases the overall size of the HTML message. Don’t use it for large images.

Some bad news about base64 encoded images:

• They are totally blocked by Outlook.
• They are not displayed by most webmail services (especially if you use more than one inside the message).

The good news is that Apple email client is friendly to base64 encoded images and has a good chance of instantly displaying them.

Linked images, or hosted images in HTML emails

Finally, you can link to the image hosted on some external server. It is super easy and doesn’t impact the email size. You just refer to the image as a link in the HTML body with a simple “img” tag:

<img src="/wp-content/uploads/2018/11/blog/-illustration-email-embedding-images.png?w=640" alt="img" />

The image will be loaded as external content. Even though it doesn’t affect the size of the email message, it still impacts the performance.

Choose the server to host images properly: it should cope with high loads (in case your message is a part of mass email sending and targets thousands of recipients), and demonstrate the highest possible uptime so that the image is downloaded and displayed any time a recipient opens the email.

What to keep in mind:

• Dependence on the image host (if it crashes – there will be red crosses instead of images).
• Possible negative effect on the message spam rate.
• By default might be blocked by Outlook and other email clients.

Remember that if the image contains security-sensitive information, you might not be allowed to host it on the third-party service.

We’ve checked our Gmail inboxes to inspect HTML emails and found out that titans like Amazon, GitHub, PayPal, and Twitter use linked images in their both transactional and marketing emails, moreover, they host them on their own dedicated servers. Not every sender can afford it, though.

Choosing a method of putting an image in an HTML message

We have made a basic overview of several methods of attaching images to HTML messages. Let’s see how they compare:

Feature	Attachment	CID image	Inline embedding	Linked image
Is a part of HTML body	No	Yes	Yes	No
Affects email size	Yes	Yes	Yes	No
Displays in desktop clients	Yes	Yes	Except for Outlook	Yes
Displays in web clients	Yes	No	No in Yahoo! and Hotmail but OK for Apple	With restrictions
Displays on mobile devices	Yes	Sometimes removed	With restrictions	With restrictions
Anything else to remember?	Different usage type	Advanced HTML coding experience is preferred. Can be also displayed as an attachment in Apple clients	Base64 converter is required	External host for images is required, affects spam rate

Sorry, folks, but HTML emails are tricky, and the table above demonstrates that there is no universal recipe for embedding images as well.

So, how do you build an HTML email with images that look good for your recipients?

Here are a few tips:

• Enclose the image as a separate file – it might be more efficient and safe. 
• Research your recipients – which email clients do they use, which devices do they prefer, etc.
• Check the availability of resources – will other email senders be able to work with CIDs? Am I sure that the server I’m going to use is reliable enough?
• Test everything!

Moreover, if you’re not proficient in HTML, consider using a drag & drop email template builder. It’s easy and will help you build a template quickly.

Quickly spot any HTML errors in your emails, get started for free.

How to test images in HTML emails with Mailtrap Email Testing?

Regardless of what image embedding method you go for, you need to do some email testing in order to check how different email clients display your image(s) and the rest of your HTML email. This way, you can know for sure if any of the issues mentioned in this article are occurring in your emails.

For email testing, we use Mailtrap Email Testing of the Mailtrap Email Delivery Platform – a testing solution that creates a safe environment for inspecting and debugging emails in staging and comes with a range of features.

The features provided by Mailtrap Email Testing include HTML/CSS analysis, email content previewing and spam score checking, blacklist reporting, insight into valuable tech info, and more.

With Mailtrap Email Testing, you no longer have to do manual testing. Instead, all of the testing flows and scenarios can be automated. And since Mailtrap Email Testing provides you with a virtual inbox (or up to 300 virtual inboxes if you go for its highest plan), you keep your domain reputation protected as you don’t have to use your personal inbox for testing anymore, and you remove the risk of spamming recipients in the process.

So, how do you get started?

To send your first test email, log into your Mailtrap account and go to Email Testing – > Inboxes – > SMTP Settings. There, you can find the email sending configuration in a range of programming languages which you can add directly to your project, as well as SMTP credentials of your virtual inbox you can provide to your email client or mail transfer agent.

Also, under Email Testing, in your Mailtrap account will be your virtual inboxes, and within them, the test emails you sent. 

These inboxes are a great thing when it comes to Mailtrap Email Testing, as they can be created for different projects/environments or even for different stages of testing in each project. 

Thanks to this multiple-inbox approach, you can keep your testing data organized in one place, thus making finding the data, switching between different tasks, and sharing your testing results with colleagues or clients a quick task.

To preview an email on different devices, you can use the first tab labeled HTML. But your main focus should be the tab labeled HTML Check.

There, you will be able to see the support top email clients have for the HTML elements and CSS rules used in your emails, most importantly, your embedded images.

In the example below, Mailtrap Email Testing shows that the width property of the image in our test email is partially supported and/or buggy in certain versions of Windows Outlook and even provides a link to the line of code containing the property.

With this information, we can now easily find and fix the issue and know which email client to pay specific attention to.

How to send HTML emails?

Once you have tested your emails, made sure your images are displaying correctly in different email clients, and looked into other important aspects, such as your email content spam score, domain blacklist presence, etc., you can proceed with sending the emails.

As the process of sending emails can also come with its fair share of obstacles, you have to do it using the right tool. 

We get our emails out using Mailtrap Email Sending, the email-sending solution belonging to the Mailtrap Email Delivery Platform we mentioned a bit earlier.

Mailtrap Email Sending has an average email delivery time of ≈ 1 second and is great for those of you who want an infrastructure with high deliverability rates by design.

A range of benefits come with using Mailtrap Email Sending, including the option to choose between using an email API or an SMTP service, a smooth and secure setup, as well as actionable in-depth analytics for control over your email infrastructure and troubleshooting unexpected sending issues.

Along with the mentioned benefits, Email API users also get dedicated IPs, auto IP warm up, suppression lists, and much more you can learn about in the video below:

To complete the Mailtrap Email Sending setup, you will need to go to your Mailtrap account and, under Email Sending, find the Sending Domains section. There, you need to add and verify your domain, as demonstrated in this knowledgebase article.

After that, choose whether you will be sending via API or SMTP. 

For sending via API, you can select a programming language of your choice and then copy and run the provided API example code with your application. For sending via SMTP, just take your Mailtrap Email Sending SMTP settings and paste them into your email-sending service or app/project.

Bottom line

Every day, we get marketing and transactional emails, but for many years, the rules haven’t changed: email clients still “don’t like” embedded images. Whether you choose to inline, link, or embed an image, you should work around the clock to confirm that the email recipient will get your beautiful and perfectly composed message and not an abracadabra where some images are blocked, and some elements are not displayed.

It may sound ironic, but the most popular email clients are the least image-friendly: HTML email images not showing in Outlook or images not displaying automatically in Gmail are still among the most frequent problems.

So, test, check, and experiment to find the optimal way of handling HTML email images, and may patience be with you.