Using Data URIs in HTML Email Templates

Data URIs in Email HTML

HTML emails face a unique challenge: many email clients block external images by default, showing broken image icons or a "load images" prompt. Data URIs can solve this by embedding image data directly in the email HTML, so images display without requiring the user to allow external loading.

Email Client Support

Data URI support varies widely across email clients:

Client	Data URI Support
Apple Mail	Full support
iOS Mail	Full support
Thunderbird	Full support
Gmail (web)	Stripped/blocked
Outlook 2016+	Stripped/blocked
Yahoo Mail	Partial support
Samsung Email	Full support

The Gmail and Outlook Problem

Gmail and Outlook strip data URIs from email HTML for security reasons. This means you cannot rely on data URIs as the sole image strategy for email. Instead, use data URIs as a progressive enhancement with fallbacks.

Fallback Strategy

<!-- Primary: hosted image for Gmail/Outlook -->
<!-- Fallback: data URI for clients that block external but allow inline -->
<img
  src="https://cdn.example.com/logo.png"
  alt="Company Logo"
  style="width:150px;height:50px;"
/>

For clients that support data URIs, you can use them for small decorative elements:

<td style="background-image: url('data:image/png;base64,...');">

Size Considerations for Email

Email message size directly affects delivery rates:

• Keep total email size under 100 KB for best deliverability
• Data URIs inflate email size significantly
• Use only for small images (under 5 KB original size)
• Prefer hosted images with proper CDN caching

Best Practices

1. Always provide alt text — For clients that strip data URIs
2. Keep data URIs small — Only icons and small logos
3. Test across clients — Use Litmus or Email on Acid for testing
4. Provide hosted fallback — Ensure images work even if data URIs are stripped