Home › Tools › Image to Base64
Image to Base64
Drop in a small image and get a data: URI — a text encoding of the file you can inline in HTML, CSS or JSON so the image travels with the document instead of as a separate request.
100% private — everything runs in your browser, nothing is ever uploaded.
How to use it
- Drop an image onto the area, or click it to pick a file.
- Copy the data URI, or switch to the plain base64 without the prefix.
- Check the size table before you ship — base64 adds about a third to the file size.
Why it stays private
The file is read with the browser's own FileReader and encoded in memory. Icons and inline graphics often belong inside a stylesheet or a component file that has not been published yet — those bytes never leave your machine.
Questions
When is inlining an image a good idea?
For small, stable assets: UI icons, logos, placeholder graphics. Inlining removes a network request and works offline. For anything above a few kilobytes, a separate cached file is usually better.
Why is the base64 version bigger than the file?
Base64 encodes every 3 bytes as 4 characters, so the text is about 33% larger than the binary. The table shows both sizes so you can decide with numbers.
Does it work for SVG?
Yes — and SVG often gains the most from inlining, since the markup is text and stays tiny. Prefer the URL-encoded form for CSS if you want an even smaller string.