Image to Base64 Converter

Choose an image to get its Base64 data URI, ready to paste into CSS or an <img> tag. The file is read with your browser's FileReader and never leaves your device — nothing is uploaded.

Choose an image file to encode it to Base64.

What a Base64 data URI is

A data URI embeds a file's bytes directly inside a URL using Base64, so an image can live in your HTML or CSS instead of being a separate request. The format is data:<mime>;base64,<data>.

image bytes → Base64 encode → data:image/png;base64,…

This tool reads the file you pick with the browser's FileReader API, which returns exactly that data URI. Because the read happens locally, your image is never uploaded to any server.

Worked example

A small PNG icon becomes a single inline string:

Pick a 1 KB PNG.
Encode: you get data:image/png;base64,iVBORw0KG….
Use: drop it into background:url(…) or an <img src> — no separate file needed.

When to use it (and when not to)

Inlining images saves an HTTP request and is handy for tiny icons, email templates and self-contained snippets. The trade-off is that Base64 is about 33% larger than the binary, and inlined images can't be cached separately — so for large or repeated images, a normal file is usually better. A good rule of thumb is to inline only small images (a few KB).

Tip: need plain text instead of an image? Use the Base64 encoder / decoder.

Frequently asked questions

Which image formats work?

Any format your browser can read — PNG, JPG/JPEG, GIF, SVG, WebP and more. The data URI keeps the original format's MIME type, so it renders exactly as the source file.

Is my image uploaded?

No. The file is read locally with the browser's FileReader API and converted on your device. Nothing is sent to a server, so it's safe for private or unreleased images.

Why is the Base64 bigger than the file?

Base64 represents three bytes with four characters, so the text is about 33% larger than the original binary. That's the cost of making the bytes text-safe to inline.

Should I inline large images?

Generally no. Inlining is best for small icons and one-off snippets. Large or reused images are better as normal files so the browser can cache them separately.

MB
Mustafa Bilgic · Editor, Calcool
Reads files locally with the browser FileReader API and emits a standard data URI. Everything runs in your browser — nothing you enter is uploaded, logged or stored.

Related calculators

🔐 Base64 Encoder / Decoder🎨 Color Picker🌈 CSS Gradient Generator🌈 HEX to RGB Converter