Why is only part of the string shown?

The box renders the first 40,000 characters; Copy still puts the whole string on the clipboard.

Image to Base64

No upload · runs in your browser

Direction

Drop an image herePNG, JPG, GIF, WebP, AVIF, BMP, ICO or SVG. It stays on your deviceSelect image No upload · processed locally · auto-deleted

Runs entirely in your browser, nothing is uploaded.

How it works

Image to Base64: Encode a Data URI or Decode One Back

Encode an image as a base64 data URI with copy-ready CSS and img snippets, or paste one back to recover the file. The exact size increase is printed.

What this does

Four copy fields, the raw payload, the full data URI, a quoted CSS url() rule and an img tag
Width and height filled into that img tag from the decoded image, so the layout does not shift on load
Decoding repairs line breaks and missing padding, and swaps the URL-safe - and _ back
Identifies PNG, JPEG, GIF, WebP, AVIF, BMP, ICO, TIFF and SVG from their signature bytes when the header is missing or wrong
The source size, the data URI size and the percentage between them, side by side

FAQ

Base64 stores three bytes as four ASCII characters, so the payload runs about a third larger than the file before you add the data:image/png;base64, header on the front. The page prints the exact increase for your file next to the two sizes. That overhead buys you one fewer HTTP request, which pays off on icons and tiny sprites; past a few kilobytes it stops paying, because an inlined image is re-downloaded with every copy of the page that carries it and can never be cached on its own.

Usually one of three things. A bare payload with no data:image/png;base64, prefix in front of it is only text, so the browser has nothing to decode. Base64 copied out of a terminal or an email arrives line-wrapped. And some tools emit the URL-safe alphabet, with - and _ where + and / belong. The decoder here repairs all three; a browser repairs none of them. In CSS, keep the URI inside quotes in url() so its commas and semicolons are not read as CSS syntax.

Keep going