Generate a Data URI from an Image

Image to data URI: how it works

A data URI is the full self-contained string a browser can use directly as an image source: the scheme data:, the media type, the ;base64 marker, a comma, and then the Base64 body — no separate file or server request needed.

Data URI shape

data:[<mime-type>];base64,<base64-body> e.g. data:image/svg+xml;base64,PHN2Zy…

Size impact

The Base64 body adds the usual ~33% over the binary file, and the data:<mime>;base64, prefix adds a fixed handful of extra characters on top (typically around 20–30, depending on the media type).

When inlining as Base64 makes sense

• You want a one-line, paste-anywhere asset for a CSS background-image: url("data:…") rule or an <img src="data:…"> tag.
• You're embedding an image in something that only carries text — a JSON document, an SVG, an HTML email, or a single-file HTML page.
• You want to remove a render-blocking request for a tiny, above-the-fold icon so it paints with the first response.

When a normal file or URL is better

• The asset is big or shared across pages — an external URL lets the browser cache it once instead of re-parsing it everywhere it's inlined.
• You rely on a Content Security Policy that forbids data: URIs in img-src or style-src, which many strict CSP setups do by default.

Practical tip

For SVG specifically, a percent-encoded (URL-encoded) data URI is often smaller than a Base64 one because SVG is already text; Base64 is the safe, universal choice, but URL-encoding can save bytes when every kilobyte counts.