Base64 Image Encoder / Decoder

What is Base64 image encoding?

Base64 image encoding turns an image's raw bytes into a plain-text string, which can then be embedded directly inside HTML, CSS, or JSON instead of linking to a separate image file. A data URI — a Base64 string prefixed with data:image/png;base64, — can be dropped straight into an <img> tag's src attribute or a CSS background-image, which is useful for small icons or images where avoiding an extra network request matters more than file size.

This tool encodes an uploaded image into that Base64 text, and decodes it back the other way — pasting a Base64 string or data URI renders the actual image and lets it be downloaded as a file again.

How to use it

How encoding and decoding work

Encoding reads the uploaded image's exact bytes and maps them to Base64's 64-character alphabet, the same underlying process used for any binary-to-text encoding. "Include data URI prefix" adds the data:<mime-type>;base64, header that makes the string usable directly as an image source; turning it off leaves just the raw Base64 payload, useful when it needs to be combined with a prefix elsewhere. Decoding reverses the process — if the pasted text is missing a data URI prefix, the selected image type is used to reconstruct one so the browser can render a preview.

Features & benefits

Why this runs entirely in your browser

Images uploaded here can be personal photos or unreleased design assets, so nothing is sent to a server. Encoding and decoding both run in JavaScript locally in the tab, using the browser's own file reading and image rendering, which means it keeps working offline once the page has loaded.

A note on Base64 image size

Base64 encoding increases the size of the data by roughly a third compared to the original binary file, since every three raw bytes become four text characters. That trade-off is worth it for small icons embedded inline, but for larger images a normal image file with a proper URL is usually the better choice for page load performance.