Images in Emails: How to Embed Images in HTML?

How to Embed Images in Your Emails
Valeriia Dziubenko Valeriia Dziubenko 16 august 2022, 09:17 0
For beginners

Attractive images are a vital component of advertising strategy: your email campaign will be more exciting with high-quality images. Images express emotions, provide helpful information, engage your audience, and motivate them. This article will discuss the different methods for embedding images in emails, their advantages and disadvantages, and best practices that quickly yield positive results.

What Does Embedding Images Mean?

These days, people's interest in reading large volumes of text is decreasing. They prefer eye-catching visuals to improve their reading experience, not lengthy paragraphs in email design. Nowadays, images are common in emails, but adding one to an email is not always straightforward.

Embedding Images

Before discussing embedding images in HTML emails, we need to know what it means to embed an image. Embedding an image means including it in the email message's text, as opposed to sending them as an attachment. This way, the image appears along with the text, like on a website.

How Do I Embed Images in Web Clients?

When you embed an image in an email message, you add the image's code to the email template to show up along with the text when the subscriber opens the email. There are three methods for embedding images. Let's discuss them in the following section.

how to embed images in web clients

CID Image Embedding

CID (Content-ID) image embedding has been a common practice for quite some time. However, even if something is well-worn that doesn't mean it's no longer a good choice. Digital marketers still use it at scale.

CID operates by attaching an image to your email and referencing it using an HTML tag in the message body. When your recipient opens the message, the embedded image will be visible. Unfortunately, if you have no prior knowledge of HTML, you may have difficulties completing this task.

Pros

  • It has been used for a long time.
  • It ensures multipart/related mime-type.
  • Client libraries provide support.

Cons

  • It increases the overall size of the email.
  • Inconsistent results with some email clients, particularly web-based.
  • It appears to be out of date.
  • It demands more effort and knowledge.
  • More difficult to achieve for non-technical personnel.

Inline Embedding

Inline embedding, achieved with the data URI scheme, is a more straightforward and faster solution than CID because you don't have to study HTML or dig through MIME. One disadvantage is that it's less adaptable.

Before you embed an image in an email, you must first have a base64 encoded version of the image. After encoding your image, use a standard HTML image tag to embed it. There's no need for any extra code because you utilize a standard HTML tag to embed your image.

<img alt=”My Image” src=”data:image/jpeg;base64,/9j/4s/+RXhpZENkD...more/encoding/here” />

However, this method has its drawbacks. Webmail services often lack support for inline embedding. Microsoft Outlook tends to block emails with inline embedded images completely. Furthermore, images embedded using this method have a larger file size, which may cause the email to load incorrectly.

Pros

  • It's easier to achieve and quicker to execute.
  • It requires less knowledge of MIME and HTML code.

Cons

  • It increases email size.
  • Webmail services are likely to block it.
  • It no longer works in Outlook.

Linked Images

This method stores images on an external server and provides a link within the message. Unlike CID and inline embedding, linked images keep emails as light as possible. Your only concern is the number of recipients for your image-rich email.

If you're mailing to a small group of people, such as a hundred or so, you can use a standard cloud storage service like Google Drive or Dropbox. But if you have a mailing list with thousands of subscribers, you'll need a CDN (Content Delivery Network), like Amazon's CloudFront.

Pros

  • Maintains lightweight email.
  • Minimal effort is needed.
  • Allows for image editing after the email is sent.

Cons

  • On some services, it experiences the same blocking issues as base64 encoding.
  • Requires image download from an external server.

Test Your Emails Before Sending

You need to test your emails before sending, no matter which method you use. With email testing tools, you can test your marketing emails across clients, browsers, and devices, including iOS, Android, Gmail, Outlook, etc.

Testing your emails ahead of time helps you check if your image fails to render in an email client. For instance, if most of your recipients use Gmail, you should test the display result with Gmail to make sure the images show up correctly.

If the image loads, congrats! If it doesn't, start troubleshooting. A simple solution might be experimenting with a different image embedding method. Send another test email to check if the problem persists.

Even if your images do load, it is essential to design your email with the possibility that they won't. Your recipients still may experience image rendering problems regardless of their browser, device, or inbox.

Therefore, you must ensure that your emails look good (not broken) when the intended image does not appear. You need to include ALT text in your emails to make them more accessible to subscribers who have such settings. Including ALT text helps them understand the contents of the image that was supposed to load.

Images in Emails: Best Practices

Careless tampering with your images can have an impact on email delivery. You should adhere to specific guidelines while adding images to your email.

  • Use the Right Image Format

Although there's no perfect answer for the ideal image format in emails, most email recipients will be ok with PNG or JPEG files. SVG (scalable vector graphics) can also be helpful in certain situations. Ensure maintaining a minimum file size.

embedded-images-in-html

Choose the JPG format for photos with vibrant colors. It's also the best option if you wish to minimize file size. PNG is best for logos, icons, and images with transparency.

  • Always Include Text with Your Images

Emails containing only images are never recommendable. Have you heard of email image blocking? It's an option for email users who don't want to see images. Sometimes, this option is set by default, which means there will be a gap in communication with such subscribers. They won't understand anything if there's no accompanying text.

embedded-images

Maintaining a balanced text-to-image ratio in your email also helps avoid spam filters. Emails with little or no text are common targets for spam filters, and you don't want your hard work to end up in the spam folder.

Two rules to remember about image-text ratio:

  1. If your email has less than 500 characters, add only one image.
  2. If your email is over 500 characters, you can include multiple images.
  • Make Use of Alternative Attributes

When composing an email, always add alt text (alternative text) to images. The alt text describes the contents of an image. It gives readers an idea of what they're about whenever images are blocked or disabled. Additionally, alternative texts make emails accessible to visually impaired.

  • Use Captions Effectively

Captions are popular. Marketers prefer to create stunning images that include essential information for their subscribers. Captions, like alt text, can help readers figure out the particulars about the image even if it refuses to load.

Wrapping Up

The key to making your fancy image-rich emails successful is following our recommended practices, regardless of whether you prefer CID embedding, inline embedding, or linked pictures.

If we were you, we would try all three to see which one is best. Alternatively, you may study emails from prestigious companies like Spotify, Amazon, or Twitter. Examine the code and email headers to determine what works for them, then implement the same in your emails. And of course, don't hesitate to test.