Image to Base64
Turn an image into a Base64 data URI, with ready-to-paste CSS and HTML, on your device.
How it works
This tool reads your image with your browser's FileReader and encodes it as a Base64 data URI — a long text string that contains the entire image inline, beginning with something like data:image/png;base64,. Because the image becomes text, you can embed it directly in HTML or CSS without a separate file. Everything happens locally in your browser, so the image is never uploaded, and you get three ready-to-paste snippets: the raw data URI, a CSS background-image rule and an HTML <img> tag. A thumbnail preview shows the encoded image, and the filename plus the resulting data URI size in KB are displayed so you can judge how heavy the string got.
How to encode an image
Drag and drop an image onto the drop zone or click it to open your file browser. The tool accepts PNG, JPG, WEBP, GIF and SVG — anything your browser can read. As soon as a file is loaded, the data URI appears automatically in the text area, no button or conversion step needed. From there you can copy the data URI as-is, copy it wrapped in a CSS background-image: url("…") declaration, or copy it wrapped in an HTML <img src="…"> tag. If you want to start over, press the remove button next to the filename to clear the result and pick another file.
A concrete example
Imagine you're building a single-file HTML email that needs a small company logo at the top. Instead of hosting the logo separately and hoping the email client fetches it reliably, you convert it here, copy the HTML snippet and paste the resulting <img> tag straight into your template. The image travels inside the email itself, so there's no broken link when the recipient's mail app blocks remote images. The same approach works for a landing page placeholder: copy the CSS snippet and set it as a background-image, and the design renders without a second network request.
What to expect
The output is always a full data URI, not a bare Base64 string — it keeps the original file's MIME type at the front (for example data:image/webp;base64,…), and the size shown in KB reflects the entire encoded string, which is roughly a third larger than the source file. No image processing happens: the tool does not resize, compress or re-encode your picture, so the format inside the data URI matches whatever you dropped in. The three copy buttons give you the same underlying string in three shapes — raw, CSS and HTML — so you can paste whichever fits your context without hand-editing. Everything is generated instantly on your device, with nothing uploaded to a server.
Common problems and fixes
If the page seems slow after inlining, a very large photo makes a huge data URI — fix this by converting smaller or compressed images instead, since Base64 grows by roughly a third. If the copy buttons don't appear to do anything, your browser may have clipboard permission blocked — try clicking again or use the text area to select and copy manually. If you want a different format than the one you dropped, the tool keeps your original format — convert it to PNG or WEBP separately first. And if nothing happens when you drop a file, the file may not be an image — stick to PNG, JPG, WEBP, GIF or SVG files.
Frequently asked questions
Why is the Base64 bigger than my image?
Base64 encoding adds roughly 33% overhead because it represents binary data using only text characters. That's normal and why inlining suits small images best.
Does it work with SVG and GIF?
Yes. Any image your browser can read — PNG, JPG, WEBP, GIF, SVG — is encoded, keeping its original format inside the data URI.
Is my image uploaded anywhere?
No. Reading and encoding happen entirely in your browser and the image never leaves your device.
Do I get a plain Base64 string or a data URI?
You always get a complete data URI, with the MIME type at the front (like data:image/png;base64,…). That's what you can paste directly into HTML and CSS attributes.
Why is the KB size in the result larger than my file?
The size shown is the length of the encoded text string on screen, which includes the data: prefix and the ~33% Base64 overhead on top of your original file.
How can I tell which copy button to use?
The three buttons wrap the same data URI differently — raw, a CSS background-image declaration, and an HTML <img> tag. Pick the one that matches where the image should appear: CSS for backgrounds, HTML for inline content.