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 embed an image into an email.

What are the ways to embed images in emails, what difficulties can arise, and how do you solve them? 

What Does It Mean to Embed Images in an Email?

Embedding allows you to add multimedia elements to your email template. Ideally, after embedding, you end up with a fully functional element that you can interact with, just like on the site it was taken from.

However, it’s not always easy to embed an image in an email: the 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. Also, 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.

What to Consider When You Embed Images in Emails

Mind that you can’t embed just any image in an email: you must take into account the size, dimensions, formats, and peculiarities of email clients. Let’s discuss the details of each factor. 

What Image Format to Choose For Embedding in Emails?

Today, the most popular formats for embedding images in emails are JPEG, GIF, and PNG. Each of them has its pros and cons, so you should be guided by the task you set for the picture when choosing. 

1. JPEG Images

JPEG images are perfect for HTML emails in terms of the size: they’re small and will quickly download in an email campaign. Also, JPEG images do a great job of rendering the colors in your photos. If you want images that don’t slow down the download of the email content and have small size, JPEG images are your first choice. 

The main disadvantage of the JPEG format is that it contains less data about the image and doesn’t render transparency effects. If you need to embed high-quality images in your email, we’d recommend you try PNG. 

2. PNG Images

PNG format conveys texts and transparency even if compressed. That’s why PNG is perfect for logos or other cases when you need to embed high-quality images in your emails. PNG format saves more information about the image and renders the smallest details. Mind that PNG images are larger than JPEG and download slower. 

Choose the format depending on your goals: if the high quality of an image is vital, it might be better to sacrifice the download speed and choose PNG.

3. GIF Images 

GIF transmits animated images, compresses without losing quality, transmits text well, and allows you to create transparent areas. But the palette is limited, GIF files are large, and it displays photos poorly. 

Also, not all email clients render GIFs well, so be careful if you decide to embed a GIF image into an email. Always test your emails before sending them to avoid display errors.

Best Image Size and Dimensions for Embedding in Emails

A picture that is embedded in the HTML email should be of 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.

You should choose the image size for the HTML email layout based on the following considerations:

• The smaller the images, the better. Try not to use images larger than 200 KB because the size affects the image loading speed. This is important because many people use mobile Internet, which might be unstable in some areas. If necessary, you can simply compress your PNG and JPEG images to achieve the needed size.
• 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 You Embed HTML in Emails?

The image is an essential element of an email marketing letter because it makes the text more vivid and attractive. There are several ways of embedding images in emails – let us take a look at the three of them.

1. 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.

2. 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 may result in slowing the downloading down and clipping them by Gmail.

3. 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 Do Different Email Clients Handle Images?

When you embed images to an email, be ready for possible display errors. The most popular reason lies in the default settings or the recipient's personal preferences. As a result, many images are automatically blocked, and the emails don't give the main message right away or even look spoiled.

Email Images in Outlook: When Outlook Blocks Images and How to Avoid It

Outlook.com is a bit weird when it comes to image blocking: it may block images in emails 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 who are not in the contact list. 

The email service handles these two types of filtering differently:

• In emails from suspicious addresses, it does not show pictures, but it displays alternative text;
• For users who have stricter content blocking settings, Outlook.com uses gray fields. They block out unwanted pictures and replace them with a gray background.

How Gmail Deals with Embedded Email Images 

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.

Email Clients & Embedded Images: Other Things to Consider 

Alternative Text

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.

Cached Images

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 have implemented 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 the 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 subscribers' geo, timezone, and weather. Also, timers can work incorrectly.

How to Test Embedded Images in HTML Emails

A quite trivial step that many people neglect while embedding images in emails — test your emails. 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 an email campaign to the whole database, it is better to send several test emails and open them in different mail systems. Here’re some more advice on testing emails that contain embedded images:

• 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. 
• Use EmailOnAcid or Litmus to make the checking process faster. Sometimes we, EmailSoldiers, also perform tests on real devices.

What to Do With Blocked Images in Emails: 4 Recommendations

There are times when a user receives an HTML email, but the embedded images in it are either displayed incorrectly or not displayed at all. 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.

1. Add a Link to a Web Version Of an Email 

Add a link to the web version in the header or the footer of the email: in case your email displays incorrectly in the email client, the web version will let the users view your email as a web page. The web version contains all the elements you’ve embedded to an email template: images, GIFs, links, etc.

2. 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 describing the content of the picture, which they cannot see because the image is blocked.

It is up to you how many details 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 Email on Acid, as they both show the way email looks with turned-off images, and think about whether the reader will understand what it is about.

3. Limit the Info Placed on Embedded Images 

Keep in mind that there’s always a risk that your images might get blocked by the email client. Therefore, don't write important information on the embedded images: users should understand the message without images. If you place all the important info like CTA, discount coupon, offer, etc. on images and don’t duplicate it somewhere else in the email campaign, users might not understand what this email is about. 

4. Never Send an Email That Consists of Images Only 

Do not send the whole newsletter in one picture or several pictures with no text. Of course, this idea might look great at first sight: when you design an email with images only, such an email layout looks attractive. But in case the embedded images don’t display, the user will see the blank template and they will likely greylist or blacklist your email domain. 

To keep the pictures in the email from playing tricks on you, it's essential to study the behavior of active subscribers: you need to know what email clients they use and what type of images they like more. 

Summary

Of course, images improve the appearance and performance of newsletters if used correctly. Let's summarize a few things about embedding images into emails. 

First, your email 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 add alternative text for all the embedded images in emails.