Encoding 🔒 Runs in your browser — no data sent to servers

Image to Base64 Converter

Turn an image into a Base64 string or a ready-to-paste data URI, without uploading it anywhere.

Input

Output

How to Use

Drop an image onto the upload area, or click it to choose a file up to 10 MB.
The Data URI prefix option is already ticked, so the output starts with data:image/…;base64,.
Untick it if you only need the raw Base64 string.
Copy the result, or check the preview to confirm it is the right image.

Frequently Asked Questions

How do I use the result in HTML?

Use the whole data URI, starting with data:image/, as the src attribute of an img tag. The browser decodes it without a separate request.

How much bigger does the image get?

Base64 turns every 3 bytes into 4 characters, so the text is about 33 percent larger than the image file.

Which image types work?

Any file: PNG, JPEG, GIF, WebP, SVG, ICO and others. The MIME type in the data URI comes from the file itself.

Is the image uploaded?

No. The file is read and encoded locally in your browser.

Convert an Image to Base64 Online

Updated September 29, 2026 · By Saman

Embedding an image as Base64 lets it travel inside text: an HTML email, a CSS file, a JSON payload or a single self-contained HTML page. The browser reads the image straight from the string, so there is no extra file to host and no extra network request.

This page opens the Base64 Encoder & Decoder on its File tab with the data URI prefix switched on. Encoding happens entirely in your browser.

Where to paste the result

Place	Example
HTML image	`<img src="data:image/png;base64,iVBORw0…" alt="Logo">`
CSS background	`background-image: url("data:image/svg+xml;base64,PHN2Zy…");`
JSON field	`{"avatar": "iVBORw0KGgo…"}` (usually without the prefix)
Markdown	`![icon](data:image/png;base64,iVBORw0…)` where the renderer allows it

When inlining is a good idea

Small icons and logos of a few kilobytes, where an extra request costs more than the size increase.
HTML emails, where external images are often blocked by default (support for data URIs varies by email client, so test first).
Self-contained files such as exported reports or offline demos.
APIs that accept images only as Base64 in JSON.

When it is not

Large photos grow by a third and can no longer be cached separately from the page or stylesheet that contains them, so every page view downloads them again. For anything above roughly 10 to 20 KB on a website, a normal image file, ideally converted with PNG to WebP or JPG to WebP, is the faster choice.

SVG: consider not using Base64

SVG is already text. In CSS you can often embed it URL-encoded instead of Base64, which is smaller, for example url("data:image/svg+xml,%3Csvg …%3E"). The URL Encoder handles that encoding.

Going back from Base64 to an image

To recover the picture from a string, paste it into Base64 Decode: images are previewed and can be downloaded with the correct extension.

Guides

Base64 vs Base64URL: What Changes and When to Use Each Base64URL is standard Base64 with two characters replaced, - for + and _ for /, and usually without the = padding. Invalid Base64 String: Why Decoding Fails and How to Fix It A Base64 decoder rejects a string for one of three reasons: a character outside the alphabet, a length that cannot be right, or padding in the wrong place.