Image to Base64

What this does

Drop or pick an image and the tool returns a Base64 data URI: a single string that contains the entire image, ready to paste anywhere a URL would normally go. The result starts with data:image/png;base64, (or image/jpeg, image/gif, etc.) followed by the Base64-encoded bytes. Pasting that string into an <img src="..."> attribute or a CSS background-image will display the image without any external request.

The conversion happens entirely in your browser. Your image isn't uploaded anywhere — the file is read locally with the FileReader API and never leaves the page.

When inlining an image is the right call

• Tiny icons in CSS. A 200-byte SVG arrow used as a list-style-image makes more sense inline than as a separate HTTP request.
• Email templates. Many email clients block remote images by default. Embedding small logos or icons as data URIs sidesteps that, at the cost of a larger email.
• Self-contained HTML files. A standalone .html you can email or archive, with no broken-image references when the assets get separated.
• Sprite alternatives. Inlining a handful of icons can be cleaner than maintaining a sprite sheet.
• Quick prototyping. Pasting an image into a Codepen or chat without hosting it anywhere first.

When it's a bad call

The output is roughly 33% larger than the original file. For a 5 KB icon that's nothing; for a 500 KB hero image it's a 175 KB tax for a worse outcome. Specifically:

• The browser can't cache it independently. A normal image gets cached on first load and reused for free. An inlined image is part of the HTML or CSS file that contains it, and is re-downloaded every time that file is.
• Large data URIs slow page parse and paint. Browsers must read the entire string before rendering. A 100 KB inlined image inside a stylesheet blocks layout for noticeably longer than a separate file would.
• Source control diffs explode. Updating one inlined image changes a giant single-line diff. Fine for small commits, painful in pull requests.

Rough rule: inline anything under 5–10 KB; serve everything bigger as a normal file.

Format choice still matters

Inlining doesn't change the underlying format. If you inline a 1 MB JPEG, the data URI is 1.33 MB. Optimize the image first — resize, compress, prefer SVG for line art — before encoding. For photos, JPEG or WebP. For icons and line art, SVG (which can be inlined directly as text without Base64 at all, or referenced as data:image/svg+xml;utf8,...).

Decoding the other direction

If you have a data URI and want to extract the binary — useful for downloading an inlined image or piping it through another tool — most browsers' devtools let you right-click and save a data URI directly. From a script, the slice after the comma is the Base64 payload, and decoding it gives you the original bytes.

Privacy

Because nothing leaves your browser, this tool is safe for sensitive images: signatures, ID scans, internal screenshots. The output string is a complete copy of the image, though — if you paste a data URI into a public site, you're publishing the image itself.