Image to Base64 Converter
Encode an image file as a Base64 string or a ready-to-use data URI.
Processed on your device — never uploaded
What Is This Tool?
This tool reads an image with the browser’s FileReader and returns its Base64 representation. Base64 lets you embed an image directly inside HTML, CSS or JSON as text, avoiding a separate network request. You can copy the raw Base64, a full data: URI, or a CSS background-image rule.
How It Works
Drop an image onto the box or click to select one.
Choose whether to wrap the output as a data: URI or a CSS rule.
The encoded string appears in the text area with its length.
Click Copy to put it on your clipboard.
Everything runs locally in your browser — the image you choose is decoded onto an HTML canvas on your own device and is never uploaded to a server.
Features
- Raw Base64, data: URI, or CSS background-image output
- Shows the encoded length and approximate overhead
- Works with any image format the browser can read
- One-click copy
- Entirely client-side
Common Use Cases
- Inlining a small icon into a single-file HTML page
- Embedding an image in a CSS file to cut a request
- Putting an image into a JSON payload or config file
- Pasting an image into a system that only accepts text
Frequently Asked Questions
When should I inline an image as Base64?
Base64 is best for small images (a few kilobytes) that you want to ship in one file. It adds roughly 33% size overhead and cannot be cached separately, so it is a poor choice for large or frequently reused images.
What is the difference between Base64 and a data URI?
The Base64 string is just the encoded bytes. A data URI wraps it with a prefix like data:image/png;base64, so a browser knows how to interpret it in an src or url() value.
Why is the Base64 larger than my file?
Base64 represents every 3 bytes as 4 text characters, so the encoded form is about one third larger than the original binary.
Does encoding change the image?
No. Base64 is a reversible text encoding of the exact file bytes — decoding it gives back an identical image.
Is my image uploaded?
No. FileReader reads the file locally and the encoding happens in your browser.