Free Image to Base64 Converter
Turn an image into a data URI you can paste straight into CSS or HTML.
A data URI embeds an image directly in your markup or stylesheet instead of loading it from a separate file. That removes one network request, which is worth doing for small icons and inline SVGs. Drop an image here to get the raw Base64 string, a ready-made img tag and a CSS background rule — all produced in your browser.
Click to select or drag & drop an image here
PNG, JPG, WebP, GIF or SVG · best under 10 KBHow it works
Select an image
Small files work best — icons, logos, sprites.
Pick an output form
Data URI, img tag, CSS rule or the raw string.
Copy and paste
Nothing is uploaded; encoding happens locally.
What a data URI costs you
Base64 represents three bytes of binary as four ASCII characters, so the encoded form is about 33% larger than the file it came from. A 3 KB icon becomes roughly 4 KB of text. That is the price of avoiding a separate HTTP request.
For small assets the trade is usually worth it: one fewer round trip often saves more time than the extra bytes cost, particularly on high-latency mobile connections. The rough threshold most teams settle on is a few kilobytes — under about 5 KB, inline; above that, a normal file reference.
Beyond that size the maths turns against you quickly. A 100 KB photo becomes 133 KB of text embedded in your HTML or CSS, which means it can no longer be cached separately, cannot be loaded in parallel with other resources, and is re-downloaded in full every time the containing file changes. Worse, it blocks rendering: a large data URI in your stylesheet delays every style on the page until it has downloaded.
Where inlining genuinely helps
The clearest case is a small image needed before first paint — a logo in the header, an icon in a critical UI element. Inlining it removes a request from the critical path, so it appears with the rest of the page rather than a moment later.
It also helps for single-file deliverables. An HTML email, a self-contained report, a document that must survive being emailed around — none of those can rely on external image files. Embedding is the only way the picture travels with the page.
Two things worth knowing. SVGs do not need Base64 at all: because they are text, you can inline the markup directly in your HTML, which is smaller than encoding it and lets CSS style the shapes. And a data URI is not a security boundary — it is trivially decoded, so it hides nothing. If you are embedding an image to obscure its source, it does not work.