How to Convert an Image to Base64 and Back: 4 Ways

When you actually need this

Encoding an image to Base64 makes sense when the picture has to live inside text rather than as a separate file. Typical cases: an icon baked into CSS to avoid an extra request; a logo in an HTML email that shows even when external images are blocked; a small avatar passed through an API in JSON. In all of these you need a string, not a file.

The principle is the same in every method: image bytes go in, and out comes text made of 64 characters that's about a third longer than the original. Only the tool changes — sometimes a button in the browser, sometimes three lines of code. So decide first where you need the string — on a page, in a script or in an API — and the method picks itself.

If you simply want to shrink or convert a photo for a website, Base64 is not your tool. We dig into where embedded images help and where they hurt in "Base64 images on the web."

Way 1: an online converter (the simplest)

If you do not need code, this is the best path. Upload a PNG, get a ready data URI string, copy it. It works in any browser, including on a phone, and requires no installation.

Way 2: JavaScript right in the browser

If you write code, the browser has a built-in helper called FileReader that does this for you — the snippet below is for developers; if that's not you, the online converter above is all you need. When a user uploads a picture and you want to encode it on the fly, its readAsDataURL method returns a ready data URI string immediately, no extra tools required.

const input = document.querySelector('input[type=file]');
input.addEventListener('change', () => {
  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result);
    // → "data:image/png;base64,iVBORw0KGgo..."
  };
  reader.readAsDataURL(input.files[0]);
});

Developers also have two tiny built-in commands — btoa() and atob() — for quick text conversions, but for actual image files FileReader is the easier route: it builds the data:…;base64, prefix for you.

Way 3: Python and the command line

If the image needs to be handled on a server or in a script, the simplest choice is Python's standard base64 module. Open the file in binary mode (rb), encode it, and optionally add the data URI prefix:

import base64

with open("logo.png", "rb") as f:
    data = base64.b64encode(f.read()).decode()

uri = "data:image/png;base64," + data
print(uri)

Terminal fans can use the base64 utility straight from the Linux and macOS command line: base64 logo.png > logo.txt encodes the file, and the -d flag (base64 -d logo.txt > logo.png) decodes it back. Fast, and not a single line of code.

A common task of its own is passing an image through JSON via an API. Plain JSON can't store binary data, but it stores strings beautifully. So the image is encoded to Base64 and placed as an ordinary text field:

{
  "user": "anna",
  "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."
}

On the server side, that string is decoded back into a file with the same base64.b64decode. This is exactly how avatars and small attachments often travel between the front end and the back end.

Way 4: pasting into CSS and HTML

Once you have the string, you just need to use it correctly. In HTML it goes straight into the src attribute; in CSS, inside url():

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

/* CSS */
.icon {
  background: url("data:image/svg+xml;base64,PHN2Zy...") no-repeat;
}

Note the type: SVG uses image/svg+xml, JPG uses image/jpeg. Specify the wrong type and the browser may refuse to render the image. Here's a cheat sheet of the most common types:

For more on using it in styles and emails, see "Base64 in CSS and email."

How to decode it back

The reverse direction is getting a normal file out of the string. The simplest path is again online: paste the string (with or without the data: prefix) into the Base64 → PNG converter and download the image.

In Python it is symmetric: base64.b64decode(string) returns bytes that you write to a file in wb mode. The one thing to watch — first strip the data:image/png;base64, prefix if it is present: the decoder only wants the data itself.

Common mistakes

• Forgetting to strip the prefix. The decoder wants clean Base64, but you handed it the whole data:image/png;base64,… — and got a broken file. Remove everything up to the comma.
• Wrong type label. The little image/png tag (its MIME type) must match the real format — write it for JPG data and the browser refuses to draw the image.
• Line breaks. Some tools insert newlines every 76 characters. For a data URI, better remove them — otherwise the string may fail in HTML.
• Huge files. You encoded a 5 MB photo and the page bloated. For large images you do not need Base64.

Want your file back right now? Use the Base64 → PNG converter, and the full list of conversions is always on the all formats page.