Image to Base64 converter
Convert an image to a Base64 data URI for HTML or CSS, or decode a data URI back into an image file, free and in your browser with no upload. The size increase is shown before you copy.
Data URIs embed an image directly in HTML or CSS. Useful for small icons; wasteful for photographs.
In detail
The Base64 converter turns an image into a data URI you can paste into HTML or CSS, and turns a data URI back into a downloadable image. 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 from the file's header bytes rather than trusting the type the data URI declares, and it accepts a bare Base64 string, a whole img tag or a CSS url().
Base64 makes a file about a third larger and cannot be cached on its own, so it pays off only for small icons; the tool warns past about 10 KB.
Image to Base64 converter at a glance
- Input
- Any image file, or a pasted data URI, img tag or CSS url()
- Output
- A data URI, a CSS declaration, an img tag or a CSS custom property; or a decoded image file
- What it does
- Image to a Base64 data URI
- Base64 back to an image file
- An optional re-encode to shorten the string
- Copy as CSS, an img tag or a custom property
- The real format detected from the bytes
- Who it is for
- Web developers and email designers embedding small images inline.
- Limits
- The output is about 33% larger than the file.
- Strings over 200,000 characters are shown shortened, though copying still takes all of it.
- Privacy
- Runs entirely in your browser: the file is never uploaded, and nothing is kept after you close the tab.
How to convert an image to Base64
- Pick a direction Encode turns an image into a data URI. Decode turns one back into an image.
- 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.
- Shorten the string if you want to Optionally re-encode to WebP, PNG or JPEG 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.
- 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.
Image to Base64 converter: common 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 percent 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.