Skip to Navigation
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 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. 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. Also, if you want to check how different email clients treat your email, don’t forget to validate the email’s HTML and CSS.
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 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 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 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).
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="/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 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 |
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 to build an HTML email with images that 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!
Moreover, if you’re not a proficient HTML user, consider using a drag & drop email template builder. It’s easy to use 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
You can test any of the described methods with Mailtrap: it will recognize and parse each attachment to show how it looks and performs.
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.
