I rebuilt my Base64 image tool to be fully client-side (no uploads)

Most "image to base64" sites upload your image to a server to convert it. For a format whose
whole point is inlining an image, that's backwards — and a privacy footgun. So when I redesigned
base64image.org I moved the whole thing into the browser. The gist:

Encoding: FileReader

No upload, no canvas for the common case — FileReader hands you a data URI directly:

const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;      // "data:image/png;base64,iVBORw0K..."
  const base64  = dataUri.split(",")[1];
};
reader.readAsDataURL(file);

The MIME type is baked into the data URI, so from one result you can emit raw base64, a full
data: URI, an , or a CSS background-image.

Decoding: point an at it

The other way is simpler — a pasted string becomes a preview with
img.src = "data:image/png;base64," + input, and a download via an with the same URI.
If the paste has no header, sniff the first bytes (PNG/JPEG/GIF/WebP magic numbers) to guess the
MIME so the preview still works.

Gotchas

• Large images: base64 inflates size ~33% and huge data URIs jank the DOM — I show the resulting size so nobody inlines a 4 MB hero by accident.
• No uploads = works offline and nothing leaves the device — the real win over server-side tools.

Live tool (mine, free, no login): https://base64image.org

I just reworked the UI — feedback on the encode/decode split and how it feels on mobile? What
would you add?