Data URI Generator

A data URI embeds a file directly inside a URL using the data: scheme, so the content travels inline instead of being fetched separately. It looks like data:<mime>;base64,<data> or data:<mime>,<url-encoded>, and works anywhere a URL does, such as a CSS background-image or an HTML img src.

They are best for small, static assets like icons, SVG shapes, fonts or tiny images. Inlining them removes an extra HTTP request, which helps above-the-fold rendering and self-contained emails or single-file pages. For large or frequently changing files a normal URL is better, because data URIs are not cached on their own and the base64 form adds about a third to the byte size.

Use URL encoding for SVG and other text-based markup. It is usually smaller than base64 and stays human-readable, so you can still read the markup inside the URI. Use base64 for binary or arbitrary content where readability does not matter.

Rather than escaping everything with encodeURIComponent, which roughly doubles the size, this tool escapes only the characters that would break the URI: % # < and >. Double quotes are swapped for single quotes (valid in SVG) so the result can sit inside a double-quoted CSS url() or HTML attribute, and runs of whitespace are collapsed. The SVG renders identically but stays compact and readable.

Yes. Base64 output is UTF-8 safe, so emoji, accents and other multi-byte characters are encoded correctly and decode back to the exact original.

Yes. The data URI is generated entirely in your browser, so nothing you paste is uploaded or stored on a server.