A Data URI embeds a file's content directly inside HTML, CSS, or JS as data:[type];base64,[data] — no separate HTTP request needed. It's a handy trick, but it runs straight into one of email development's oldest headaches: Outlook.
Why your embedded logo shows up as a broken image in Outlook
Outlook (the desktop version, which still renders email using Microsoft Word's HTML engine rather than a browser engine) doesn't support data: URIs for images at all — it just shows a broken-image icon where the picture should be. This single quirk is why email marketing platforms almost universally recommend hosted image URLs over inline Base64, even though Data URIs work fine in Gmail and most other clients.
Where it does pay off
- Fewer HTTP requests — useful for small icons or background images in a web app.
- The asset is "attached" to the document and can't 404 if a file gets moved or a CDN path changes.
- Inline placeholder images (a tiny blurred JPEG) that need to render before the real image finishes loading.
The trade-offs
- Base64 inflates the data size by roughly a third compared to the original binary.
- A large Data URI bloats the HTML/CSS file itself and can't be cached by the browser separately from the page.
- For large or frequently reused images, a separate cacheable file nearly always wins on repeat visits.
SVG as text, not Base64
Unlike raster formats, SVG is text (XML), so it doesn't need Base64 at all — percent-encoding the special characters is enough (data:image/svg+xml,%3Csvg...). That keeps the result smaller and still editable as plain text right inside a CSS file, which matters if you're maintaining the icon set by hand rather than through a build step.