Why Base64 Images Don’t Show in Gmail and Outlook

Published October 5, 2026

You built a nice HTML email or signature, embedded the logo as a Base64 data URI so there is nothing to host, hit send — and the recipient sees an empty box. It looked perfect in your browser preview. This is one of the most common surprises with Base64 images, and it is not a bug in your code: many email clients simply refuse to display data URIs.

This guide explains which clients break, why, and the three approaches that do work. If you want the general rules for embedding images on web pages (where data URIs are fine), see how to use a Base64 image in HTML and CSS.

Which email clients support Base64 images?

Support is patchy and changes between versions, so treat this as a guide rather than a guarantee, and always test:

The pattern to notice: the two largest providers, Gmail and Outlook, both fail. Since you rarely know which client a recipient uses, a data URI image is a gamble you will lose for a big share of your audience. And because the preview in your own email app or browser may be one of the few that works, you will not see the problem until a customer tells you.

Why email clients block them

1. Security filtering. Email is a favourite delivery route for phishing and tracking. Inline data can hide content from scanners that look for known image URLs, so providers strip it as a precaution.
2. Old rendering engines. Outlook for Windows draws email using Microsoft Word's engine, which supports only a narrow slice of HTML and CSS and has long had trouble with modern image tricks.
3. Message size. Base64 makes every image about 33% bigger, and Gmail clips any message whose HTML passes roughly 102 KB, hiding the rest behind a “View entire message” link. A single embedded photo can trigger that on its own — and the clipped part usually contains your unsubscribe link and footer.

What to use instead: three methods that work

1. Host the image and link to it (best for most people)

Put the image on your website, your newsletter service or any host that gives it a public https:// address, then reference it normally:

<img src="https://example.com/images/logo.png" alt="Company logo" width="200" height="60">

This is the standard method and is supported everywhere. The trade-off is that many clients block remote images until the reader clicks “display images”, so always set meaningful alt text and give the image explicit dimensions so the layout holds when it is hidden.

2. Attach it as an inline (CID) image

With CID embedding, the image travels inside the email as a separate attached part and the HTML refers to it by an ID:

<img src="cid:logo123" alt="Company logo">

Because the image is part of the message, it can show even when remote images are off. Email services and libraries (SendGrid, Mailgun, Nodemailer and similar) support this directly. It adds the image bytes to every message you send, so keep the file small.

3. Use your email app's own image button

For a personal signature, skip the HTML altogether. In Gmail, open Settings → See all settings → Signature and use the image button; in Outlook, use Insert → Pictures inside the signature editor. These tools handle hosting or attaching for you, and they work well with images you resize first. A fixed width of 150–300 pixels is plenty for a logo.

Check the size before you send

Whatever method you choose, a lighter image helps deliverability and avoids Gmail's clipping:

• Keep logos under 20–30 KB and photos under 100–150 KB. Run them through the image compressor; see how to compress an image to 100KB and compress images for email for quick settings.
• Resize to the display size (double it for sharp screens). A 600-pixel-wide email rarely needs an image wider than 1200 pixels. The image resizer does this in a few clicks.
• Use PNG for logos and flat graphics, JPEG for photos. Avoid WebP and SVG in email — support is still uneven.

When a Base64 image is still fine

None of this means Base64 is bad; it is only wrong for email. Data URIs work well on web pages, in app code, in JSON, in single-file reports and in stylesheets. If you want to see the size trade-offs in those cases, read why Base64 images are 33% bigger. To generate the string, the Image to Base64 converter runs locally in your browser, so a private screenshot or a signature scan is never uploaded.

Why your preview can lie to you

The most frustrating part of this problem is that it is invisible while you build. A browser preview, a desktop mail app that happens to support data URIs, or a test sent to your own Apple Mail account will all show the picture. The failure only appears when a real recipient opens the message in Gmail or Outlook. If your emails matter, test the same send in at least three places — a Gmail account, an Outlook account and a phone — and look at both light and dark mode, because a transparent PNG logo that looks fine on white can disappear on a dark background.

Email-testing services can preview dozens of clients at once, but a free Gmail address and an Outlook address already catch the large majority of problems.

A quick pre-send checklist

1. Replace every data:image source in your email HTML with a hosted https:// URL or a cid: reference.
2. Set alt, width and height on each image so the layout survives blocked images.
3. Keep total HTML under about 100 KB, and compress every image.
4. Send a test to a Gmail address, an Outlook address and your phone before the real send.