How to Embed Images in HTML Email

To embed an image in HTML email, use a hosted image URL, a CID attachment referenced from the message HTML, or a Base64 data URI. Hosted URLs keep messages smaller, CID attachments bundle the image with the email, and Base64 support varies by email client.

Test the delivered message before release because Gmail, Outlook, Apple Mail, and mobile clients handle remote and embedded images differently. This guide compares attached and embedded images, explains the three methods, and shows how MailSlurp helps verify the final message.

Attached vs. embedded images

An image sent as a normal attachment appears separately from the message body and can be downloaded by the recipient. An inline image is referenced by the HTML so that it can appear as part of the message.

Inline delivery does not guarantee display. Email clients can block remote images, proxy or cache hosted files, and handle CID attachments or Base64 data differently. Use explicit image dimensions, descriptive alt text, and a layout that still works when an image is unavailable.

File attachments

Use a regular attachment when the recipient needs the original file to download rather than an image that forms part of the message design. Keep the provider's total message-size limit in mind.

Inline images

Use an inline image when the graphic belongs in the message body. Choose between a hosted URL, CID attachment, or Base64 data URI based on message size, client support, privacy requirements, and caching behavior.

There is no universal client default to rely on. Recipients can change privacy settings, and client behavior changes over time, so test the actual delivered message across the clients your audience uses.

Three ways to embed images in HTML email

Here are the three main methods for inserting images into emails.

1. CID attachments

MIME (Multipurpose Internet Mail Extensions) is an Internet standard created for SMTP. It allows the transmission of multiple content types (like text and HTML) in a single message body and supports non-text attachments like images.

Attach the image and reference it in the message body by setting the CID (Content-ID) and making use of a typical HTML tag:

<img src="cid:product-image" alt="Example product" />

2. Base64 data URIs

Embedding a base64 image in HTML is another method for displaying an image in the body of your message. Base64 is a collection of related binary-to-text encoding techniques.

Base64-encode the image file and place the encoded data in the image source. This increases message size and is not supported consistently, so test it with the email clients you need to support.

<img src="data:image/png;base64,239djg348ws" alt="Example product" />

3. Hosted image URLs

Host the image on a public HTTPS URL and reference it with an img tag. This keeps the image bytes out of the message itself, although clients may block, proxy, or cache the request.

<img src="https://example.com/email/image.jpg" alt="Example product" />

Use stable URLs and make sure the image remains available for as long as recipients may open the message.

How to test images in HTML email

Whatever method you use to embed images, you must test your HTML email in various email clients to see how your image(s) and the rest of the email are rendered.

With MailSlurp test inboxes, you can receive the finished message, inspect its HTML and attachments, and preview its rendering before release. Pair that with spam and deliverability checks when sender configuration is also in scope.

How to send HTML email

Before sending, confirm that images and fallback content work across the email clients you support. Check the message's spam score, sender authentication, links, and inbox placement as part of the same release workflow.

MailSlurp supports both email APIs and SMTP for sending test messages. You can then receive the message in a real inbox and inspect the delivered result instead of relying only on the source HTML.

HTML email image QA checklist

Before sending image-heavy campaigns:

• Validate image rendering and fallback behavior in Email Sandbox.
• Run client and workflow checks with Email Integration Testing.
• Capture delivery and engagement events with Email Webhooks.
• Route retry and suppression logic using Email Automation Routing.
• Confirm inbox placement with an Email Deliverability Test.

Conclusion

Choose the image method that fits your message size and client support, then test the delivered email with remote images disabled as well as enabled. Clear alt text, stable hosted URLs, and a resilient layout help the message remain useful even when an image does not load.