They say the first impression is the last one. When it comes to brands, 94% of their first impression depends upon design. A major part of design is attractive images.
High-quality images can spice up your email campaign. They evoke emotions, provide valuable information, engage your recipients, and encourage them to take action.
While you should include images in your emails, there’s a catch to it: embedding them can take a lot of work, and we mean, a lot.
The good thing is you’re reading this article right now. We’ll tackle the three different ways to embed images in emails and mention five best practices that will bring you positive results in no time.
Before we can start with them, however, let’s talk a bit about embedding.
What Do You Mean by Embedding Images?
People nowadays are becoming less and less interested in reading lots of text. They want eye-catching visuals to enhance their reading experience, not an email design containing long paragraphs. You should embed images, that’s a given, but what do you exactly mean by that?
In a nutshell, embedding an image means adding it into the text of the email message. Hence, making it appear exactly as it is on a website rather than as an attachment.
What’s the Difference Between Embedding and Attaching Images?
Simple. Embedding allows your recipient to see the images inside the email, whereas when you attach images, your subscriber will need to download them in order to access them.
As for which one is more ideal, attaching works best in the following instances:
None.
Don’t add attachments to your emails, whether it’s an image, GIF, or a PDF. Images with attachments are usually flagged as spam, no matter how legit and relevant the content may be.
If you’re really itching to include any of these elements, you can embed them in the email or link out to them using a compelling call to action if the file size is too heavy.
Be it an online marketing company or a real estate agency, the embedding route should be followed whenever including email graphics. They appear less shady and save your subscribers from the hassle of separately downloading attachments. Remember, your job as a marketer is to make life easier for your customers, not complex.
So, How Can You Embed Images in Emails?
Embedding images can be done in three ways. Let’s take a closer look at them below.
CID Image Embedding
CID (Content-ID) image embedding is a practice that has been around for quite a long time now. However, just because it’s outdated doesn’t mean that it’s no longer a viable option. Many digital marketers continue to use it.
CID works by attaching the image to your email while referencing it with an HTML tag in the email’s template. Once your recipient opens the message, they’ll see the embedded image in it.
Unfortunately, if you have zero background knowledge in HTML, you’ll find yourself struggling to achieve this process.
Inline Embedding
Also known as base64 encoding, inline embedding is a much easier and faster solution than CID. The downside is, it’s not as versatile.
In this process, you’ll be required to have your image’s base64 string, which is a type of encoding scheme. No need to code here, however, as you can simply embed your image through a standard HTML tag.
Webmail services aren’t huge fans of inline embedding. For instance, Microsoft Outlook tends to block emails with inline embedded images completely. Additionally, images embedded through this technique have a heavier file size which may cause the email not to load as intended.
Linked Images
Finally, we have the simplest method to implement, i.e., linking images.
In this method, embedded images are stored on an external source, and the link is provided in the HTML tag. Unlike the CID and inline embedding techniques, linked images keep emails as lightweight as possible.
The only thing you’ll need to be concerned about is the number of recipients you’re sending your image-embedded email to. If you’re mailing to a few people, like maybe a hundred, then you can use a typical cloud hosting site such as Google Drive or Dropbox. For a mailing list that consists of tens of thousands of members, you’ll need to rely on CDN (Content Delivery Network).
But with Unlayer, you don’t even need to worry about this. All images are stored on the built-in file storage with Amazon S3. Embedding images in Unlayer is an easy two-step process. Just click on an image block, drag/upload a picture, and you’re done. See for yourself below:
Images in Emails: Best Practices to Keep in Mind
Playing around with images can affect email deliverability, which is why you should follow certain guidelines. Be sure to remember these tips as you’re sprinkling your email with beautiful images.
Use the Appropriate Image Format
While there’s no right answer when it comes to the perfect image format for emails, PNG or JPEG files are essential for most email recipients. SVG, or scalable vector graphics, also works depending on the context.
For photos with many popping colors, opt for the JPG format. It’s also your best bet if you’re looking to keep your file size small. PNG is typically used for images with transparent elements, as well as logos and icons.
And, for the SVG format, you can use it when your images are of high quality. Just be sure that the size of the file stays low enough.
Always Include Text Along with Images
Image-only emails are never a good idea.
Ever heard of email image blocking? It’s an option an email user can choose if they don’t want to see images in their messages. Sometimes, it’s set as default, which means that if you have an email that only contains images, you’ll leave your subscribers hanging. Without any accompanying text, they won’t get a single detail at all.
Another reason to maintain a balanced text-to-image ratio in your email is to keep it from getting marked as spam. Emails with little to no text are excellent candidates for spam, and you certainly don’t want all your hard work going straight to that folder.
In case you’re wondering about the image-text ratio, here are two rules to keep in mind:
- If your email consists of 500 characters or less, add one image only.
- If your email consists of more than 500 characters, feel free to add more than one image.
Use Alt Attributes
Adding alt text, or alternative text, to your email image is something you shouldn’t forget to do every time you’re composing an email.
Alt text serves as a description of the embedded images in an email. In situations where images are blocked or disabled, it gives the readers an idea of what they’re about.
Plus, the alternative text makes emails more accessible to the visually impaired, giving you all the more reason to use it.
Take Advantage of Captions
People love captions. We’re not only talking about those that provide vital information but captions that are also witty and clever. Like alt text, captions can help readers recognize what the image is in the event that it refuses to display.
Test Your Emails Before You Send Them
Lastly, always test your emails beforehand. This way, you’ll determine whether images look good as you pictured out in the eyes of your recipients or not. More importantly, email testing shows if all your images successfully render on a browser or an inbox.
If your images render, kudos to you! You’re ready to hit the send button to your email subscribers.
If they fail to render, start troubleshooting. Switch to a different image embedding method, send another test email, and check to see if that resolved the issue.
Remember, even if your images render, you should still design your emails with the assumption that the images won’t load. There will always be people in your mailing list who have disabled images as part of their personal setting - hence why you should ensure that your emails look great despite the images not appearing.
Wrapping Up
Yay, you’ve reached the end of this post!
Whether you think you’d prefer CID embedding, inline embedding, or linked images, applying the above-mentioned best practices is key to making your image-embedded emails work.
If we were you, we’d experiment with all three first and see which is the most suitable for us. Or, you can look at emails from top companies like Spotify, Amazon, or Twitter. Look at the code and their email headers, find out what works for them, apply it to your emails, and of course, don’t forget to test.
Embed Images in Emails With Unlayer
