How to Embed Images in Email: CID, HTML Inline & Linked Images

How to Embed Images in Your Emails (CID, Inline & More)

Looking to embed images in your emails? You've come to the right place.

It's nice to spice up your marketing or transactional emails with a few images from time to time. Even if it's just a logo, you'll find it helps to add a touch of legitimacy to what you send out.

However, there's no one way to do this. Do you link out to the image on a CDN? Do you embed it and reference it via a CID tag? Maybe as a linked image? Which one should you choose?

In this post, we'll show you how to embed an image in an email with all these options—plus, we'll address the pros and cons of each. For Twilio SendGrid users, we'll show you how you would use these options with SendGrid, so you can look at your needs and your audience and make up your mind.

Let's start with the mysterious CID.

How to embed images in emails

1. CID embedded images (Content-ID method)

To me, CID (or Content-ID) feels old, and something very akin to working with emails in Outlook. That aside, it's still an option, and we support it in our client libraries.

CID images work by attaching the image to the email you send and then using standard HTML image tags that reference that image to eventually embed it in the email when the user opens it.

Using the SendGrid Node.js client library, we'd attach the image like so:

Then, in your HTML template, you would embed the image in this way:

Wow, right? No.

The problem with CID embedded images is that they don't always display properly in email clients. The rule of thumb is that CID embedding will work fine in most desktop email clients, but most likely not at all in web-based email clients, such as Gmail or Yahoo! Mail.

Bummer.

Pros of CID images

• It's been around for a long time
• Its usage ensures the correct mime-type of multipart/related
• It's supported via our client libs

Cons of CID images

• Increases the size of overall email
• Varies in results across email clients, especially webmail
• Feels outdated
• Requires more effort
• Makes it harder for less technical staff to achieve

2. HTML inline embedding (Base64 encoding)

HTML inline embedding is much more simple, mostly because you don't have to completely roll your emails and dig around in Multipurpose Internet Mail Extensions or MIME to use it.

Embedding an image in an email first requires that you have a version of the said image as a Base64 encoded string. Once your encode your image, jump into your template, or whatever HTML you send out, and embed it using a standard HTML image tag:

Then you're done. Send away.

Pros of HTML inline embedding images

• Is simpler to achieve
• Is much faster to do
• Requires less deep dive into MIME and application code

Cons of HTML inline embedding images

• Can really increase the size of emails, especially if you use more than one image
• Is most likely blocked by default in many webmail services
• Is blocked completely in Outlook

3. Linked images

As you can see from the above example, if you try to use a lot of Base64 encoded images in your email, the actual size of the email sent will increase significantly, slowing down sending. Your alternative to this is to link out to your images and load them from an external server.

There's nothing super technical to achieve here. It's just linking to an image in HTML. However, you should consider the following if taking this approach—how many people will receive this email, and where are they in the world?

If you send to 100 people over the course of a week, then you don't need to consider this so much—you could host your images in the public folder of your Dropbox account if you want, and it would be more than sufficient.

However, if 200,000 people will get your email over the course of one day, then it would be wise to have your image stored on a Content Delivery Network such as Amazon's CloudFront.

Follow these simple steps to use linked images in your emails:

1. Upload images to a directory on your server or into any cloud storage public folder
2. Reduce the image size so that it doesn't require additional bandwidth
3. Link to the images in your HTML email with the full URL path
4. Ensure the image is publicly accessible

Pros of linked images

• Keeps email weight light
• Requires very little extra effort
• Allows for changes to images after sending

Cons of linked images

• Suffers the same blocking problems as Base64 encoding on most services
• Requires download from external servers

Test your emails before sending

Regardless of which image embedding method you choose, you'll want to test your emails before you send. With our integrated Email Testing, you can see how your marketing emails look across clients, browsers, and devices—including iOS, Android, Gmail, Outlook, and more.

Testing your emails beforehand will let you know if an image fails to render on an important browser or in a popular inbox. If your SendGrid stats show that most of your recipients use Gmail, then you'll want to test your emails to make sure your images render properly in that inbox.

