How to Embed Images in HTML Emails: The Ultimate Guide
Embedding images in emails is crucial for email marketing
Which one do you think will work better: a simple text message or an HTML template with colorful, enticing images? In most cases, the second one. About 90% of all information that we perceive is visual and is processed 60,000 times faster than ordinary text. In addition, visual content increases customer engagement.
That is why more than 70% of mass email campaigns today are framed in a branded, beautiful template in HTML format. HTML makes it possible to insert an image into an email.
What are the ways to embed images in emails, what difficulties can arise, and how do you solve them? Read on in this article.
What Does It Mean to Embed Images?
Embedding allows you to post multimedia elements from various web services onto your site or blog. It is a way to borrow and use the capabilities of another web resource on your page. After embedding, you end up with a fully functional element that you can interact with, just like on the site it was taken from.
Thanks to embedding, you can place on your page:
- Videos from video-hosting sites: the most obvious advantage of this approach is there’s no need to store bulky files on your server. Moreover, the video hosting site itself becomes an additional distribution channel for your content;
- Interactive maps and annotated illustrations: very few CMS and independent “engines” allow you to create them without recourse to third-party services;
- Analytics and infographics: everything that relates to user interaction and much more.
An email channel (email clients specifically, as they show our email to users) adds a lot of restrictions to what you can use in terms of HTML. The thing is, if you try to embed a video or an interactive object into an email, that won’t work in all or most of the email clients. So in terms of embedding multimedia objects into an email, the only thing we can be 100% sure of showing properly is the image.
Best Image Formats for Emails
Today, the most popular formats for embedding images in emails are JPEG, GIF, and PNG. None of them have definite advantages, so you should be guided by the task you set for the picture when choosing.
- JPEG. This format does a great job of rendering the colors in your photos. But it can not use animation; with its reduction, it gets very distorted, and it is not convenient for logos.
- GIF. This format transmits animated images, compresses without losing quality, transmits text well, and allows you to create transparent areas. But the palette is limited (256 colors), GIF files are large, and it displays photos poorly.
- PNG. The format is compressed without losing quality and is ideal for logos and icons; it conveys texts and transparency. However, not all browsers support PNG animations, and it doesn’t work well in emails…
Best Image Size and Dimensions for Emails
Ideally, a picture that is uploaded or embedded into the email should already have the correct size. Then, if the image is not displayed, it will be replaced by an empty white rectangle of the same format, which means that the layout of the text and the email, in general, will not be affected.
Sometimes when you open a promo email on your iPhone or Mac, the image may be a little blurry. It does not always mean that they are low-quality pictures. Maybe, the designer just didn’t think that you would see it on a Retina display device.
You should choose the image size for the HTML layout based on the following considerations:
- The smaller the images, the better. But if the main thing in this email is an awesome gif file, it might be 10 or even 15 Mb. However, try not to use images larger than 5 MB because the size affects the image loading speed. This is important because many people use mobile Internet, which might be unstable in some areas. You can use the TinyPNG service to compress PNG and JPEG images.
- The size of the banner (animated or not) should fit the width in the template (for the 600px wide template, it should be 600x300 or 600x400px).
- For the buttons to be easy to click, their size should range from 35–50px.
- It is necessary to make an indent around the buttons or clickable images both for desktop and mobile versions.
- As for Retina displays, for the layout not to be blurry, we double its size, making the content width not 600px but 1200 and the text not 16px but 32.
How Do Different Email Clients Handle Images?
Image blocking is one of the most prominent problems marketers face when running email campaigns. Usually, the cause lies in the default settings or the recipient’s personal preferences. As a result, many subscribers’ images are automatically blocked, and the emails don’t get the main message right away or even look spoiled.
Outlook.com is a bit weird about image blocking. It, by default, disables images not in all emails but only in those sent by “suspicious” users.
At the same time, it is unclear under what principle senders are divided into suspicious and verified. In addition, Outlook users can prohibit displaying pictures in all emails that come from senders not in the contact list. The mail service handles these two types of filtering differently:
- In emails from suspicious addresses, it does not show pictures, but it displays alternate text;
- For users who have stricter content blocking settings, Outlook.com uses gray fields. They block out unwanted pictures and replace them with a simple gray background.
Gmail has not blocked embed images in emails since December 2013. It would seem that marketers and designers should be thrilled — emails will appear as they should, and open tracking will become more reliable. However, this change has not gone smoothly either. It is not uncommon for images to get corrupted or distorted due to caching issues.
It is also required to consider the size of the whole page (i.e., HTML code) not to risk its appearance. Bear in mind that Gmail trims emails that are longer than 102 KB, and in this case, subscribers will see just a part of your beautifully designed message.
Although all web-based mailers support alternative text, the operation of its stylized version depends on which browser the subscriber uses. Stylized alternate text is displayed in current versions of Chrome and Firefox but not in Internet Explorer. You can see its color in this browser but not attributes like font, size, style, and saturation.
One more important thing to mention regarding email clients is that some cache (make copies of) your images on their servers and are already displaying them. This is what Apple will implement in autumn 2021 as a part of their Mail Privacy Protection. For an email marketer, this may result in two things:
- When you notice a typo or a mistake on your banner, fix it and replace an image on your FTP as soon as possible, be ready that some of your subscribers will see the old version anyway.
- Services that generate live content for emails like Movable Ink, LiveClicker, or Zembula, might fail to recognize subscriber’s geo, timezone, and weather. Also, timers can work incorrectly.
How Do You Embed HTML in Emails?
There are several ways of embedding images in emails — let us take a look at the three of them.
CID Image Embedding
Content-ID (CID) is a way to attach a photo to an email without any HTML coding. The process is as follows: an image and a link to it are attached to the email as a template. When you open an email, the image is embedded in it automatically. But keep in mind that this option increases the size of the result email.
Inline Embedding
Another way to insert an image into an email is to embed base64 in HTML. Base64 is a group of similar binary encoding schemes. With this method, you need to encode your image in base64 — and the image will be stored inside HTML as a single file. However, the problem is that every image increases the size of this email, which results in slowing the downloading down and trimming by Gmail.
Links to Images
Linking to an image in your emails works the same way that images appear on any website. You must add a line with a URL to your HTML code that identifies the source of the image to display.
The pros of this approach are obvious — first, having an image does not affect the size of the email in any way, and inserting a link to the image is quick and easy. Besides, you can change the picture on the server, and it will change in the letter, and the size of the image (width, height), which email services will not change.
However, there are also disadvantages. For example, some email clients, such as Outlook, may block images caused by links. In addition, if viewed without an internet connection, the image will not load.
How to Test Images in HTML Emails
A banal tip that many people neglect while embedding images in emails — test your letters. The picture in the email may not be displayed in the recipient’s email client or may exceed the size of the HTML table cell, which causes the image to be cropped or the entire email to “go off” in some browsers.
Therefore, before sending a letter to the whole database, it is better to send several test emails and open them in different mail systems. Send a customized email to a test list of addresses of different email providers. Test the web and mobile versions on other devices and mailers. Using EmailOnAcid or Litmus really helps make the checking process faster, but sometimes we, EmailSoldiers, also perform tests on real devices.
What to Do with Blocked Images in Emails
There are times when an HTML email comes in, but the images in it are not displayed at all or are not displayed correctly. In this case, there is no point in using HTML, paying for the extra bandwidth and design work if your recipients will not see what they are supposed to see.
To keep the pictures in the email from playing tricks on you, it’s essential to study the behavior of active subscribers concerning your mailing list. You need to know what email clients they use and what type of images they choose more often.
Why Images Get Blocked in Emails
Sometimes it happens that a user cannot open images in the mail. Most desktop mail clients (Mozilla Thunderbird, Outlook 2007–2016) block images from being downloaded by default. The web interfaces of Yahoo, Outlook.com, and Gmail do the same if they consider the sender unreliable or the content of the email questionable. Both require proof of upload to show images.
How Using ALT-Text Can Help
ALT-text (Alternative text) is an excellent way to deal with image blocking and embed images in emails successfully. ALT-text is information for the user about what should be in the picture, which he cannot see because the image is blocked.
It is up to you how much detail you want to describe the picture in the alt-text. Just look at the finished email; check it with email testing software like Litmus or EOA, as they both show the way email looks with turned-off images, and think about whether the reader will understand what it is about.
Advice from email marketers on this topic is simple and logical:
- Don’t write important information in the images, without which you won’t understand the point of the mailing.
- Do not send the whole letter in one picture or several pictures with no text.
- Don’t use big background images: some of the recipients won’t see such a background, others will repeat the width and height of the letter.
- You can add a link to the web version in the header or the footer of the email in case of an email that opens incorrectly.
Summary
Of course, images improve the appearance and performance of newsletters if used correctly. Let’s summarize a few things about inserting pictures into emails.
First, your layout should be adaptive so that the page is displayed on the screen of a mobile device (without any additional compression). The format of the images used should be appropriate for the task (mostly PNG or JPEG). The picture itself should be the same size as the template (up to 1200px wide).
When using the picture as a background, it is necessary to consider the visibility of the text on it and provide an alternative color fill. Also, be sure to specify alternative text (small size) in the ALT tag. Finally, you should take into account the specifics of style design in Gmail and Hotmail.
If you follow these recommendations, your newsletters will be more effective and profitable. I hope that our article has answered all the questions you might have had about embedding images in emails.
