Image to Base64

A data URI carries the file itself inside the URL rather than pointing at one. Instead of src="/logo.png" you get src="data:image/png;base64,iVBORw0KGgo…", with the entire image encoded as text.

The browser decodes it inline, so the image renders with no separate network request. That is the whole point: for small assets, the request costs more than the bytes.

Pick your output wrapper and the tool formats it for where it is going — a CSS background-image rule, an HTML img tag, a Markdown image, or the raw URI.

Good for small assets: icons, a logo in an email template, a placeholder, a tiny pattern. Anything under roughly 5 KB where saving a request genuinely helps.

Good for self-contained files: single-file HTML, emails where external images get blocked by default, or anything that must work with no server.

Bad for photographs and large images. Base64 grows the payload by about 33 per cent, and inlined data cannot be cached separately — the browser re-downloads it with every page rather than reusing it from cache.

Bad for anything reused across pages, for the same reason. A logo referenced normally is cached once and reused; inlined, it is paid for on every page load.

Base64 encodes three bytes as four characters, so the string is always about a third larger than the file. The panel shows both figures so the trade is visible.

Encoding as WebP before converting often cancels that out — a WebP that is 30 per cent smaller than the PNG ends up a similar length once encoded, with the request still saved.

No. Encoding happens in your browser and the result never leaves the page until you copy it. Nothing is uploaded, stored or logged.