Base64

Base64 converts an image into a data URI you can paste into HTML or CSS, and converts a data URI back into a downloadable image. Both directions work on the bytes in your own tab — encoding is a straight read of the file you drop — and nothing is uploaded either way. On the decode side it reads the real format out of the file's header bytes rather than trusting the mime type the data URI declares, and it accepts a bare base64 payload, a whole img tag or a CSS url() as input.

How it works

  1. Pick a direction Encode turns an image into a data URI. Decode turns one back into an image.
  2. Drop an image, or paste a string On the encode side the file's own bytes are read through unchanged. On the decode side you can paste the data URI, a whole img tag or a CSS url() — the data URI is picked out of whatever you paste, and the url-safe alphabet and missing padding are both accepted.
  3. Shorten the string if you want to Optionally re-encode to WebP, PNG, JPEG or AVIF before the base64 is built. WebP is usually the shortest. The numbers panel shows the source file size, the encoded bytes, the character count and the percentage increase.
  4. Copy or download Copy the raw data URI, a background-image declaration, an img tag with the width and height filled in, or a CSS custom property. A decoded image can be saved as a file instead.

Questions

How much bigger does base64 make a file?
About a third. Base64 stores every three bytes as four characters, so the payload is always roughly 33 per cent larger than the file inside it, and the data: header in front of it adds a few dozen characters more. That is why a very small icon grows by more than a third, and the tool prints the exact increase for your file.
When should I not inline an image as a data URI?
Above roughly 10 KB, and the tool warns you when the string passes that. An inlined image cannot be cached separately from the CSS or HTML holding it, so every page that carries it downloads and parses the whole thing again. Link to the file instead.
Why is the output box showing only part of my string?
Strings longer than 200,000 characters are displayed truncated to their first 1,200, because a textarea holding millions of characters stalls the tab. Only the display is shortened — the copy buttons still copy every character of the data URI.

Every tool