Does your image render correctly? Congratulations! If it doesn't, then it's time to start the troubleshooting. A simple solution may be to experiment with another image embedding method. Switch up your method, send another test email, and see if that fixed the problem.

Even if your images do render, it's important to design emails with the assumption that the images will not load. Regardless of your recipient's browser, device, or inbox, they may have adjusted their personal settings to automatically block images. Thus, you'll need to make sure your emails look great (not broken) when the image you planned for doesn't appear.

Also, include ALT text to make your emails more accessible to your visually impaired subscribers. Plus, if the image fails to load, your nonvisually impaired subscribers will know the context around the image that didn't load.

Maintain your deliverability

Playing around with images can have adverse effects on your deliverability. Here are a few things you'll want to keep in mind as you add images to your emails.

Don't add attachments

Regardless if it's a PDF, flyer, or cute cat GIF, don't add attachments to your emails. Inbox providers will usually flag emails with attachments as spam, even if the content of your email is legit. If you'd like to include any of these image elements, either add them via the 3 methods we mentioned above or link out to them with an effective call to action.

Include more than just an image

With an image, you have complete control over all the design elements and can really create a one-of-a-kind inbox experience. However, having your email only consist of an image (with no text) can cause your email to be flagged as spam.

Don't add too many images

Add variety to your email. Include images (sparingly) with text blocks and headers throughout. However, be mindful that too many images could be a negative factor to your deliverability.

If you have more questions about email deliverability, download our newest Email Deliverability Guide. It's chock-full of all the latest tips, tricks, and advice to make sure your emails get delivered where intended.

What's the best way to embed images in email?

It's quite bleak, isn't it? Sadly, unified support for any of these methods isn't going to happen, so you need to think about what you send and to whom. On top of that, you need to think about where recipients will read it.

You can use the analytics data from your SendGrid account to build up a picture of who reads what and where they read it. Once you know that, you could programmatically choose the best template and embedding method for them.

Overall, it's best to keep imagery light in transactional emails and get to the important stuff quickly, which means mostly you'll want a logo or two in there. The rest you can achieve using inline CSS.

The best way to figure out what will suit your needs is to look at emails from larger-scale companies, such as Amazon, Pinterest or Twitter. View the code, look at their email headers, and discover what works for them, then apply it to your emails and test, test, test.*

*Handy hint: Don't use iOS Mail for testing. It's very kind to images and loads pretty much everything. Test with Gmail and Outlook if you can.

Best practices for embedding images in emails

When it comes to embedding images in emails, there are several best practices you should consider to ensure optimal compatibility and deliverability across different email clients and devices.

Here are some guidelines:

• Use the correct image format: Stick to widely supported image formats like JPEG, PNG, or GIF. Avoid using uncommon or proprietary formats that may not render correctly in all email clients.
• Optimize image file size: Large image files can increase email load times and may get blocked by certain email clients. Compress your images to an appropriate size without compromising too much on quality.
• Consider responsive design: Design your emails to be responsive, meaning they adapt to different screen sizes and orientations. Ensure that your images scale appropriately to fit the screen without causing distortion or excessive scrolling.
• Use alternative text (alt text): Always include descriptive alt text for your images. Alt text is displayed when images are blocked or cannot be loaded, providing recipients with context and accessibility. It's also helpful for individuals using screen readers.
• Test across multiple email clients: Different email clients and devices may render images differently. Test your emails across various popular clients (e.g., Gmail, Outlook, Apple Mail) and devices (desktop, mobile, tablet) to ensure your images display properly.
• Provide a clear call to action: If your email contains clickable images, ensure there is a clear call to action (CTA) with text or a button. Some recipients may not understand that an image is clickable, so including explicit instructions can improve engagement.
• Avoid image-only emails: Relying solely on images for your email content can be problematic. Some email clients may block images by default, leaving recipients with an empty or uninformative email. Always include relevant text alongside your images.

Improve email engagement by embedding images with Twilio SendGrid

When you run all these tests and try these different methods, remember why you're trying to embed emails in the first place. Is it to improve your brand consistency? Maybe it's to improve email engagement? Or is it to keep up with your competitors?

