Base64 Image Not Showing in Outlook? Why It Happens & the Fixes

You embedded a logo or icon in your HTML email as a Base64 data URI — <img src="data:image/png;base64,..."> — and it looks perfect in Apple Mail or your Gmail draft. Then an Outlook recipient reports a blank box, a broken-image icon, or nothing at all. That is not a bug in your code. Outlook does not render Base64 data URI images, in any of its current flavors. Here is exactly why, how to confirm that is really your problem, and the two fixes that work.

The short answer

Outlook never supported data: URIs in received mail, and there is no setting that turns support on:

• Outlook for Windows renders email HTML with the Word rendering engine, which predates data URIs and has no support for them. Your Base64 <img> simply produces a broken image placeholder.
• Outlook on the web (Outlook.com and Microsoft 365) runs received HTML through a sanitizer that removes or replaces data URIs — a known behavior where embedded images are swapped for a 1×1 transparent placeholder.
• Outlook for Mac and Outlook mobile are inconsistent at best. Do not rely on them rendering data URIs.

The supported way to embed an image in Outlook mail is a CID attachment (Fix 1 below), or a hosted HTTPS image (Fix 2). Base64 data URIs are a browser feature, not an email feature.

How each Outlook flavor handles Base64

Client behavior changes over time — always send a test to real accounts in each client before shipping an email template.

Quick diagnosis checklist

Before you rework the template, confirm Base64 is really the failure point:

1. Open the same HTML in Apple Mail or Thunderbird. If the image shows there but not in Outlook, you are looking at the data URI limitation — nothing is wrong with your encoding.
2. Check the raw message source. Look for src="data:image/.... If the attribute is intact in the source but the image is broken in Outlook, the client is refusing to render it.
3. Check the message size. Outlook on the web truncates very large messages, and a few large Base64 images can push a normal email past those limits. If everything below a certain point disappears, it is truncation, not the data URI.
4. Desktop Outlook only: did it stop rendering over time? Outlook for Windows has a known bug where it progressively fails to render Base64 <img> tags (black square) until the client is restarted. That is a client bug — another reason not to depend on data URIs in Outlook.
5. Rule out security software. Corporate antispam (e.g. Sophos) can quarantine or strip messages containing heavy Base64 content.

Fix 1: Embed the image as a CID attachment (recommended)

A CID (Content-ID) image travels as a real MIME attachment and the HTML references it with cid:. This is what Outlook itself does when you insert a picture, and it survives in Outlook desktop, Outlook.com, Gmail, Apple Mail and most other clients.

PHPMailer (PHP)

$mail->addEmbeddedImage('logo.png', 'logo-cid', 'logo.png');
// in the HTML body:
// <img src="cid:logo-cid" width="200">

Nodemailer (Node.js)

await transporter.sendMail({
  from: 'you@example.com',
  to: 'recipient@example.com',
  subject: 'Invoice',
  html: '<img src="cid:logo-cid" width="200">',
  attachments: [{
    filename: 'logo.png',
    path: './logo.png',
    cid: 'logo-cid'
  }]
});

Python (stdlib email)

from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
from email.mime.image import MIMEImage

msg = MIMEMultipart('related')
html = MIMEText('<img src="cid:logo-cid" width="200">', 'html')
msg.attach(html)

with open('logo.png', 'rb') as f:
    img = MIMEImage(f.read())
img.add_header('Content-ID', '<logo-cid>')
img.add_header('Content-Disposition', 'inline', filename='logo.png')
msg.attach(img)

Gotchas:

• The cid: value in the HTML must match the Content-ID exactly (case-sensitive, and without the angle brackets).
• CID images still count toward message size — keep the source file small. If it is a PNG logo, shrink it first with the PNG compressor and verify the final weight with the Base64 size calculator before wiring it into the template.
• CID attachments can render inconsistently in some webmail clients — for mass campaigns, hosted URLs (Fix 2) remain the most predictable choice.

Fix 2: Host the image at an HTTPS URL

For newsletters and marketing email, the standard is still a normal <img src="https://cdn.example.com/logo.png">:

• Use HTTPS and a stable domain. Expired links, private cloud-drive shares and hotlink-protected CDNs are the top reasons hosted images break.
• Expect image blocking by default. Outlook, Gmail and Apple Mail may not download remote images until the recipient clicks "show images". That is a privacy feature (remote images leak open-tracking data), not a bug — keep key information in text, and set meaningful alt attributes.
• Keep the file small — a 10-50 KB logo loads even on slow connections, and big images are the usual cause of slow-rendering or truncated email.

Signatures: use the editor's insert-picture, not raw HTML

If the broken image is in your Outlook signature, do not paste HTML with a data URI. Build the signature in Outlook's own signature editor and insert the picture there — on send, Outlook converts it into a proper inline (CID) attachment that recipients' clients render. The same logic applies to Gmail signatures; see the Base64 image in email signature guide and the Gmail-specific page on Gmail signature images not working.

When Base64 in email does work

Data URIs are not useless in mail — they are just scoped to the clients that support them:

• Apple Mail and Thunderbird signatures render data URIs natively — a valid route if your audience is Apple-heavy. The encoder on the email signature page produces a ready-to-paste snippet.
• Email you generate and control end to end where you know the client mix — transactional mail to a user base you have measured.
• Previews and testing — a Base64 snippet is the fastest way to see how a logo will look before it is uploaded to any signature platform or ESP.

For everything Outlook-related, treat CID or hosted URLs as the only dependable options.

Frequently asked questions

Need a properly sized Base64 string for the clients that do support it (Apple Mail, Thunderbird)? Encode it in the browser with the Image to Base64 converter — nothing is uploaded — and check its final size with the size calculator.