What does the ;base64 flag in a data: URI mean?

Without ;base64 the payload is percent-encoded text. With ;base64 it's Base64-encoded binary. The MIME type before the comma tells the browser how to render the payload.

Can the parser extract files from a data: URI?

Yes. Once parsed the payload is converted to a Blob and offered as a download with the correct MIME type, so you can save embedded images, PDFs, or other assets.

Is parsing done locally?

Yes. The URI is decoded in your browser; no upload occurs.

data uri · mime · base64 · live

Parse any data: URI

Paste a data: URI to inspect its MIME type, encoding, payload size, and decoded preview. Optionally download the embedded file. Runs entirely in your browser.

Data URI Parser

Input

43 B

uri

MIME

text/plain

type

Encoding

base64

form

Status

parsed

live

input · data uri

output · parsed

fields

MIMEtext/plain

Encodingbase64

Size13 bytes

Paramsbase64

preview

Hello, world!

Quick Start

How to parse a data: URI

A data: URI inlines a file's bytes inside a URL. The format is data:[mime][;param],payload — payload is base64 or percent-encoded.

01
Paste the URI
Starts with data:. Common in CSS url() and HTML attributes.
Bytes flow through TextEncoder/TextDecoder for predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.
inputUTF-8TextEncoderlosslesslive
input · raw bytesuri · UTF-8
```
data:text/plain;base64,…
```
loaded · UTF-8MIME · ready
02
Inspect the MIME
Tells you what kind of file is embedded.
Hash and signature operations call crypto.subtle from the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.
mimeWeb Cryptosubtledeterministiclive
mime · optionstype · live
```
image/png
```
options applied · livelive
03
Decode the payload
Base64 is decoded; URL-encoded payloads are unescaped.
Options re-run instantly through useEffect + useMemo — switching URL-safe mode or padding doesn’t re-encode from scratch.
decodememoisedoptionsinstantreactive
bytes · encodedready · ready
```
Hello, world!
```
encoded · livelossless
04
Download or copy
Grab the file via the data: URI or copy the parse report.
Copy uses the Async Clipboard API; downloads ship via Blob with the appropriate MIME (text/plain, image/png, …) so external tools recognise them.
exportclipboardblobMIME-correctclient-side
ok · copiedready · done
```
Saved
```
shipped · ready to shipsuccess

Pro tips

Encoding without surprises

Always UTF-8 first

Use TextEncoder / TextDecoder for bytes ↔ string conversion. btoa alone breaks on non-ASCII.

URL-safe vs standard Base64

Standard uses +, /, =; URL-safe swaps to -, _, no padding. Don’t mix them.

Hashes aren’t passwords

SHA-256 is fast; that’s good for fingerprints, bad for passwords. Use bcrypt / argon2 for credentials.

Watch padding rules

Some decoders are strict about = padding, others auto-pad. If round-trips fail at exactly 1 or 2 bytes, check padding.

Use Web Crypto for keys

Generate cryptographic keys via crypto.subtle, never Math.random. The latter is predictable.

JWT decode ≠ verify

Decoding a JWT just splits and base64-decodes. Verification needs the issuer’s public key / shared secret.

Use Cases

When to parse data: URIs

Debugging emails, dissecting bundles, recovering files.

Email forensics

Pull inline images out of MIME bodies. Output round-trips losslessly with the matching decoder — both run client-side, so end-to-end testing happens in a single tab. Encoding flows through TextEncoder for predictable UTF-8 semantics.

RFC-compliant

CSS audits

Identify huge inline assets bloating stylesheets. Web Crypto's subtle.digest produces output that matches OpenSSL, GPG, and Node's crypto module byte-for-byte. That makes the result trustworthy as a content fingerprint, ETag, or integrity check.

OpenSSL-matched

Bundler debugging

See what your build inlined as data: URIs. Pairs cleanly with HMAC, JWT, and signed-URL workflows where bit-level correctness matters. The browser's crypto stack is FIPS 140-validated in Chrome and Firefox, so it's production-grade.

lossless

Recovery

Extract files from one-line snippets in tickets. Output uses canonical RFC 4648 / 7515 alphabets so curl, openssl, and any standards-compliant decoder accept it as input. URL-safe variants drop padding for tokens that travel in query strings.

byte-identical

Security review

Decode suspicious URIs in safe isolation. Heavy hashing runs through useMemo so large inputs don't block typing. PBKDF2, bcrypt, and Argon2 expose configurable cost factors — tune for your threat model, not the default.

spec-grade

Documentation

Document the MIME and size of embedded assets. Same input plus same options always yields identical bytes. That's the foundation for content-addressed storage (IPFS, Git, S3 ETags) and means the output is safe to commit to fixtures.

production-ready

FAQ

Frequently asked questions

What MIME types are supported?

Any MIME — text/, image/, application/, etc. Text-like types render an inline preview; binary types show size only.

How do I get the file out?

Click Download file — the browser saves the decoded bytes using the data: URI directly.

Why no preview for binary files?

Showing raw bytes as text would be misleading. For images, the actual image preview renders.

What's the size limit?

Browsers cap data: URI length around tens of MB. This parser handles whatever your browser allows.

Is anything sent to a server?

No. Parsing runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!