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 the related topic which is really important for email developers. We will talk about email attachments, 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 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. Overall, email services tend to increase the size limits: Outlook desktop lets 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 now should 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 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 picture 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 pictures in emails.

CID attachments, or embedding 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 in fact, it affects the email message size. The bigger 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, might be also shown as attachments.

Inline embedding, or base64 image in the email

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 a picture 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:

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

However, it looks like the only option if you need some specific type of image, for example, .svg, which is not supported by any of email services at all.

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 pictures 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 the image as a link in the HTML body with a simple “img” tag:

<img src="https://mailtrapblog.wordpress.com/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. The simplicity of use and no size effect are undoubtedly the upsides of this method however it’s not perfect either.

What to keep in mind:

• dependence on the image host (if it crashes – there will be red crosses instead of pictures)
• 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 be not 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

Comparison of methods to add images in HTML emails

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

So, how to build an HTML email with images which look good for your recipients then?

• Define the purpose of an email campaign: it might be more efficient and safe to enclose an image as a separate file.
• Research your recipients: which email clients do they use? Which devices do they prefer?
• 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!

How to test images in HTML emails with Mailtrap

You can test any of the described methods with Mailtrap: it will recognize and parse each attachment to show how it looks and performs.

<img style="display:block;" src="//mailtrap.io/api/v1/inboxes/123/messages/123/attachments/part/10473268-9592-4AFC-A96D-1BE563E6A9B2%2F2%2FPhotos?api_token=api_token" width="605" height="214" />

If any data is attached to the message as a separate file, Mailtrap will show it as a list, with the ability to download all attachments or just review name, type, and size of each file.

The HTML tab will demonstrate how those images should be rendered by a web browser:

You will also find both HTML markup and a text version in the corresponding tabs and will be able to compare them with raw data.

Once you checked and verified your input data, move to the Check HTML tab. It will show if any issues with displaying images might appear in various email clients.

In this example, the background image is embedded, using its CID. This example shows that it’s better to double-check how it is rendered in Outlook for the web, and in both Outlook and Lotus Notes for desktop as well as try opening it in Gmail on your mobile device.

Also, don’t forget to run spam tests or simply check the Analysis tab in Mailtrap:

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 but 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 pictures 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.