How to Convert an Image to a Base64 String (and Back)

To convert an image to a Base64 string, open image to Base64, choose your image and copy the result. You get a data URL like data:image/png;base64,iVBORw0KGgo..., ready to paste into an HTML <img> tag, a CSS background-image or your code. The same tool decodes Base64 back into a downloadable image. It runs in your browser, so the image is not uploaded.

Below: what the string actually is, how to use it in HTML, CSS and JavaScript, how to decode it, and when embedding images as Base64 is a bad idea.

What is a Base64 image?

Base64 is a way to write binary data, like the bytes of a PNG or JPG, using only 64 safe text characters (A–Z, a–z, 0–9, + and /, with = for padding). That lets an image travel inside places that only accept text: HTML, CSS, JSON, email bodies and config files.

A data URL (or data URI) wraps that text with a header saying what it is:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

• data: marks it as inline data rather than a link.
• image/png is the format (MIME type). JPGs use image/jpeg, WebP uses image/webp, SVG uses image/svg+xml.
• ;base64, says the rest is Base64-encoded.

How to convert an image to Base64 (online)

1. Open image to Base64.
2. Choose an image (PNG, JPG, WebP, GIF, SVG and other formats your browser can read).
3. The data URL appears in the text box, with its size shown.
4. Use the buttons to copy it as a plain data URL, as a CSS rule, or as an <img> tag.

The tool encodes the file exactly as it is; it does not resize or compress it. If the string is too long, shrink the image first with compress image or resize image, then encode the smaller file.

Using a data URI in HTML and CSS

In HTML

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" width="32" height="32">

In CSS

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

In Markdown and email

Some Markdown renderers and email clients display data URLs, but many strip them for security reasons. Gmail and several other webmail services do not reliably show Base64 images embedded in HTML. For email, attached images or hosted images are safer.

Base64 in JavaScript

In the browser, from a file input

const file = input.files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/png;base64,..."
reader.readAsDataURL(file);

From a canvas

const dataUrl = canvas.toDataURL('image/png');

In Node.js

const fs = require('fs');
const b64 = fs.readFileSync('logo.png').toString('base64');
const dataUrl = `data:image/png;base64,${b64}`;

In Python

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

How to decode Base64 to an image

1. Open image to Base64.
2. Paste the Base64 text into the box. A preview appears if it is valid.
3. Press Download image.

Paste the full data URL, including the data:image/...;base64, prefix, whenever you have it. The prefix tells the tool the format. If you paste only the raw Base64 characters, the tool treats them as PNG; a JPG would still preview, but the downloaded file would be named .png. Add the right prefix, for example data:image/jpeg;base64,, to get the correct extension.

In JavaScript, you can turn a data URL back into a file with fetch(dataUrl).then(r => r.blob()). In Python, base64.b64decode(text) gives the raw bytes to write to a file.

Text Base64 vs image Base64

The Base64 encode/decode tool is for text: it encodes and decodes UTF-8 strings such as tokens, headers and config values. Use it when you have text. For pictures, use the image tool, which reads the file's bytes directly and shows a preview.

The size overhead

Base64 makes data about 33% larger, because every 3 bytes become 4 characters. So:

When a page is served with gzip or Brotli compression, part of that overhead is recovered, but a Base64 image is still generally bigger than the original file.

When to use Base64 images (and when not to)

Good uses:

• Tiny icons and placeholders, a few KB at most, where saving a separate request matters.
• Single-file HTML pages, reports and email templates that must be self-contained (keeping the email caveats above in mind).
• Sending images through JSON APIs that only accept text.
• Test fixtures and small images in code.

Poor uses:

• Photos and large images. The 33% overhead adds up, and the image cannot be cached separately from the page or stylesheet.
• Images reused on many pages. A normal image file is downloaded once and cached; a Base64 copy is re-downloaded inside every page that contains it.
• Anything you want indexed by image search. Search engines handle normal image URLs much better.

As a rule, if an image is more than a few kilobytes, link to it as a file instead. For more on keeping sites fast, see our guide to compressing images for a faster website.

Common mistakes

• Missing the prefix in HTML. <img src="iVBORw0..."> will not work; it needs data:image/png;base64, in front.
• Wrong MIME type. Labelling a JPG as image/png usually still displays, but downloads and some tools get confused.
• Line breaks in the string. Some encoders wrap Base64 at 76 characters. Remove the line breaks before using it in a data URL, for example with remove line breaks.
• Encoding a huge image. Compress or resize first.
• Treating Base64 as encryption. It is just an encoding; anyone can decode it. Do not use it to hide sensitive images.

Base64 is a handy way to carry small images as text. Encode the smallest file you can, include the right prefix, and keep big images as normal files.

Questions