Videos
Check out our tutorial video series.
Understanding email attachments, their types, and their restrictions are prerequisites for understanding the steps involved in sending an HTML email with images. Therefore, everything you need to embed images in HTML is covered in this article.
Let's start by discussing attached vs. embedded emails.
Attached vs. Embedded Images
When you send an email with an image file attached, the filename is kept, and the recipient can easily download it. The original pixel size is retained without any quality loss.
If an image that is embedded in an email exceeds a predetermined size (measured in KB), Gmail will re-encode it and lower the quality. Even though some email clients do not automatically resize embedded images, this results in horizontal scrolling.
While when you attach images, your subscriber must first download them, when you embed images, your recipient can view them directly in the email.
You can attach images to email messages by using embedding or enclosing strategies.
a. Enclosing
You must include a separate file in the enclosure that has no bearing on the HTML structure so that the recipient will receive the attached image in its original, unaltered, and uncompressed form. The maximum email size limit is the only thing that should cause you concern.
b. Embedding
An image must be attached for this procedure, but it is also necessary for the HTML message body. Since no one can guarantee that it will be displayed, you should now decide the image's size, hosting location, and encoding method.
Below is a table which shows how some email clients treat images by default.
| Email client | Email client type | Default image display | Other options |
|---|---|---|---|
| Gmail | Web based email client | Yes | Gmail requires users to choose how images are displayed. |
| Yahoo mail | Web based email client | No | To display an image, Yahoo Mail requests the user's permission. |
| Apple mail for Mac | Apple's mail app | Yes | After displaying the image, Apple Mail will prompt the user to decide whether to load remote content. |
| Apple mail for iPhone | Apple's mail app | Yes | Allows users to block images |
| Outlook(2016, 2013, 2010, office 365) | Web and desktop-based mail client | No | A user can allow image downloads for all messages or just those from a specific email address. |
3 Main Techniques of Embedding Images in Emails
Here are the three main methods for inserting images into emails.
1. CID attachments or embedding an image using MIME object
MIME (Multipurpose Internet Mail Extensions) is an Internet standard created for SMTP. It allows the transmission of multiple content types (like text and HTML) in a single message body and supports non-text attachments like images.
Attach the image and reference it in the message body by setting the CID (Content-ID) and making use of a typical HTML tag:
2. The inline embedding or base64 images in emails
Embedding a base64 image in HTML is another method for displaying an image in the body of your message. Base64 is a collection of related binary-to-text encoding techniques.
You need to base64 encode the image file to add it to your email. Paste the base64 digits into HTML code as shown by using one of the many encoding services:
3. Linked images or hosted images in HTML emails
You can incorporate a hyperlink leading to the image hosted on an outside server. The email is very straightforward and keeps its original size, and you can use the "img" tag to refer to the image as a link in the HTML body:
It will load as external content with the image. Despite not affecting the size of the email message, it impacts performance.
How to Test Images in HTML Emails With MailSlurp Email Testing?
Whatever method you use to embed images, you must test your HTML email in various email clients to see how your image(s) and the rest of the email are rendered.
The MailSlurp Email Testing Tool is one of many tools for this process. MailSlurp Email Testing offers a variety of features, such as HTML and CSS analysis, email content previewing and spam score checking, blacklist reporting, access to tech information, and more.
How to send HTML Emails?
After you've tested the emails, ensure that your images display correctly across a range of email clients. Also, look into other critical elements like your email's content spam score, the existence of domain blacklists, etc., before you send them.
The MailSlurp Email Delivery Platform, which we previously mentioned, offers an email-sending service under the name MailSlurp Email Sending. MailSlurp email sending is excellent for those of you who desire an infrastructure with high deliverability rates by design.
Using MailSlurp Email Sending has a number of advantages, including the flexibility to use either an email API or an SMTP service. An easy-to-use setup that is secure, along with detailed analytics that can be used to take control of your email infrastructure and address unforeseen sending problems
Conclusion
Make every effort to ensure that the email recipient will see your lovely and perfectly composed message instead of images whose elements are not displayed. This is regardless of whether you decide to inline, link, or embed an image. Find the best method for handling HTML email images by testing, examining, and experimenting, and may patience be with you.
