Image to Base64 Converter (Data URL)

What is Image → Base64?

Converting an image to Base64 produces a data URL — a self-contained string like data:image/png;base64,iVBOR... that embeds the entire image inline, no separate file or HTTP request needed. It's handy for tiny icons, email templates, offline single-file HTML, and CSS backgrounds. The conversion runs locally using the browser's FileReader API, so your image never leaves your device.

How to convert an image to Base64

1. 1Drag an image onto the drop zone, or click to select a file.
2. 2The tool reads it locally and produces a full data URL with the correct MIME type.
3. 3Copy the data URL, or grab a ready-made CSS/HTML snippet.
4. 4Paste it into a stylesheet (background-image), an <img> src, or a JSON field.

Use Cases

Code Examples

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

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

Key Concepts

Data URL

A URI scheme that embeds file contents inline: data:[mime];base64,[payload]. The browser treats it like any other resource.

MIME type

The media type prefix (image/png, image/svg+xml) tells the browser how to interpret the bytes. It's auto-detected from your file. See the full MIME types reference for every media type.

33% size overhead

Base64 encodes 3 bytes into 4 ASCII characters, so the string is ~33% larger than the original binary.

Tips & Best Practices

• ▸Only inline small images (roughly <10 KB). Larger images are better linked so browsers can cache them.
• ▸SVGs can often be embedded as plain text (utf8) instead of Base64 for a smaller, still-inline result.
• ▸Data URLs can't be cached separately, so every page load re-downloads the inline bytes — a tradeoff vs fewer requests.
• ▸Base64 is encoding, not compression — optimize/compress the image before converting.