Image to Base64 Converter

How to Convert an Image to Base64

1. Add your images. Drop one or more images on the page, click to browse, or paste a screenshot with Ctrl+V.
2. Pick an output. Choose a data URI, plain Base64, an HTML img tag, a CSS background, Markdown or JSON.
3. Copy or download. Copy the result with one click, download it as a .txt file, or download every image as a .zip.

What Is a Base64 Data URI?

Base64 (RFC 4648) writes binary data, such as an image file, using only 64 safe text characters: A–Z, a–z, 0–9, + and /. A data URI (RFC 2397) puts that text straight into a page or stylesheet, so the browser can show the image without fetching a separate file.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAw…

• data: marks the start of an inline resource.
• image/png is the MIME type, which tells the browser how to read the bytes.
• ;base64, says the rest is Base64, followed by the encoded file itself.

Convert an Image to Base64 in Code

Need it in a build step or script instead? These snippets give the same result as this tool.

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

import { readFileSync } from 'node:fs';
const base64 = readFileSync('logo.png').toString('base64');
const dataUri = `data:image/png;base64,${base64}`;

import base64
with open("logo.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("ascii")
data_uri = f"data:image/png;base64,{encoded}"

# macOS
base64 -i logo.png | tr -d '\n'
# Linux
base64 -w 0 logo.png

Frequently Asked Questions

Are my images uploaded to a server?

No. The converter reads the file with your browser’s FileReader API and encodes it on your device. Nothing is sent anywhere, so it is safe for private screenshots and unreleased designs, and it works offline once the page has loaded.

Why is the Base64 bigger than my image?

Base64 stores every 3 bytes of the file as 4 text characters, so the result is about 33% larger, plus the short data:image/…;base64, prefix. Gzip or Brotli on your server wins back only a little of that, because image data is already compressed.

What is the difference between Base64 and a data URI?

Base64 is just the encoded text. A data URI adds a prefix that tells the browser what the data is, such as data:image/png;base64, followed by the Base64. Use the data URI in src attributes and CSS url(), and plain Base64 when an API or JSON field asks for it.

What is the largest image I can convert?

Up to 25 MB per file and 20 files at a time. Very long outputs only show their first 5,000 characters in the box so the page stays fast, but Copy and Download always give you the full string.

Should I use Base64 for SVG?

Often a URL-encoded SVG data URI is smaller, because SVG is already text. When you add an SVG, an extra "SVG (URL-encoded)" tab shows that version and its size, so you can pick the smaller one for CSS.

Which image formats are supported?

PNG, JPEG, GIF, WebP, SVG, AVIF, BMP and ICO, with a preview. HEIC and TIFF files also convert, but most browsers cannot preview them. The type is detected from the file’s contents, so a wrongly named file still gets the right data URI prefix.

How do I turn the Base64 back into an image?

Use the Base64 to Image converter. Click "Check it in Base64 to Image" under any result to open it there with the string already filled in.

Sources & Standards

The encoding follows the standards below. Last reviewed October 10, 2026.

• RFC 4648: The Base16, Base32, and Base64 Data Encodings
• RFC 2397: The "data" URL scheme
• MDN: data: URLs
• MDN: FileReader.readAsDataURL()

Have a Base64 string already? Base64 to Image previews and downloads it. For plain text, use the Base64 Encoder.