Embed images in HTML mail
Integration of logos (for example in signature)
There are several ways to include an image (logo) in an e-mail. You can link to an image, embed it, or use CID tags. CID tags are no longer supported with the MailCenter. No matter which method you choose, the following rules apply. Less is more (marketing professionals will of course see it differently).
In other words, the fewer images you use, the better the performance. Compress images and check the formats and sizes used. Regardless of which method you choose for embedding and embedding, you should test your emails before sending them.
Table of Contents
Embed inline with Base64 encoding
The image is completely included in the email
Embedding images in the email requires a Base64 encoded string. So first, convert the image to BASE64 format. Once your image is encoded, embed it in the email with a standard HTML image tag.
Please follow the steps below to embed images in your emails inline with Base64 encoding.
- Reduce the image size to keep the email as small as possible
- Convert the image to a Base64 encoding. You can find corresponding free converters on the web.
Advantage
- Simple
Disadvantages
- Can increase the size of emails
- Increased risk of blocking
HTML Examples – Embed Image with Base64 Encoding
- Example 1 – with link to a website
- Example 2 – Change html image size
Embedding via link
This is how AMAZON & Co do it
If we take a look at Amazon emails, we see that the images in these emails are included via a URL link.
“DON’T LEARN FROM ANYONE. LEARN FROM THE BEST.”, TÜV SÜD Academy, 2022
Please follow the steps below to include images in your emails via link.
- Reduce the image size so that as little data as possible has to go over the network
- Upload the images to a directory on your server or to any other public folder in the cloud
- Make sure the image is publicly available
- Link to the images in your HTML email with the full URL path
Benefits
- Keeps email size small
- Requires little additional effort
- Allows you to make changes to images after they are sent
Disadvantages
- Sometimes suffers from blocking problems with some services
- Requires download from external servers
HTML example – Embed image with URL link
Integration via CID
CID images is a somewhat outdated way to embed images in HTML emails.
The image is attached to the e-mail and linked to it with an HTML tag in the e-mail. When the e-mail is opened by the user, the image is embedded in the e-mail.
