Embedding images in emails has been a hot topic of debate amongst email marketers. Brands prefer including images to make the emails more visually appealing.
Images have proven to be one of the most compelling and information-dense media available to marketers today. Images in email marketing grab a lot of attention. A good image can communicate emotion, transmit knowledge, and get that critical engagement leading to a purchase. Using images to spice up your email campaign can be a great idea.
In the age of Instagram, Snapchat, and Facebook, images are quite literally everywhere. Because of the importance of visuals in communication, It’s hard to find an email that doesn’t include an image of some sort, even when users have image blocking set up on their web clients.
Before we decide whether embedding images in HTML emails are good or bad, It’s critical to understand what it means to embed images, the usable methods for embedding images in emails, as well as their benefits and drawbacks.
What does it mean to embed an image into an email message?
Embedding an image into an email message is simply adding the image into the coding of the email template for it to appear amongst the text once the recipient opens it, rather than the email message appearing as an email attachment.
Users these days are less interested in reading walls of text. They want to see images, especially when it comes to marketing materials. More importance is placed on visual, rather than non-visual content, because images enhance the reading experience of users.
Embedding images is a good way to ensure that clients and business partners will see the images while reading the email. It also saves them the hassle of downloading or opening attachments.
Techniques for embedding images in emails?
If not handled well, embedding images in an email can affect deliverability and engagement. Appearances in a recipient’s inbox also can change from email client to email client.
Let’s quickly examine the three different techniques for embedding images; CID tags, inline embedding and linked images.
- Content-ID (CID)
CIDs work by attaching the image to the email you’re sending and then using standard HTML image tags that reference that image to eventually embed it in the email when the user opens it.
CIDs are fairly easy to understand when it comes to email: Attach the image to the email and reference it with HTML tags in the email’s template. This embeds the image when it’s opened.
CIDs also work well with desktop email clients, but they do not play well with browser-based email.
Additionally, embedding images in this manner increases the size of your overall email, which can hinder deliverability. It also requires more effort and might prove to be a daunting task for less technical users.
Another drawback of CID embedded images is that they don’t always display properly in email clients.
2. Inline Embedding
Inline embedding is a lot simpler, mainly because you don’t have to completely roll your own emails and dig around in MIME to use it. MIME (Multipurpose Internet Mail Extensions) is an Internet standard initially designed for SMTP that allows sending several content types like HTML and text, in a single message body and supports non-text attachments like images.
Inline embedding requires you have a base64 string — a type of encoding scheme — of your image. But with that encoded string, you can simply embed your image into your email through a standard HTML tag and be done. No deep dives into MIME or code are required.
While inline embedding is simpler to achieve and requires less deep dive into MIME and application code, it can really increase the size of emails especially if you use more than one image. It is most likely blocked by default in many webmail service and is blocked completely in Outlook.
3. Linked images
There’s nothing super technical to achieve here. It’s just linking to an image in HTML.
Unlike the CID and inline embedding techniques, linked images are simple to implement and light on email sizes. The one complication, however, is how many recipients you’re sending an image-laden email to.
If you’re sending an embedded image to a smallish number of recipients (a few hundred, for example), then a typical cloud hosting site like Box, Google Drive or Dropbox could help deliver that image. If you’re sending an embedded image to tens of thousands of people, however, you will need to look into a Content Delivery Network, or CDN.
4. CDNs essentially host your images across a network of data centers.
In summary, Linked images keep your emails weight light, which is a good thing. It also allows for changes to images after sending. However, linked images suffer the same blocking problems as base64 encoding on most services and require a download from external servers.
Having a clear understanding of your audience and where your message will be delivered to helps in making an informed decision of the right technique to use.
What to consider when embedding images in emails?
- It is advisable to always have a balance between text and images. Doing so will mean that the email is useful to readers, even when the images don’t work, for whatever reason.
- Use captions. While many marketers choose to create wonderful images that contain vital information for their subscribers, images can easily be blocked by email clients. By using image captions, readers will still be able to get that vital information, even when the image refuses to load.
- Try to make use of ALT attributes. Alt Attributes in HTML specifies an alternate set of text in case an embedded image won’t display. This function helps keep your email usable to the subscriber/reader if images don’t come through.
- Also, you should try to avoid using an image as the first item in an email. Starting with useful HTML text content will allow readers to preview what the email is about before they open it.
Embedding Images In emails; Good or bad thing ?
Many marketers admit to being skeptical about embedding images because of the loose-fitting support in email clients and it is a technique used by spammers and penalized by spam filters.
Some might then say, so why go through the trouble of embedding an image when I could just attach it? Everything is straightforward with enclosing: you add it as a separate file which doesn’t affect the HTML structure. And your recipient will get the attached image as it is, unchanged and uncompressed.
While this is true, with attaching images to messages, the maximum email size limit is usually a cause for concern. Even if your email client/service is able to send a large attachment, it doesn’t mean that your recipient will receive it.
So, if you are not sure about the email client used on the other end, attaching images may not be the best route. And like I said before, the visual appeal of embedded images in your email messages grabs attention and gives a sense of legitimacy to what you put out. It also helps you stand out from the crowd, plus the likelihood of the recipient/subscriber responding/engaging with your email messages is higher.
Also, when you are building transactional emails, whether it’s an order confirmation, account notification, or an automatically generated payment receipt, you most likely will be adding some design elements or at least your company logo. In this case, you need to embed an image in the email.
By embedding, we, in fact, are also attaching an image, but now it’s an integral part of the HTML message body. Besides the image size, you now should decide where it will be hosted and how it will be encoded, as no one can guarantee that it will be properly displayed.
Like I mentioned earlier, many popular email clients block images by default. Bummer. The good news is that they render ALT text. What this means is, when an embedded image doesn’t show up in an email, it will at least show the designated text to caption the image, which allows users to get a general idea of what was there.
There is no infallible way of ensuring that images get seen by email subscribers. So it is best to figure out what works best for your email campaign. But it is advisable to keep fewer images to avoid deliverability and rendering issues.