How to embed images in your emails
Do you want to add images to your emails? You’ve come to the right place!
It’s a good idea to include some images in your marketing or everyday emails every now and then. Even if it’s just a logo or a footer or email signature – it adds a sense of professionalism to your email content.
However, there isn’t just one way to do this.
Should you link the image from a content delivery network (CDN)? Should you embed it and refer to it using a CID tag? Or maybe use a linked image? It can be confusing to choose the best option.
In this article, we will guide you through the process of embedding an image in an email using all these options. We will also discuss the advantages and disadvantages of each method.
3 ways of embedding email images
There are 3 ways of embedding images inside an email messages:
- Embedding image using multipart/related MIME object (CID)
- Using Base64 encoded inline images
- Referencing remote web server or CDN
Let’s begin with the mysterious CID method.
CID method (inline images)
CID (or Content-ID) is a method that inserts images inside email message.
When MIME tree is build, images are added to it as objects related to HTML content of the message. They have content disposition specified as inline – this means that those images are not actual attachments, but should rather be displayed to a recipient when email message is opened. Additionally each image is identified by its own id (Content-ID).
HTML body of the message references those images by using special "cid:" protocol. It specifies Content-ID of the image, that should be used:
This is our <strong>brand new</strong> logo: <br />
<img src="cid:logo@example.com"/>This method makes email message a bit bigger, but images don’t need to be stored on your web server or CDN and are available as long as the email itself. Furthermore this method is widely supported by email clients.
Inline Base64
HTML inline embedding is much simpler – you simply encode image using Base64 encoding and put encoded data inside HTML, using a standard HTML image tag:
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEU..." />Unfortunately this method is not supported by all email clients and similarly to CID method makes your messages larger in size.
Linking to a remote server
From the examples above, you can see that using a Base64 encoded images in your email will increase its size, which can slow down the sending process. An alternative to this is to link your images and load them from an external server.
Linking to an image in HTML is not overly technical – just a simple <img> tag with src set to the image address.
If you are sending the email to a small group of people over a week, you don’t need to worry too much.
However, if you are sending an email to a large number of people, such as 100’000 recipients within a single day, it would be wise to store your images on a Content Delivery Network (CDN).
To use linked images in your emails, follow these simple steps:
- Upload your images to a directory on your server or any public folder in a cloud storage service.
- Reduce the image size to avoid excessive bandwidth usage.
- Link to the images in your HTML email using the complete URL path.
- Ensure that the image is publicly accessible to avoid any loading issues.
This option requires you to maintain images for a long time, as emails can be viewed even years after they are sent.
What’s the best way to embed images in email?
Each method has its cons and pros.
At EasyFooter we believe that for email signatures and footers and standard emails, CID method is the best one, as it allows images to live as long as emails and is widely supported by email clients.
For large email campaigns, remote server/CDN method is the most obvious solution.
We generally don’t recommend Base64 inline images, as the client support is not perfect.
Remember that it’s best to avoid sending emails that consist of images only. Depending solely on pictures for your email content can cause issues. Some email clients may block images by default, which means recipients will see an empty or uninformative email. To ensure your message is delivered effectively, always include a relevant text alongside your images.
