How to Embed Images in HTML Emails Using Base64

When you send an HTML email with images, you are usually linking to images hosted on a server: <img src="https://yoursite.com/logo.png">. The problem is that most email clients — Outlook, Gmail, Apple Mail — block external images by default. Your recipient sees a blank box where your image should be until they click "Load Images."

Base64 image embedding solves this for critical images by placing the image data directly inside the email. No external request, no blocked image, no broken layout. This guide explains when and how to use it correctly.

Why Email Clients Block External Images

External images in email are blocked by default for privacy and security reasons. Every image request leaks information: the sender learns that you opened the email, when you opened it, your approximate location (via IP address), and what device you are using. This is how most email open-tracking pixels work — tiny 1x1 invisible images hosted on the sender's server.

Because users cannot see which images are tracking pixels vs real content, email clients block all external images until the user opts in. Outlook famously blocks them by default in corporate environments, which affects a significant portion of business email recipients.

This means that for important visual content — a QR code, a signature, a ticket barcode, an invoice logo — you cannot rely on external hosting. The image may simply not display for a large percentage of your recipients.

How Base64 Embedding Solves the Problem

When you Base64-encode an image and embed it directly in the email HTML, there is no external image to block. The image data is part of the email file itself. Email clients render it unconditionally — it loads as part of the HTML, not as a separate HTTP request.

The technique uses a data URI in the img tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo" width="200">

The Base64 string replaces the URL. The email client reads the inline data and renders the image. No server request occurs. No network connection is needed. The image will display even when the recipient is offline or in a corporate environment with strict outbound filtering.

Sell Custom Apparel — We Handle Printing & Free Shipping

How to Convert an Image to Base64 for Email

You need a tool that can read binary image files and produce Base64 output. Options:

Command line (Linux / Mac):

base64 -i logo.png | tr -d '
'

The tr -d '\n' removes the line breaks that the base64 command adds every 76 characters. Email data URIs should be a single unbroken string.

Python:

import base64
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode()
print(f"data:image/png;base64,{encoded}")

JavaScript (browser):

const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result);
reader.readAsDataURL(file);  // returns full data URI string

Many online image-to-Base64 converters also handle this — upload the image, get the data URI string back. Once you have the string, paste it directly into your img src attribute.

When to Use Base64 Images in Email (and When Not To)

Use Base64 for:

• Logos in transactional emails (order confirmations, invoices) where display is critical
• QR codes in tickets, boarding passes, access codes — these must always show
• Barcodes and receipt images
• Email signatures where the company logo must appear consistently
• Small decorative icons (under 10KB) in email templates

Avoid Base64 for:

• Hero images and large promotional photos — they will bloat the email to several megabytes
• Newsletter images — marketing emails expect image blocking; recipients are used to clicking "show images"
• Any image larger than ~20KB — the email size becomes unmanageable
• Animated GIFs — Base64 GIFs are enormous; host them externally instead

As a rule of thumb: use Base64 for small, functionally important images. Use external hosting for decorative and marketing imagery.

Email Client Compatibility — What Actually Works

Support for Base64 data URIs in email is broad but not universal:

Email Client	Base64 Support
Gmail (web)	Yes
Apple Mail	Yes
Outlook 2016-2019 (Windows)	Partial — some versions strip data URIs
Outlook 2021+ / Microsoft 365	Yes (improved support)
Thunderbird	Yes
iOS Mail	Yes
Android Gmail	Yes

Older Outlook versions on Windows are the main concern. If your recipient base is heavily corporate with Outlook 2016/2019, test thoroughly. A common fallback is to use a CID (Content-ID) attachment instead — this embeds the image as a MIME attachment and references it by ID, which has better Outlook compatibility but more complex implementation.

Frequently Asked Questions

Will Base64 images pass spam filters?

Embedded Base64 images can trigger some spam filters, especially if the Base64 content is very large. Large text-to-content ratios (lots of Base64 text, little readable text) can raise spam scores. Keep Base64 images small and ensure your email has substantial readable text content alongside them.

How large will my email be with a Base64 image?

Base64 adds about 33% overhead. A 50KB logo becomes roughly 67KB of Base64 text. Email providers have size limits — Gmail allows emails up to 25MB but large emails load slowly. Keep embedded images under 50KB each for best results.

Can I use Base64 in plain text emails?

No. Base64 data URIs are HTML constructs. Plain text emails do not support images at all, regardless of format. You need to send in HTML format (multipart/alternative with both text and HTML parts) for any embedded image approach to work.