Data URI Encoder
Turn an image, SVG, font or snippet of text into a data URI with ready-to-paste CSS and HTML, see exactly how much bigger it gets, or decode a data URI back to its file.
How to Use
- Choose File to encode an image or other file, Text to encode SVG markup, CSS, JSON or plain text, or Decode to open an existing data URI.
- Drop a file onto the box (or click it to choose one), or type and paste into the text box. Everything is read locally in your browser.
- For SVG and other text, choose Percent-encoded to get a shorter URI than Base64; binary files always use Base64.
- Check the size readout: original bytes, URI length and the overhead. Past 50 KB a warning suggests linking the file instead.
- Copy the raw URI, the CSS background-image snippet or the HTML tag, and check the preview to confirm it renders.
Worked Example
Text in Base64. “Hello, World!” is n = 13 bytes. Base64 needs 4 × ⌈13 / 3⌉ = 4 × 5 = 20 characters: SGVsbG8sIFdvcmxkIQ== (13 mod 3 = 1, so the last group is padded with two =). The prefix data:text/plain;base64, is 23 characters, so the URI is 23 + 20 = 43 characters, an overhead of (43 − 13) / 13 = 230.8%. On something this small the prefix costs more than the encoding.
An SVG icon, two ways. The circle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#d4943a"/></svg> is 110 bytes.
Base64: 4 × ⌈110 / 3⌉ = 4 × 37 = 148 characters, plus the 26-character prefix data:image/svg+xml;base64, = 174 characters (+58.2%).
Percent-encoded: the double quotes become single quotes and only <, > and # are escaped (as %3C, %3E and %23), giving 124 characters plus the 19-character prefix data:image/svg+xml, = 143 characters (+30.0%).
The common mistake: pasting raw SVG after data:image/svg+xml, without escaping #. The browser treats #d4943a"/></svg> as a URL fragment, so the SVG ends at fill=" and nothing is drawn. It must be written %23d4943a.
Show Work
Formulas
Where Data URIs Came From
The data: URL scheme was defined by Larry Masinter in RFC 2397 in August 1998, for “short values” that could be included in a URL directly. Mozilla and Opera supported it early; Internet Explorer only joined with version 8 in 2009, and limited data URIs to 32 KB. Once every browser could read them, inlining small images became a standard trick for cutting the number of HTTP requests, alongside CSS sprites.
HTTP/2 (2015) sends many files over one connection, which removed much of the cost of separate requests, so heavy inlining is now mostly a loss: inlined bytes cannot be cached on their own and delay the page they are in. Data URIs remain the right tool for tiny icons, placeholders, emails and single-file documents. Since 2017 Chrome and later Firefox block pages from navigating the whole tab to a data: URL, because scammers used them to fake login pages; images, styles and downloads are unaffected.
About This Tool
This tool turns a file or text into a data URI and gives you the raw URI, a CSS snippet (a background image, an @font-face rule for fonts, or an @import for stylesheets) and an HTML tag. For text and SVG it can percent-encode instead of using Base64, collapsing whitespace and escaping only what a URL needs, which is usually shorter. Decode works the other way: paste any data URI to see its type, its size in bytes, a preview, and the decoded text or a download link.
Files are read with the browser’s FileReader and never leave your computer — nothing is uploaded, which matters for unreleased designs, client logos and private screenshots. Files up to 10 MB are accepted, though anything over 50 KB is usually better linked than inlined.
Related tools: Base64 Encoder / Decoder, URL Encoder / Decoder, and Favicon Generator.
Frequently Asked Questions
What is a data URI?
A URL that carries the file itself instead of pointing to it, defined in RFC 2397: data:, the MIME type, an optional ;base64, a comma, then the data. data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== is the 13 bytes of “Hello, World!”. The browser decodes it on the spot, so the image or file needs no separate request.
How much bigger does Base64 make a file?
Base64 writes every 3 bytes as 4 characters, so n bytes become 4 × ⌈n/3⌉ characters — about 33% more, plus the data:image/png;base64, prefix. A 2,048-byte icon becomes 2,732 characters; a 37,500-byte image becomes 50,000. Gzip on the HTML or CSS wins some of that back, but never all of it.
When should I inline an image and when should I link it?
Inline small images that every visitor needs at once, such as icons under a few KB, a logo in an email, or a blurred placeholder. Link anything large or shared across pages: a linked file is downloaded once and cached, while an inlined copy is downloaded again inside every HTML page or stylesheet that contains it.
Why are SVG data URIs often percent-encoded instead of Base64?
SVG is already text, so it only needs a few characters escaped: <, >, and above all #, which would otherwise start a URL fragment and cut the colour #d4943a off. A 110-byte SVG circle is 174 characters as a Base64 URI but 143 percent-encoded, and stays readable. This tool also swaps double quotes for single quotes so the URI can sit inside url("…").
Is there a size limit for data URIs?
The standard sets none, and current browsers accept many megabytes. Internet Explorer 8 stopped at 32 KB, and some email clients and tools still truncate long URLs. In practice keep inlined images under about 50 KB of encoded text; this tool warns above that, because a normal linked file is then faster and can be cached.
How do I use the Data URI Encoder?
Simply type or paste your value and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Icons in CSS
Inline a 300-byte SVG icon as a percent-encoded background-image so it arrives with the stylesheet, with no extra request and no flash of a missing icon.
Self-contained HTML emails and reports
Embed a 4 KB logo directly in a single HTML file so it shows with no external hosting; its 4,096 bytes become 5,464 characters of Base64.
Prototypes and code playgrounds
Paste an image straight into CodePen or a single test page without uploading it anywhere.
Web fonts in one file
Encode a small WOFF2 subset and drop it into an @font-face rule for an offline page or a widget that must not load other files.
Inspecting a data URI you found
Paste a long data: string from someone else’s source into Decode to see its type, its real size in bytes and a preview, or download it as a file.
Last updated: