Base64 Image Encoder

Convert images to Base64 data URIs and decode Base64 strings back to downloadable image files.

Tested tool guide Tested browser tools Checked August 15, 2026

What Base64 Image Encoder does and how it behaves

This tool reads an image file entirely in your browser, using the File API to load its raw bytes, then encodes those bytes as a base64 text string and wraps it in a data:image/...;base64, URI you can paste into CSS, HTML, or JSON. It also runs the reverse: paste in a base64 string or full data URI and it decodes the text back into binary and offers it as a downloadable image file. The detail people miss most: base64 text runs about a third longer than the original file, since every 3 bytes of image data becomes 4 characters of text.

How the result is produced

Encode: file to data URI

The tool reads the selected image with the browser's FileReader API, which returns the file's bytes as a base64-encoded string via readAsDataURL. It reads the file's detected MIME type from the file object and prefixes the base64 text with data:<mime-type>;base64, so the result is a complete, self-contained data URI usable directly as an image source.

Decode: text back to file

Paste a bare base64 string or a full data:image/...;base64,... URI and the tool strips any data URI prefix, decodes the remaining text back into raw bytes, and lets you save the result as a file. When you supply a full data URI it also reads the MIME type from the prefix to set a matching file extension on download.

Good uses

embedding a small icon or logo directly into a CSS background-image or HTML email template so it loads with no extra HTTP request
inlining an image inside a JSON config file, API payload, or environment variable where only text fields are allowed
recovering a viewable, downloadable image from a base64 string you found pasted in code, a log file, or a database column

Limits and checks

the base64 output is roughly 33% larger than the original file in bytes, so it is a poor fit for large photos or anything size-sensitive
copying only the base64 payload without the leading data:image/png;base64, prefix will not render if you paste it straight into an <img src> or CSS url()
decoding trusts whatever MIME type is in the prefix (or that you select); if that type is wrong the saved file may have the wrong extension or fail to open in some viewers

Common questions

Does the image get uploaded to a server when I convert it?

No. The read, encode, and decode all happen locally in your browser using the File API - the image bytes never leave your machine as part of this tool's operation.

Why is my base64 text so much longer than the original image file?

Base64 maps every 3 bytes of binary data to 4 ASCII characters, which is inherent to the encoding, not a bug in the tool. Expect roughly a 33% size increase, plus a few more characters for the data URI prefix.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.