Image to Base64 Converter

You have a small icon or loading spinner and want to embed it directly into your CSS or HTML without an extra HTTP request. Drop the image here and get a data:image/…;base64,… URI you can paste straight into src=, background-image:, or a JSON payload — no server, no upload, no tracking.

What Is a Base64 Data URI?

A Base64 data URI encodes binary file data as ASCII text so it can be embedded directly inside HTML, CSS, JavaScript, or JSON. The format is:

data:<mime-type>;base64,<base64-encoded-data>

For example, a tiny 1×1 transparent PNG becomes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

When to Use Base64 Images

Small icons and UI assets: Images under ~4 KB have a net benefit when inlined — you save an HTTP round-trip (typically 50–200 ms on mobile) at the cost of a ~33% size increase from the encoding. For logos, spinners, and decorative SVGs this trade-off is usually worthwhile.

Critical above-the-fold images: Inlining the hero background or LCP image in a <style> block eliminates render-blocking image requests on first paint.

Email HTML: Most email clients block external images by default. Embedding small images as data URIs ensures they display without requiring the recipient to “load images.”

Offline and self-contained HTML: If you’re generating a single-file HTML report, dashboard, or documentation page, data URIs let you bundle all assets into one file.

JSON API payloads and config files: Some APIs and configuration formats accept image data as a string field rather than a separate binary upload.

What Formats Are Supported?

This tool accepts any image format the browser’s FileReader API can read: PNG, JPEG, GIF, WebP, AVIF, SVG, BMP, and ICO. The MIME type is taken directly from the file so the data URI prefix will be accurate.

Base64 Encoding in Code

JavaScript

// In Node.js
const fs = require('fs');
const data = fs.readFileSync('image.png');
const dataUri = `data:image/png;base64,${data.toString('base64')}`;

// In the browser (FileReader)
const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result); // data URI
reader.readAsDataURL(file);

Python

import base64, mimetypes

with open('image.png', 'rb') as f:
    data = base64.b64encode(f.read()).decode()
mime = mimetypes.guess_type('image.png')[0]
data_uri = f'data:{mime};base64,{data}'

CSS Usage

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…');
}

Frequently Asked Questions

How large can the image be? There is no hard limit in this tool — processing happens in your browser. However, very large images (> 2 MB) will produce very long Base64 strings (> 2.7 MB of text) that may cause performance issues if embedded in HTML or CSS. For large images, use a regular URL instead.

Does encoding affect image quality? No. Base64 is a lossless text encoding of the original binary data. The decoded image is bit-for-bit identical to the original.

Why is the Base64 output larger than the original file? Base64 represents every 3 bytes of binary data as 4 ASCII characters, adding approximately 33% overhead. A 10 KB PNG becomes roughly 13.3 KB of Base64 text.

Is my image sent to a server? No. The FileReader API reads the file locally in your browser and performs the Base64 encoding using JavaScript. No data leaves your device.