Convert files to data URIs and data URIs back to files for inline embedding in HTML and CSS.
A data URI inlines a file's bytes into a URL: the `data:[mediatype][;base64],<payload>` scheme lets an `<img>` src or a CSS `url()` carry an image, font, or stylesheet with no separate file and no network request. This tool converts files into that form and converts URIs back into files. Encoding reads the file, base64-encodes its bytes, and prepends a MIME type guessed from the filename; decoding reverses each step. The surprise for most users: the result is bigger than the source, roughly a third larger for base64, before the prefix and mediatype add anything.
A concrete input and expected output from the current implementation.
Input
A text file named hello.txt containing: Hello, world!
Expected output
data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==
The 13 bytes of "Hello, world!" encode as 18 base64 characters: each three-byte group becomes four characters, and the single leftover byte yields two characters plus == padding. The tool prepends data:text/plain;base64,, using text/plain as the MIME type inferred from the .txt extension.
The file's bytes are base64-encoded: every three bytes become four characters from the base64 alphabet, with = padding at the end of the payload. The tool guesses a MIME type from the file extension (.png -> image/png, .svg -> image/svg+xml) and assembles data:<type>;base64,<payload>. Unrecognized extensions fall back to a generic type such as application/octet-stream; you can usually override the guess before copying.
Pasting a data URI runs the reverse direction. Everything before the first comma is the header: the scheme, the mediatype, and optionally the ;base64 marker. If the marker is present the payload is base64-decoded; otherwise it is percent-decoded, turning %20 back into a space and %2F into a slash. The mediatype in the header decides the suggested filename extension (image/png -> .png, font/woff2 -> .woff2) when you save the recovered bytes.
Base64 alone adds a third: 3 bytes become 4 characters. On top of that come the data: prefix and the MIME type, and percent-encoding makes binary data roughly three times larger because most bytes expand to %XX. For a few kilobytes of icons the overhead is acceptable; beyond a few hundred kilobytes, a real file is almost always the better choice.
No. The conversion happens entirely in the browser: bytes are read from the file you selected, encoded in memory, and never transmitted. The same applies in the decode direction. That is useful for sensitive content, but remember the output URI embeds the whole file - treat a copied URI with the same care as the file itself.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.