Base64 Data URIs for Images — Complete Guide

What a data URI looks like

A data URI is a way of embedding a file directly inside an HTML or CSS document, instead of linking to it as a separate resource. The full form is:

data:[<mime-type>][;base64],<data>

For a small PNG image, that becomes:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

The browser sees data: at the start, reads the MIME type, decodes the Base64, and treats the result as if it had downloaded the file. No HTTP request needed.

When data URIs are a good idea

Tiny icons under 1 KB. Embedding a 200-byte SVG saves a network round-trip that costs more than the byte overhead.
Email signatures. Inline images don't break when the email is forwarded, since the image is part of the message.
Self-contained HTML files. A standalone report that includes its own images, with no separate assets folder.
Critical-render content. A logo above the fold that the browser needs immediately. Embedding it avoids a render-blocking download.

When data URIs are a bad idea

Anything over ~4 KB. Base64 adds 33% overhead. A 50 KB JPEG becomes a 67 KB blob that bloats your HTML and can't be cached separately.
Images that repeat across pages. An external image is cached after the first load; an embedded one is re-downloaded as part of every page.
Large CSS background images. Each kilobyte in a stylesheet blocks the first render. External images don't.
User-uploaded content. Embedding untrusted user files in your HTML opens XSS and content-spoofing risks.

The break-even point

File size	Network savings (1 HTTP request)	Verdict
< 1 KB	Significant — request overhead dominates	Embed
1–4 KB	Marginal — depends on whether the image is reused	Profile both
> 4 KB	Lost to Base64 overhead and lost caching	External

SVG: the special case

SVG is text, not binary, so you have a choice: Base64-encode it or URL-encode it directly. URL-encoding produces a smaller result for SVG specifically, because the text already contains many characters that Base64 would inflate.

/* Base64 — works everywhere */
background: url("data:image/svg+xml;base64,PHN2ZyB...");

/* URL-encoded — smaller for SVG */
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'...");

Use the URL-encoded form for SVG when possible; use Base64 for everything else.

Decoding a data URI

Paste the part after base64, into our decoder. The result will be raw bytes — readable as text for SVG/XML/JSON, or as a binary file for PNG/JPEG. Most browsers also let you paste the entire data: URI directly into the address bar to view the embedded resource.

Inspecting a data URI from the wild

If you spot a data:image/... URI on a page and want to know what's inside, copy the part after the comma into the decoder — you'll see the raw bytes, including any PNG signature, JPEG magic number, or SVG markup.

Security note

A data: URI in an <iframe> or <a href> can execute JavaScript if its MIME type is text/html. Modern browsers block top-level navigation to data:text/html for exactly this reason. If you're rendering user-supplied URLs, reject the data: scheme unless you've validated the MIME type.

Published May 2026 · Last reviewed May 2026. Spot an error? Email contactus@base64decode.tools.

Embedding images with Base64 data URIs.