When should I inline images as Base64 data URIs?

Inline small icons, sprites, or critical-path images where avoiding an extra HTTP request matters. For larger images the ~33% size overhead and lack of caching usually outweigh the savings.

Does the image get uploaded to a server?

No. The file is read with FileReader and encoded entirely in your browser. Nothing is uploaded, logged, or transmitted off your device.

Which image formats can I encode?

Anything the browser can read as binary: PNG, JPEG, GIF, WebP, AVIF, and SVG. The MIME type is preserved in the resulting data: URI so it renders correctly in CSS or HTML.

Why is my Base64 output so much bigger than the original file?

Base64 encodes 3 bytes into 4 ASCII characters, so output is roughly 33% larger than the source. With gzip on the wire most of that overhead compresses back away.

image · base64 · data uri · local

Inline images as Base64 data URIs

Drop a PNG, JPEG, GIF, WebP, or SVG and convert to a Base64 data URI you can paste into CSS or HTML. Runs entirely in your browser.

Image to Base64

File

—

drop one

Bytes

—

Base64

—

Status

—

local

input · image

Inline data URIs avoid a network request but add ~33% size overhead. Use for small icons; prefer real URLs for anything > 8 KB.

output · data uri

Drop an image to encode

Quick Start

How to inline an image

The browser reads the file with FileReader and emits a Base64 data URI. Paste it into background-image: url(…) or an <img src="…"> attribute.

01
Pick an image
PNG, JPEG, GIF, WebP, SVG — any browser-supported format.
Bytes flow through TextEncoder/TextDecoder for predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.
inputUTF-8TextEncoderlosslesslive
input · raw bytesimage · UTF-8
```
logo.svg
```
loaded · UTF-8MIME · ready
02
Inspect the preview
Verify the image rendered correctly before copying the URI.
Hash and signature operations call crypto.subtle from the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.
previewWeb Cryptosubtledeterministiclive
ok · optionsrendered · live
```
<img src="…" />
```
options applied · livelive
03
Copy the data URI
Includes the MIME prefix (data:image/png;base64,…). Drop directly into CSS or HTML.
Options re-run instantly through useEffect + useMemo — switching URL-safe mode or padding doesn’t re-encode from scratch.
copymemoisedoptionsinstantreactive
out · encodeddata: · ready
```
data:image/png;base64,iVB…
```
encoded · livelossless
04
Inline it
Best for icons under 8 KB — saves one HTTP request.
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 inline an image

Icons, email templates, single-file demos.

CSS background icons

Inline tiny PNG / SVG sprites without extra requests. 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

Embed logos that work without external image hosting. 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

Single-file demos

CodePen / JSFiddle without uploading images. 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

Offline apps

PWA assets bundled into HTML/CSS for cold-start speed. 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

Print to PDF

Ensure logos survive PDF export without missing files. 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

Test fixtures

Embed sample images in JSON / YAML test data. 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

Why does base64 inflate size?

Base64 represents 3 binary bytes with 4 ASCII characters — a ~33% size penalty. Worth it for tiny images, never for large ones.

Will browsers cache data URIs?

They're cached as part of the page that contains them, not separately. Re-using the same data URI across pages re-downloads the content each time.

What's the max size?

Browser dependent, but a few MB usually works. Larger inlines hurt parse performance — use external URLs instead.

Does this work for SVG?

Yes — SVGs encode to a data:image/svg+xml;base64,… URI. For smaller output use a URL-encoded SVG via the SVG to Data URI tool.

Is anything sent to a server?

No. The image is read by FileReader in your browser — it runs locally and the bytes never leave 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!