How it works

Turn any image into a Base64 string or data URI, formatted and ready to paste into HTML, CSS, or JSON.

Drop an image and it's encoded to Base64 instantly with the browser's FileReader API. The output format selector gives you four ready-to-paste forms: the full data URI (data:image/png;base64,…), raw Base64 with no prefix (for JSON fields or API payloads), a complete <img> tag, or a CSS background-image rule. JPG, PNG, WebP, GIF, AVIF, and SVG all work — if your browser can display it, it can encode it. One honest caveat: Base64 makes data about 33% larger than the binary file, so inline only small images like icons, logos, and avatars; for photos, keep them as separate files so the browser can cache them. Encoding runs entirely in your tab — no upload, no signup, works offline once the page is loaded.

How to use it

1. Drop your image. Drag a file onto the drop zone, click to browse, or paste from the clipboard.
2. Pick an output format. Data URI, raw Base64, an <img> tag, or a CSS background-image rule.
3. Copy the result. One click puts the encoded string on your clipboard — nothing ever touched a server.

Frequently asked questions

Is my image uploaded to a server?

No. The encoding uses the FileReader API in your own browser. The image bytes never leave your device — you can verify it in DevTools' Network panel.

Which image formats are supported?

Anything your browser can decode: JPG, PNG, WebP, GIF, AVIF, BMP, ICO, and SVG. The MIME type in the output is taken from the file itself.

Why is the Base64 output larger than my file?

Base64 encodes every 3 bytes into 4 characters, so text output is about 33% bigger than the binary original. That's inherent to the format, not this tool.

When should I inline an image as a data URI?

For small assets where saving an HTTP request wins: icons, logos, bullets, avatars. Don't inline large photos — they can't be cached separately, and the +33% size bloats your HTML or CSS.