What is Data URI Generator?

Data URI Generator converts files into base64-encoded data URIs you can embed directly in HTML, CSS, or JavaScript. Eliminates extra HTTP requests for small assets like icons and fonts.

Drop in a file up to 20 MB and the tool detects the MIME type, base64-encodes the bytes, and gives you three ready-to-paste snippets: the raw data URI, a CSS background-image rule, and an HTML img tag. Images get a live preview so you can spot blank or corrupted output before it lands in production code. You can also paste raw text to encode an SVG or JSON string, shrink large images before encoding to keep the URI small, correct the MIME type if it was detected wrong, encode several files at once, fetch a remote file straight from its URL, or switch to decode mode to paste a data URI and download the original file back.

How to use

1. Upload a file with the picker, or switch to text mode and paste a string (SVG, JSON, CSS) to encode.
2. The tool encodes it to base64 and generates the complete data URI with the correct MIME type.
3. Copy the data URI for use in img src attributes, CSS background-image, or JavaScript code.

When to use

• Embedding a small logo or icon in a single-file HTML demo with no asset hosting.
• Inlining email images so they render even when remote loading is blocked.
• Pasting a font or SVG into a CSS file to remove a render-blocking request.

Result

Convert a 2KB favicon.png into a data URI and paste it directly into your HTML — one fewer network request on every page load.

FAQ

Why does the encoded data URI look about 33% larger than the file?

Base64 represents every 3 bytes of binary data with 4 ASCII characters, a 33% expansion. Gzip on the HTTP response recovers most of it for text-heavy assets, but the raw HTML or CSS file on disk really is bigger than the original asset.

What's the practical size limit for a data URI?

Roughly 10 KB before encoding for inline use. Past that, browsers still parse it but you lose the caching benefits (the URI is re-parsed on every page) and HTML/CSS files become harder to edit. For larger assets, host the file normally.

Can I use a data URI as a CSS background image?

Yes, the tool gives you the exact CSS rule. Wrap the URI in url() inside background-image. The browser decodes it on first paint, so a tiny icon stays inline and avoids a separate network request that would otherwise delay the first render.

Will my browser cache a data URI like a normal image?

No. A data URI is part of the parent document, so it's cached only when the document is cached. The same image referenced from twenty pages will be re-parsed twenty times. For shared assets across pages, a regular hosted URL is faster overall.

Do data URIs work in HTML emails?

Gmail and Apple Mail render them. Outlook (Windows desktop) strips them. For broad email compatibility, attach the image as a CID-referenced part instead of inlining a data URI in the HTML body.

Related Tools