How To Insert An Image Into Your HTML Emails
Images play a crucial role in email marketing, but many marketers underestimate their importance. They are incredibly flexible and can boost the results you get if you leverage them in an email marketing campaign. They allow you to strengthen your message and capture information that you can’t explicitly elaborate on through text. Even the best copy won’t do well without a strong visual design accompanying it.
When talking about images in email, it’s worth remembering that your subscribers don’t always have that much time to read paragraphs upon paragraphs of copy. Images enable them to understand the message easily and quickly. They then respond to pictures and other visual communication faster than they do to text.
Additionally, images have a better retention rate, even when a recipient only sees it for a few seconds. You can use various graphical representations to communicate and connect with your audience, for example, stock photos and screenshots. These can increase the click-through rate in your next email campaign.
All that said, it’s undeniable that adding images to your emails can be a little intimidating or overwhelming at first. With time, you will become a natural at it once you know what to do to get it right. Below, we explore how to add images into an HTML email.
Embedding Images in HTML Emails
You can display images within HTML emails without physically inserting them. This approach is recommendable because it keeps the size of the photos down, considering that they don’t travel with the email. As such, the chance is smaller for the image to get trapped in email filters when they check the size of your email.
Such images are only downloaded when the email opens for reading or sometimes when in the preview pane.
The idea behind making an HTML email is just like a web page is made. However, the software on which the HTML email is based must be able to send HTML emails. You also must keep the HTML as simple as possible to achieve the virtual presentation you are aiming for. There are several ways to embed images for email marketing. However, the most popular methods are CID image embedding, inline embedding, and linked images.
CID Image Embedding
CID or Content-ID is for sending various types of media files through email. Although it’s an outdated approach, many people still use it as their first choice because of its ease of use. It requires a few simple steps to allow you to attach the desired image and then collaborate it with HTML tags in the template. The image will be embedded when the recipient opens the email.
The process may seem easy, but the main challenge is in coding. Only desktop email clients can benefit from this method, and it’s not appropriate for browser-based email.
Inline Embedding
Inline embedding is a lot easier to do, and it also increases the image size. To attach an image, you need to have the encoding scheme of the image you want to attach. This is the base64 string of the picture. You can get this by right-clicking on the image you want to attach, copy the image address, and paste it into the HTML text. The recipient will have a preview of when they open the email.
In testing the results, you will realize that the embedded image will display in:
Take note that by embedding images, you will not evade email blocking. Many email clients block images by default, and your embedded images may suffer the same fate. However, when this happens, the designated text to the image will show, allowing users to get an idea of the image’s content.
Linked Images
This approach allows you to link to an image hosted on some external server. The process is easy and doesn’t impact the size of the email. The image loads as external content, and while it doesn’t affect the size of the email message, it affects performance. Ensure you carefully choose the server to host the images. It should have the capacity to cope with high images, in case your emails are part of mass email sending, targeting thousands of recipients.
It should also have capacity for the highest possible uptime to enable the image download and display whenever the email is opened. Keep in mind that if an image contains security-sensitive content, it might not be possible to host it on a third-party service.
Choosing an Image Input Method for HTML Email
HTML emails can be challenging, especially if you lack the know-how to deal with them. However, no universal recipe exists for embedding images, but for images that look good to your recipients:
- Research your clients and the emails they use as well as the devices they prefer
- Define the purpose of the email campaign as it may be more efficient and safer to enclose an image separately
- Check the availability and reliability of resources
- Test your emails and images before sending them out
If you’re not proficient enough in HTML emails, consider using a drag and drop email template builder to make your work easier. Alternatively, choose HTML tools that will help you insert images in your emails, for example, this Online HTML Editor.
Final Thoughts
In this era of email marketing, adding images to your emails goes a long way in enhancing the effectiveness of your campaigns. Knowing which images to use in your emails is one thing, but inserting them the right way is a different thing altogether. Fortunately, it doesn’t have to be all gloom. By narrowing it down to the three most basic approaches to achieving this goal, you can do it without much fuss.
There are online HTML editing tools that can also help make your work easier. When nothing seems to work as expected, you can always reach out for expert help. At Ulistic, we are all your one-stop shop for MSP marketing information. Don’t remain stuck with your email marketing efforts, no matter how trivial the issue. Reach out to our team of experts today, and let us help you improve your lead generation efforts.
Embedded Images in HTML Email
In this post, I’ll show you how to use CID-embedded images in email templates.
Frontend Developer, Co-founder
20 years ago, we all had a very slow internet connection. And some of us even had traffic limited plans. That’s why many people turned off displaying images in their browsers. Developers had to check how webpages looked without images. Do you really miss those days? There is no reason for this, but we do still have this issue in the email world.
Cloud images turned on, Outlook 365
Cloud images turned off, Outlook 365
About 25% of viewers are probably not seeing images in their emails. There are three main reasons for this: saving traffic on mobile devices, prevention tracking user behavior (if images are located in clouds), and some large companies block their employees from downloading images from external servers. We have a solution for these last two reasons using embedded images.
How it works
Usually, we upload necessary image files to a public webserver. Then we use links on those files in our code. For example:
If we want to embed images, we have to attach files to our email with special headers:
Content-Type: image/png; name=logo.png
Content-Transfer-Encoding: base64
Content-ID:
Content-Disposition: inline; filename=logo.png
After that, we have to use CID-links on these files:
How to embed image in HTML email
For this experiment, I’m going to take the «Coffee» email template from Email2Go’s free template collection and replace all cloud images to CID-embedded ones.
First, I’ll create a new project based on an existing email template. Then I’ll open the «Embedded Images» tab in the right panel and upload all necessary files.
Now I can use CID-links of these files. I’ll click on the «Copy Code» button and get the CID-link. After that, I’ll replace the necessary links in the HTML code or CSS styles.
My logo.png file is 188 x 193 px. But tag has the parameter width=»80″ . I’m going to resize the image. For this, I’ll click the «Edit file» button and correct the dimensions. It will help reduce the size of my email template.
That’s it. I just need to check my template using the email template testing tool.
Conclusion
This solution is by no means perfect. Embedded images increase the size of your templates significantly. Also, some mail clients don’t support CID-links in the background images. I recommend using CID-embedded images in tags only. Anyway, now you know one more way to insert an image to an HTML email template.
Related Articles
The Guide for Using Bulletproof Background Images in HTML Email Templates.
The Most Common Mistakes in Coding Tables in Emails.
How to use emojis, language characters, and special symbols in email templates.