Image to Base64
Encode an image as a base64 data URI in your browser.
How to use
- 1 Drop an image onto the box, or click to choose a file.
- 2 Pick an output style: data URI, raw base64 or CSS background.
- 3 Review the preview and the decoded size.
- 4 Click Copy output and paste the string into your code.
About Image to Base64
The Image to Base64 tool turns a picture into a text string you can paste straight into HTML, CSS or JSON, with no external file to host.
Drop in a PNG, JPG, WebP or GIF and it is encoded into a base64 data URI entirely inside your browser, ready to copy in one click.
Base64 embedding is handy when you want a small icon or graphic to travel with your markup — inline an image in an email template, a single-file HTML page, a CSS background or an API payload, and it loads without a separate network request.
This tool offers three output styles: a full data URI ready for an img src, the raw base64 payload on its own, and a CSS background-image rule you can drop into a stylesheet.
A live preview confirms the encoding decoded back to the right picture, and a size readout shows the decoded byte count alongside the encoded string length, since base64 adds roughly a third in size.
Everything runs locally through the Canvas and FileReader APIs, so your image is never uploaded, stored or logged — safe for private assets — and it works offline once loaded.
FAQ
Is my image uploaded to encode it?
No. Encoding uses the Canvas and FileReader APIs inside your browser, so the file never leaves your device.
Why is the base64 string larger than the file?
Base64 represents binary data in text and adds about 33% overhead. The tool shows both the decoded size and the string length.
When should I embed an image as base64?
For small images you want to ship inline — in single-file pages, email templates, CSS or API payloads — avoiding a separate request.