Encode Images as Base64 Data URIs
Drop any image and get a Base64-encoded data URI instantly. Useful for inlining small icons, email-safe images, or CSS backgrounds. Everything happens in your browser — your images never leave your device.
About this tool
When to embed images as Base64
Base64 data URIs vs. HTTP requests
Every external image on a page is a separate HTTP request: DNS lookup, TCP handshake, TLS negotiation, then the actual download. On a slow mobile network, even a 1KB icon can cost 300ms. Inlining the icon as a Base64 data URI skips the round-trip — the bytes are already in the HTML or CSS the browser just parsed.
The trade-off: Base64 inflates the encoded size by about 33% over the original binary, and the inlined bytes can't be cached separately or reused across pages. So it's a fit for small, page-specific assets — not your hero images or photo galleries.
Inlining images in CSS: benefits and limits
You can drop a data URI directly into background-image,
list-style-image, border-image, or any
other CSS property that accepts a URL. It works in every modern
browser and reduces the number of CSS-triggered HTTP requests.
The most common production use case is SVG icons in CSS — they're already text, the Base64 wrapping is cheap, and you avoid the FOUC that comes with an external icon font loading after first paint.
Data URIs for email templates
Email is the strongest case for Base64. Many corporate mail clients (and Gmail's image proxy) refuse to load external images until the recipient explicitly clicks "Show images" — which most never do. Inlining the critical images guarantees they render on first open, in every client.
MarkupFox ships every email template with Outlook, Gmail, and Apple Mail in mind, inlining where it helps and using bulletproof external hosting where it doesn't. See our Design to Email service.
FROM THE TEAM THAT BUILT THIS TOOL
We inline images in email the right way.
MarkupFox email templates inline every critical image as a Base64 data URI where needed — ensuring they render in Outlook, Gmail, and Apple Mail without relying on external hosts.
Clean up minified or AI-generated HTML. Configurable indentation.
Remove whitespace, comments, and redundant code. Typically 30–70% smaller.
Convert pixel values with a Tailwind spacing reference alongside.
SEO + Open Graph + Twitter Card with live SERP preview.
WCAG AA/AAA contrast ratio for any two colors, with a live preview.
Frequently asked questions
What is a Base64 data URI?
A data URI embeds file content directly in a URL string using Base64 encoding. For images, it looks like data:image/png;base64,iVBOR.... You can use this string anywhere a URL is expected — in an <img> src, a CSS background-image, or an email template.
When should I use Base64 images instead of external URLs?
Base64 is useful for small icons or images in email templates where external URLs may be blocked by email clients. For most web images, external URLs with a CDN are better — Base64 adds ~33% overhead and prevents browser caching.
Does my image get uploaded to a server?
No. The FileReader API reads your image locally in the browser. Nothing is sent over the network — your image data never leaves your device.
What image formats are supported?
Any format your browser can read: PNG, JPG/JPEG, GIF, WebP, SVG, AVIF, and BMP. SVGs are particularly well-suited for Base64 encoding since they're already text.
Why is the encoded output larger than the original?
Base64 encoding represents 3 bytes of binary data using 4 ASCII characters — roughly a 33% size increase. That's the cost of inlining binary content as text. For very small icons (under ~2KB) the overhead is often worth it to avoid an extra HTTP request.
Is there a file size limit?
There's no hard limit, but practical browser limits start to bite above ~5MB. Most browsers handle data URIs up to a few hundred KB without issue. For larger files, prefer external URLs.