Delimiter.live
How-to guide

How to Use Data URIs

A data URI embeds a file directly in the markup as data:mediatype;base64,payload, removing one network request. Base64 adds roughly a third to the size, and embedded content cannot be cached separately from the document that contains it. The trade is worth it for small, rarely-changing assets and harmful for large ones.

Data URI Encoder

Turn an SVG or snippet into an embeddable data: URI.

Open the tool

The appeal is obvious: one fewer request, no separate file to deploy, and no chance of a broken image path. The cost is less obvious, which is why data URIs are so often overused.

Two costs matter. Base64 inflates the payload by about 33%, and an embedded asset is re-downloaded every time its containing file changes, because it has no cache identity of its own.

Step by step

  1. Confirm the asset is small and stable

    Under a few kilobytes and rarely changing is the sweet spot: an icon, a small background, a single font subset. Anything large or frequently updated should stay a separate, cacheable file.

  2. Encode it with the correct media type

    The media type must match the content, exactly as with a Content-Type header. data:image/png;base64 for a PNG, data:font/woff2;base64 for a font. A wrong type here fails the same way a wrong header does.

  3. Skip Base64 for SVG

    SVG is text, so it can be embedded URL-encoded rather than Base64-encoded, which avoids the 33% penalty entirely and often produces a smaller string than the original file. Encode the angle brackets, hash and percent signs.

  4. Weigh it against caching

    An embedded asset is downloaded again with every change to the stylesheet or page holding it. If the same icon appears across many pages, a separate file cached once beats the same bytes embedded many times.

  5. Check the Content-Security-Policy

    A strict policy may block data: URIs. Loading images this way needs data: in img-src, and fonts need it in font-src. If an embedded asset silently fails to appear, look at the console before suspecting the encoding.

Example

The same tiny SVG both ways. URL-encoding is shorter than Base64 and stays readable.

Base64

url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=")

URL-encoded, preferred for SVG

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")

Frequently asked questions

What is a data URI?
A URI that carries the file content inline instead of pointing at a location. It takes the form data:mediatype;base64,payload and can be used anywhere a URL is expected — an img src, a CSS url(), a font source.
How much larger does Base64 make a file?
About a third. Every three bytes become four characters, so a 3 KB image becomes roughly 4 KB of text. For a small icon that is a fair trade against a whole HTTP request; for a photograph it is not.
Should SVG be Base64-encoded?
No. SVG is text, so URL-encoding it avoids the 33% penalty and usually produces a shorter string. It also stays readable and editable in the stylesheet, which Base64 does not.
Do data URIs hurt caching?
Yes. An embedded asset has no separate cache entry, so it is re-downloaded whenever the containing file changes. A shared icon used across a site is better served as one cacheable file.
Why does my data URI not load?
Most often the Content-Security-Policy. Strict policies exclude data: by default, so it must be added to img-src or font-src. The other common cause is an unescaped character in a URL-encoded SVG — the hash and percent signs both need encoding.

Tools used in this guide

All tools →
All guides →

Last reviewed .