Image to Base64 Converter

Turn any image into a Base64 data URI — with HTML and CSS snippets ready to paste — or decode a Base64 string back into a viewable, downloadable image. Everything runs locally in your browser.

image-to-base64 · runs locally
Drop an image here, click to browse, or paste from the clipboard. PNG, JPEG, WebP, GIF or SVG.

What a Base64 image is and when to use one

A Base64 image is the file’s binary data rewritten as printable ASCII text, usually wrapped in a data URI like data:image/png;base64,iVBORw0…. Because it is plain text, the image can live directly inside an HTML attribute, a CSS rule or a JSON payload — no separate file, no extra HTTP request. That makes Base64 ideal for small icons, email signatures and single-file HTML documents, and a poor fit for photos: the encoding adds roughly 33% to the size and the result can’t be cached independently of the page. For the mechanics of the encoding itself, see our guide What is Base64?.

How to convert an image to Base64

  1. Choose Image → Base64 and drop, browse or paste an image.
  2. The tool reads the original bytes — no re-encoding — and shows the data URI, the raw Base64, and ready-to-paste HTML and CSS snippets.
  3. Copy whichever form you need; the size strip shows exactly how much the encoding added.

The reverse direction works too: paste a data URI or a bare Base64 string into Base64 → Image and the tool detects the format (PNG, JPEG, GIF or WebP) from the data itself, renders a preview and lets you download the file.

Keep inlined images small

Every kilobyte you inline is re-downloaded with the page that contains it, so the tool warns when output passes 100 KB. If your image is that large, shrink it first with the Image Compressor or convert it to a more efficient format with the Image Converter — then inline the smaller result, or simply serve it as a normal cached file.

Frequently asked questions

Is my image uploaded to a server?

No. The file is read with the browser's own FileReader API and encoded entirely on your device — nothing is transmitted, stored or logged. You can load this page, disconnect from the internet, and the converter still works.

When should I inline images as Base64?

Only for small assets — icons, logos, tiny repeating patterns — where saving an HTTP request outweighs the size cost. Inlined images can't be cached separately from the page and grow the HTML or CSS on every load, so keep them under a few kilobytes; photos should stay as normal files.

Why is the Base64 output about 33% bigger than my image?

Base64 represents every 3 bytes of binary data as 4 ASCII characters, so any file grows by roughly a third when encoded. That's the price of making binary safe to embed in text formats like HTML, CSS and JSON — the tool shows the exact overhead for your file.

Does converting to Base64 change or compress the image?

No. This tool encodes the original file bytes exactly as they are — no canvas redraw, no re-compression, no quality loss. Decoding the Base64 gives back a file identical to the one you picked, byte for byte.