OmniCalcsImage to Base64
Turn any image into a Base64 data URL for embedding directly in HTML, CSS or JSON.
How to Use This Encoder
- Upload an image and optionally convert it to a specific format and quality.
- Copy the resulting data URL or download it as a text file.
- Embed it with
<img src="data:image/png;base64,...">or in CSS as a background.
Frequently Asked Questions
What is a data URL?
A data URL embeds file content directly in a string, prefixed with its MIME type — for example data:image/png;base64,iVBOR.... Browsers can use it anywhere a normal image URL works.
Does Base64 make files bigger?
Yes — Base64 adds roughly 33% overhead. Use it for small icons and thumbnails, not large photos.
Is my image uploaded to a server?
No. Encoding happens entirely in your browser with the FileReader API.
When is this useful?
For single-file HTML pages, email signatures, small app icons, or when you want to avoid an extra HTTP request for a tiny asset.
Practical Example
A 24 KB PNG icon becomes a data URL that starts with data:image/png;base64, followed by about 32 KB of Base64 text — roughly one-third larger than the original. Paste that string into <img src="data:image/png;base64,..."> to embed the icon directly in a single-file HTML page with no extra HTTP request.
- Use it for small icons and thumbnails, not large photos.
- It works in CSS too, as an inline
background-image. - Email clients that block external images still render inline data URLs.
What Your Results Mean
- Encoded size — the length of the data URL in KB, roughly 33% larger than the original file because Base64 uses 4 characters for every 3 bytes.
- MIME type — the format prefix (image/png, image/jpeg or image/webp) that tells the browser how to decode the data.