Image to Base64 Converter — Encode Images Free Online

What is base64 image encoding?

Base64 is an encoding scheme that converts binary data into a string of ASCII characters. Because images are binary files, base64 lets you represent an entire image as a text string that can be embedded anywhere plain text is accepted — an HTML attribute, a JSON value, a CSS property, or a REST API request body.

The encoding works by taking every 3 bytes of binary data and mapping them to 4 printable characters chosen from a 64-character alphabet (A–Z, a–z, 0–9, +, /). This results in a string that is about 33% larger than the original file but completely portable across systems that may not handle raw binary safely.

How to convert an image to base64

1. Drop your image onto the upload zone above, or click to browse. JPG, PNG, WEBP, GIF, SVG, AVIF, and BMP are all supported.
2. Choose the output format — Data URL includes the full prefix (data:image/png;base64,…) for direct use in HTML or CSS. Base64 only strips the prefix for APIs that handle the MIME type separately.
3. Copy the string — click the Copy button next to each file, or click the textarea to select all and copy manually.

Encoding happens instantly in your browser using the FileReader API. There is no server involved and no file upload — your images never leave your device.

Data URL vs raw base64 — which should you use?

A data URL is a complete, self-contained reference: it bundles the MIME type, encoding label, and base64 payload into a single string following the scheme data:[<mediatype>][;base64],<data>. Browsers understand this format natively and can render it directly as an image source. Use the Data URL output when you want to paste into an HTML src attribute, a CSS url() function, or any context where the consumer expects a complete URL.

Raw base64 is just the encoded bytes — the characters after the comma. Use this when an API endpoint, a database column, or a form field already knows the MIME type and expects only the encoded string. For example, many image recognition APIs accept a JSON body with a { "data": "<base64>" } field.

Using a base64 image in HTML

Paste the data URL as the src attribute of an <img> tag:

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

The browser renders it exactly like an external image URL — no HTTP request required. This is particularly useful for HTML emails, where external images are often blocked by default, and for standalone HTML files that must be self-contained.

Using a base64 image in CSS

Embed the data URL inside a url() function in any CSS property that accepts an image reference:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy4u...");
  background-size: contain;
  background-repeat: no-repeat;
}

This approach works for background-image, list-style-image, border-image, and content (in pseudo-elements). It eliminates a separate network request for small icons and ensures the image is always available even if asset hosting changes.

Using base64 images in JavaScript and APIs

In JavaScript, a data URL can be assigned directly to an Image object or used as a Blob URL:

const img = new Image();
img.src = 'data:image/jpeg;base64,/9j/4AAQ...';
document.body.appendChild(img);

For REST APIs that accept a JSON body, use the raw base64 string (without prefix):

fetch('/api/analyze', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ image: '<raw-base64-string>' }),
});

Many AI vision APIs (image recognition, OCR, background removal) accept images this way, avoiding the need to host the image file at a public URL before sending it.

Base64 images in React and Next.js

In React, assign the data URL to a standard img src prop:

// store as a constant
const LOGO_B64 = 'data:image/svg+xml;base64,PHN2Zy4u...';

export function Logo() {
  return <img src={LOGO_B64} alt="Logo" width={32} height={32} />;
}

Note that Next.js's next/image component does not accept data URLs as the src prop — use a plain <img> tag instead for base64 sources. This is fine for small inline assets; for large images use a regular file import or CDN URL so Next.js can optimise delivery.

When base64 makes sense — and when it does not

Base64 size overhead explained

Every 3 bytes of the original image file become 4 base64 characters. This means the encoded string is always about 33% larger than the source file. A 30 KB PNG becomes roughly 40 KB as a base64 string; a 500 KB JPEG becomes about 667 KB. For large images this overhead matters — the browser also cannot cache a base64 string independently, so the encoded image is re-sent with every page load rather than served from the browser cache as a separate resource.

For images under 5–10 KB, the 33% overhead is small in absolute terms and the saved HTTP round-trip typically outweighs it. Above that threshold, a file reference is almost always the better choice for production sites.

Privacy

All encoding runs in your browser using the FileReader API. Your image files are read locally and converted to text without a network request. We cannot see your images. No data is stored, logged, or transmitted.

Related tools

After encoding your image, you may want to compress it first to reduce the base64 string length — a smaller source image produces a shorter string. To convert between image formats before encoding, use the PNG to WEBP or JPG to PNG converters. To generate a favicon from a PNG logo, use the PNG to ICO tool.

Frequently asked questions