Image to Base64
Convert an image to a Base64 Data URI with ready-to-paste HTML, CSS and Markdown — no upload, 100% in your browser.
Drop an image here or click to browse
🔒 Encoded in your browser — your image is never uploaded. Best for small images and icons; large files produce very long strings that can bloat your HTML/CSS.
Encode an image as a Base64 Data URI
Drop in an image and get its Base64 Data URI, plus copy-paste snippets for an HTML <img>, a
CSS background-image, and Markdown. Encoding happens in your browser, so the image is never uploaded.
When to use Data URIs
Inlining a small icon or logo as a Data URI removes an extra network request, which can speed up first paint. It works best for small assets — large images produce very long strings that bloat your HTML or CSS, so keep it to icons and tiny graphics.
A data URI is bigger than the file it replaces
Base64 writes three bytes as four characters, so the text is about 33% larger than the image before you count
the data:image/png;base64, prefix. That is the trade: you save an HTTP request and gain a string
that cannot be cached separately, cannot be lazy-loaded, and has to be re-downloaded in full every time the
document containing it changes. For a 200-byte icon that is a good deal. For a photograph it is a bad one, and
the crossover in practice is somewhere around a couple of kilobytes.
Where it earns its place
Small, unchanging assets that must not fail to load: an inline SVG icon in a CSS background-image,
a logo in an HTML email where remote images are blocked by default, a favicon in a single-file page, a fallback
in a document that has to work from a USB stick with no server. It also sidesteps CORS entirely, because there
is no second request to be refused. Two things to watch: a strict Content-Security-Policy may need
img-src data: before a data URI will render at all, and some older mail clients cap the size of a
single line, so a very long URI can arrive broken.
Frequently asked questions
Is there a size limit?
Images up to 10 MB are accepted; a larger one is refused with its size named. Base64 makes data about 33% larger, so inlining big images is not recommended. It is ideal for small icons.
Which formats work?
Any image your browser can read — PNG, JPG, WebP, GIF and SVG all work. The Data URI keeps the original type.
Is my image uploaded?
No. The file is read and encoded locally in your browser and never leaves your device.
How much larger does the file get?
About a third — four characters for every three bytes — plus the prefix. A 9 KB PNG becomes roughly 12 KB of text.
When should I not use a data URI?
For anything a browser would otherwise cache on its own, or anything above a couple of kilobytes. An embedded image is re-sent with every copy of the page and cannot be cached, lazy-loaded or swapped for a smaller variant.
My data URI shows nothing on the page.
Check the Content-Security-Policy first: a policy without data: in img-src blocks it silently. After that, check the MIME type in the prefix matches the actual image format.