Base64 Image Encoder

Convert any image to a Base64 data URI — for CSS backgrounds, HTML src, and email embeds.

Drop an image or click to browse

PNG, JPG, GIF, SVG, WebP — processed entirely in your browser

When to use Base64 images

Base64-encoding an image embeds it directly in HTML or CSS as a data URI, eliminating an HTTP request — useful for small icons, loading spinners, and email embeds where external URLs may be blocked. The trade-off is a ~33% size increase and longer HTML/CSS payloads, so it is best kept to images under ~5 KB. SVG files often compress well as URL-encoded data URIs instead — try the SVG to Data URI tool for that. For general Base64 text encoding, see the Base64 Encoder / Decoder.

Built and maintained by Meet Shah · Last updated 25 July 2026

What this tool is used for

Inlining a small icon into CSS to remove one request from the critical rendering path.
Embedding a logo in an HTML email, where external images are blocked by default in most clients.
Putting an image into a single self-contained HTML file with no accompanying asset directory.
Checking how much weight inlining a given image would actually add before committing to it.
Producing a data URI for a template or config file that cannot reference a separate file.

Frequently Asked Questions

How much bigger does the image get?: About a third. Base64 packs three bytes into four ASCII characters, so the payload is 4/3 of the original, plus a short data: prefix — a 30 KB PNG becomes roughly 40 KB of text. The size shown here counts the payload only, which is what actually goes into your file.
When is embedding actually worth it?: For small, always-needed assets: an icon, a tiny background, a logo in an HTML email. Below roughly 5 KB the saved HTTP request usually beats the 33% growth. Above that the file inflates every page or stylesheet carrying it, and the browser can no longer cache the image separately from the markup.
Do data URIs work in email?: Not reliably, which is the trap. Gmail strips them from HTML mail and several Outlook versions refuse to render them, so an embedded image that looks perfect in a browser preview can arrive as a broken box. Hosted images with an absolute URL remain the safe choice for email.
Does gzip cancel out the overhead?: Partly. Base64 text compresses better than raw binary, so a gzipped data URI is not the full 33% larger over the wire — but the image data underneath is already compressed, so there is little left to squeeze. Expect to recover some of the overhead, not all of it.
Should I embed an SVG this way?: Usually not. SVG is text already, so base64 inflates it for no reason — either paste the markup inline, or use a URL-encoded data URI, which keeps it readable and smaller. Base64 is the right choice for genuinely binary formats such as PNG, JPEG and WebP.

Common errors and gotchas

Inlining a large image, where the roughly one-third size increase and the loss of separate caching both work against you.
Assuming a data URI is cached like a file. It is re-downloaded with every document that contains it.
Expecting gzip to erase the overhead. Compression helps, but encoded binary compresses poorly next to the original.
Embedding an SVG as Base64 when percent-encoding the markup directly is smaller and stays readable.
Overlooking that some mail clients cap message size or reject data URIs outright.