Data URI Converter

Convert files to data URIs for embedding in HTML/CSS and decode data URIs back to downloadable files.

Tested tool guide Tested browser tools Checked August 16, 2026

What Data URI Converter does, with a checked example

A data URI carries a file's media type and encoded bytes inside one `data:` URL. This converter works in both directions: select a local file to create an embeddable URI, or paste a URI to recover a downloadable file. File content is handled in the browser and is not uploaded. The common surprise is size: Base64 makes the payload longer than the original bytes, so data URIs are best suited to small assets.

Worked example

A concrete input and expected output from the current implementation.

Input

data:text/plain;base64,SGVsbG8=

Expected output

A downloadable text/plain file containing exactly five bytes whose text is Hello

`text/plain` is the declared media type, and `;base64` identifies the encoding. Decoding `SGVsbG8=` yields the ASCII byte sequence for `Hello`, which is five bytes long.

How the result is produced

Encoding a file

Encoding starts with the selected file's raw bytes and media type. The converter Base64-encodes those bytes and forms `data:<media-type>;base64,<payload>`. The resulting string can be used where HTML or CSS accepts a URL. The basic data URI format carries no original filename, so encoding preserves content but not that name.

Decoding a URI

Decoding reads the metadata before the first comma and the payload after it. The `;base64` marker means the payload represents Base64 text, which is converted back to bytes; the declared media type labels the download. That label does not inspect or alter the bytes, so an incorrect type remains incorrect after decoding.

Good uses

Embedding a small PNG icon directly in an HTML `img` source without maintaining a separate image file.
Putting a small background image or font resource into a self-contained CSS file for a portable example.
Recovering and saving the file represented by a data URI copied from HTML, CSS, or application output.

Limits and checks

Base64 represents each complete three-byte group with four characters, with padding for a final partial group. The data URI header adds further length.
The declared media type is metadata, not format validation. Successful decoding does not prove that the downloaded bytes actually match that type.
The standard data URI form does not carry the source filename. A decoded download may therefore receive a generated or generic name.

Common questions

Can I use the generated URI everywhere a URL appears?

No. The receiving HTML attribute or CSS property must permit that resource, and a site's Content Security Policy can disallow `data:` for the relevant resource type. Even when accepted, a large inline value can be harder to cache, inspect, or maintain than a separate file. Test it in the exact destination.

Does a round trip preserve the original file?

For the file bytes, yes, provided the complete Base64 URI is copied without modification and decoding succeeds. Base64 is reversible. The round trip does not inherently preserve the original filename, file timestamps, or other filesystem metadata because those values are not fields in the standard data URI form. The declared media type may also have been wrong.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.