Image to Base64
Turn an image into a data URI you can paste straight into CSS or HTML.
Drop your file here
It is processed on your device — nothing is uploaded.
What a data URI is for
Base64 encoding turns binary image data into plain text, which can then be embedded directly inside an HTML or CSS file rather than referenced as a separate file. The browser reads the image out of the document itself, so no extra network request is made.
That is the entire benefit: one fewer round trip. For a small icon repeated across a site, or an image that must survive being emailed as a single self-contained HTML file, it is genuinely useful.
The 33% you pay for it
Base64 represents three bytes of binary in four characters of text, so an encoded image is about a third larger than the original. Worse, it cannot be cached separately — a data URI is re-downloaded with the document every single time, where a normal image file is fetched once and reused across every page.
This is why embedding a photograph is almost always a mistake. A 400 KB hero image becomes 540 KB of text welded into your HTML, downloaded afresh on every page view. The tool reports the overhead so the decision is made with the number in front of you.
The rule of thumb
Under roughly 5 KB, embedding usually wins: the saved request costs more than the extra bytes. Above about 10 KB it usually loses. Between the two it depends on how often the image appears and whether your pages are cached.
Output formats
Choose a raw Base64 string, a complete data URI, a CSS background-image declaration, or a ready-made <img> tag. The last two save the step of wrapping it yourself.
Where it genuinely shines
Email templates, single-file HTML reports, SVG icons inside stylesheets, and anything that has to work with no external assets at all.
Common questions
What is a data URI?
An image encoded as text and embedded directly in HTML or CSS, so the browser needs no separate request for it.
Why is the encoded version larger?
Base64 uses four text characters per three bytes of binary — about 33% overhead, before you lose separate caching.
When should I use this?
Small icons, email templates and single-file HTML. Rarely for photographs, which get downloaded again on every page view.
Is there a size limit?
10 MB, though anything above about 10 KB is usually the wrong choice for a web page.
Is my image uploaded?
No. Encoding happens in your browser.