Data URI Generator
Convert a file into a data: URI for embedding in HTML or CSS, with a smaller URL-encoded mode for SVG.
Processed locally in your browser. Your file is never uploaded.
- Produces a complete `data:` URI with the right MIME type, in either base64 or URL-encoded form.
- URL-encoded mode is smaller and stays readable/diffable for text-based content (SVG, CSS, JSON, plain text) — the recommended choice for embedding SVG icons in CSS specifically.
- Removes one network request for a small asset — the file travels inside your HTML or CSS.
- Runs in your browser; the file is never uploaded.
Why this is private
- Processed locally in your browser. Your file is never uploaded.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Converts a file into a data: URI — a self-contained string that embeds the file's content directly, useful for small icons or fonts you want to inline in CSS or HTML without a separate request. For text-based files like SVG, a URL-encoded mode produces a smaller, human-readable result than base64.
How to use it
- 1Drop a file.
- 2For text-based files, choose Base64 or URL-encoded — URL-encoded is usually smaller for SVG.
- 3Copy the generated data URI.
- 4Paste it as an `src`, `url()` or `href` value.
Tips
- Best for small files (a few KB) — embedding large files this way bloats your HTML/CSS and bypasses browser caching.
- For SVG specifically, URL-encoded mode is usually meaningfully smaller than base64 — base64 always adds about 33% overhead regardless of content, while URL-encoding only escapes the handful of characters that actually need it.
Frequently asked questions
What people use it for
Inline a small SVG icon in CSSUse URL-encoded mode for a smaller, more efficient `background: url(...)` data URI than base64 would produce.
Inline a small PNG iconBase64 mode works for any binary image format that URL-encoding can't represent.
Bundle a font into a single CSS fileShip a small icon font as a data URI when you can't add another file.
Embed an image in an email templateSome contexts need the image inside the HTML rather than linked.
Prototype without a build stepDrop an asset straight into a single HTML file with no server.
Related tools
All developer toolsBase64 File EncoderEncode any file to a Base64 string or data URI.Image to Base64Encode an image as a Base64 data URI, with ready-to-paste CSS and HTML snippets.URL ParserBreak a URL down into its protocol, host, path and query parameters.HTML Entity EncoderEscape special characters into HTML entities — XML-safe, extended named, decimal or hex.
Ready to use Data URI Generator?
Data URI Generator