With Twilio SendGrid, we can help you monitor your sending analytics and compare and contrast your results. If you try sending image-rich emails for a couple of weeks but find your engagement dipping, it might not be worth the slight bump in your brand consistency.

Your audience varies as widely as the different email clients, browsers, and devices—make sure to include their wants and needs in your design decisions, too.

Ready to start sending better emails? Sign up for a free Twilio SendGrid account today (no credit card required) and take advantage of our first-class editor, which lets you build emails with the following:

• Design Editor: Drag and drop tool
• Code Editor: Develop emails from scratch
• Hybrid Editor: Use code and drag and drop

Frequently asked questions

Q. What's the difference between embedding and attaching an image in email?

Embedding displays the image directly in the email body as part of your content. Attaching adds the image as a separate file that recipients need to download. Embedded images create a smoother reading experience, while attachments often get flagged as spam and require extra clicks to view.

Q. Which image embedding method works best across all email clients?

Linked images hosted on a CDN give you the most consistent results across email clients. They keep your email size small, load quickly, and work reliably in Gmail, Outlook, and Apple Mail. CID embedding works well in desktop clients but struggles with webmail. Base64 encoding increases email size significantly and gets blocked by Outlook entirely.

Q. What is a CID image?

CID stands for Content-ID. It's a method that attaches an image to your email and references it using a unique identifier in your HTML code. Think of it like giving your image a nickname that your email template can call up when needed. The syntax looks like this: <img src="cid:myimagecid"/>.

Q. Why aren't my embedded images showing up in Gmail?

Gmail blocks images by default until recipients click "Display images below." This is a security feature, not a problem with your embedding method. Design your emails assuming images won't load initially. Use descriptive alt text and include enough text content so your message makes sense even without images.

Q. What is an inline image in email?

An inline image appears within the flow of your email content, as opposed to as an attachment. You can create inline images using CID embedding, Base64 encoding, or by linking to an externally hosted image. All three methods display the image in the email body rather than as a downloadable file.

Q. How do I embed a PNG in an email?

The process is the same regardless of image format (PNG, JPEG, GIF). The easiest method is linking to the PNG hosted on your server or CDN: <img src="https://yoursite.com/image.png" alt="Description"/>. For Base64, convert your PNG to a Base64 string and embed it: <img src="data:image/png;base64,iVBORw0KG..." alt="Description"/>.

Q. Do embedded images affect email deliverability?

Yes, but it depends on how you use them. Image-only emails with no text get flagged as spam. Oversized images slow load times and hurt engagement. Too many images can trigger spam filters. Keep your image-to-text ratio balanced, optimize file sizes, and always include meaningful text content alongside your images.

Q. What is a CID link?

A CID link is the reference pointer in your HTML that tells the email where to find an attached image. It connects your <img> tag to the actual image file you've attached to the email. The "cid:" prefix indicates you're referencing a Content-ID rather than a standard URL.

Q. Should I use Base64 encoding for email images?

Generally, no. Base64 encoding bloats your email size by roughly 30%, which slows sending and can trigger size limits. It also gets blocked completely in Outlook and doesn't offer any real advantages over linked images. The only scenario where Base64 makes sense is for very small images (like icons) when you absolutely cannot link to external resources.

Q. How can I test if my embedded images will display correctly?

Use an email testing tool to preview your email across different clients before sending. SendGrid's Email Testing shows exactly how your images render in Gmail, Outlook, Apple Mail, and other popular clients. Test on both desktop and mobile. Never rely solely on iOS Mail for testing since it displays almost everything correctly and won't reveal problems your recipients might see.

Q. What size should my email images be?

Keep individual images under 1MB, with most staying under 200KB. Your total email size (including all images and code) should stay under 102KB to avoid Gmail clipping. Compress images without sacrificing too much quality, and always optimize for web before embedding. Large images slow load times and hurt engagement.

Q. Can I change an embedded image after sending the email?

Only if you used linked images hosted on your server or CDN. With linked images, you can swap out the file on your server and recipients will see the updated version when they open the email. CID and Base64 embedded images are baked into the email permanently and cannot be changed after sending.