When should I use a data: URI instead of a separate file?

For tiny assets where the HTTP overhead exceeds the file size: small icons, single-use placeholders, inlined CSS background images in email templates. Larger files lose browser caching and inflate ~33% from Base64.

Are data: URIs safe in production?

Mostly. Browsers restrict navigation to data: URIs as a security measure (top-level navigation is blocked) and content-security-policy can disallow them. Test against your CSP before relying on them.

Is the file uploaded?

No. The file is read locally with FileReader and encoded in your browser.

any file · data uri · mime · local

Turn any file into a data: URI

Drop a file in and get a Base64 data URI with the right MIME prefix. Embed directly in HTML or CSS — no separate request needed. Runs entirely in your browser.

Data URI Builder

File

—

drop one

MIME

—

Bytes

—

Status

—

local

input · any file

Base64 inflates payloads by ~33%. Inline only what's small (logos, icons, fonts < 8 KB). Anything larger should stay a real URL.

output · data uri

Drop a file to build a data URI

Quick Start

How to build a data URI

FileReader.readAsDataURL handles the encoding. The resulting URI starts with data:<mime>;base64, and contains the file bytes as Base64.

01
Drop any file
The MIME type is read from the file's type field; falls back to application/octet-stream.
Bytes flow through TextEncoder/TextDecoder for predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.
inputUTF-8TextEncoderlosslesslive
input · raw bytesfile · UTF-8
```
icon.svg
```
loaded · UTF-8MIME · ready
02
Auto-encode
FileReader emits a complete data: URI in one step.
Hash and signature operations call crypto.subtle from the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.
encodeWeb Cryptosubtledeterministiclive
out · optionsdata: · live
```
data:image/svg+xml;base64,…
```
options applied · livelive
03
Copy & embed
Paste into CSS url(…) or an HTML src attribute.
Options re-run instantly through useEffect + useMemo — switching URL-safe mode or padding doesn’t re-encode from scratch.
pastememoisedoptionsinstantreactive
use · encodedcss/html · ready
```
background: url("data:…")
```
encoded · livelossless
04
Save round trips
Useful for tiny icons, single-file demos, and offline assets.
Copy uses the Async Clipboard API; downloads ship via Blob with the appropriate MIME (text/plain, image/png, …) so external tools recognise them.
useclipboardblobMIME-correctclient-side
ok · copiedready · done
```
Copied
```
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 use data URIs

Inline icons, email templates, embedded fonts.

Inline icons

Avoid an HTTP request for tiny PNG / SVG sprites. 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

Email templates

Survive aggressive mail clients with inline assets. 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

Self-contained docs

Markdown with all images inlined for portability. 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

Embedded fonts

@font-face src: url(data:font/woff2;base64,…). 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

Test fixtures

Tiny PDFs or images baked into JSON/YAML fixtures. 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

Bookmarklets

Drop a small image into a one-line JS bookmarklet. 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's the size limit?

Browsers usually accept several MB; some have URL-length limits per attribute (~32 KB). Keep inlines small.

Does this work for binaries?

Yes — any file. Without an explicit MIME, browsers treat it as application/octet-stream.

Why is the output so much bigger?

Base64 uses 4 characters per 3 bytes — ~33% overhead. Worth it only when the round-trip win is bigger.

Can I edit the MIME after encoding?

Yes — copy the data URI and swap the MIME between the data: and ;base64, prefix. Browsers respect it.

Is anything sent to a server?

No. FileReader runs in your browser — it runs locally and the file never leaves the device.

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!