Image to Base64
Encode an image as a data URL or raw base64.
This runs in your browser. Nothing is uploaded.
About Image to Base64
Turns an image into a base64 data URL you can paste straight into HTML, CSS or JSON, encoded locally so the file is never transmitted.
A data URL embeds the image bytes directly in your markup, so the browser does not make a separate request for it. For small assets — an icon, a tiny background texture, a logo in an HTML email — that saves a round trip and removes a file you would otherwise have to host.
It stops being a good idea quickly as files grow. Base64 inflates the data by roughly a third, the result cannot be cached separately from the document that contains it, and a large data URL makes your HTML or CSS unpleasant to work with. A rough rule: under about 5 KB is usually worth it, over about 20 KB usually is not.
This matters for privacy too. Most online base64 encoders take your upload, which is a strange thing to accept for a file you are about to embed in a private document. Here the encoding happens in the page you already loaded.
How to use Image to Base64
- 1Drop an image onto the panel or click to browse.
- 2Click Encode to produce the data URL.
- 3Use Copy to clipboard and paste it into your HTML, CSS or JSON.
What it won't do
- Large images produce unwieldy strings and are better served as files.
- Data URLs cannot be cached independently of the document holding them.
Common questions
When should I use a base64 data URL instead of a file?
For very small images where avoiding an extra HTTP request matters more than caching — inline icons, tiny textures, images in HTML email that must survive without external hosting. For anything larger than roughly 20 KB, a normal file reference is better.
Why does the base64 string look bigger than the file?
Because it is. Base64 represents three bytes of binary as four text characters, so the encoded form is about 33 percent larger than the original. That overhead is the price of embedding binary data in a text document.
Can I use this in CSS?
Yes. The output is a complete data URL, so it drops straight into a background-image url() value, an img src attribute, or a JSON string.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation