Image to Base64
Turn any image into a Base64 data URL, CSS background rule or HTML img tag. Runs entirely in your browser — no upload.
How to use it
- Drop an image on the box or click to pick one.
- Choose the output you want — raw Base64, a data URL, CSS, or a ready-made img tag.
- Best for icons and tiny graphics; Base64 adds about a third to the file size.
Converts an image into a Base64-encoded text string, output as raw Base64, a full data URL, a CSS background-image rule, or a ready-to-paste HTML img tag — the format needed to embed an image directly inside code rather than referencing it as a separate file.
The four output formats
| Format | Looks like | Use it for |
|---|---|---|
| Raw Base64 | iVBORw0KGgoAAAANSUhEUgAA... | Passing image data as a plain string in code |
| Data URL | data:image/png;base64,iVBOR... | Anywhere a URL is expected but a real one isn't wanted |
| CSS rule | background-image: url(data:image/png;base64,...) | Embedding a small icon directly in a stylesheet |
| HTML img tag | <img src="data:image/png;base64,..."> | Dropping straight into markup, ready to render |
Why this is only worth it for small images
Base64 encoding inflates file size by roughly a third over the original binary, because it's re-representing binary data as printable text characters. That overhead is worth paying for genuinely tiny assets — small icons, a logo, a favicon — where avoiding a separate HTTP request matters more than the extra bytes. For anything larger, a normal image file that the browser can cache independently is almost always the better choice, since embedded Base64 images can't be cached separately from the page or stylesheet they're embedded in.
Questions people ask
Is my image uploaded anywhere?
No. The file is read by your browser with the FileReader API and never touches a network. You can disconnect and this page still works.
When is Base64 worth it?
For images under roughly 5 KB that would otherwise cost a separate HTTP request. Anything larger is better served as a normal file that the browser can cache on its own.
Last updated 17 August 2026