Image to Base64
Drop an image, get the data URI plus copy-ready <code><img></code> and CSS snippets. Encoded in your browser; the file stays on your device.
Base64
What this tool does
It reads your image file and produces a data URI — the file's bytes as Base64 text with the right MIME type — plus two snippets you can paste as-is: an <img> tag with width and height, and a CSS background-image rule. The encoding happens in your browser with the Web APIs; nothing is sent anywhere.
When Base64 is the right tool
- Icons and tiny graphics in CSS or HTML — saves a network request, renders with the first paint, no 404 when the path moves.
- E-mail signatures and templates — many clients block remote images but show inline data URIs (Outlook desktop is the notable exception).
- Single-file HTML documents, offline docs, or anywhere assets can't be shipped alongside.
- SVG in CSS — a Base64 (or URL-encoded) SVG data URI is the standard way to use an SVG as a background.
When it isn't
Photos and anything over a few tens of KB: the 33% size overhead, the loss of browser caching (the image is re-downloaded with every page that embeds it) and the parse cost of a huge CSS file outweigh the saved request. Use a normal file and the compressor. And never paste a data URI of a user-supplied SVG into a page you control without sanitising it — SVG can contain scripts.
Formats
PNG, JPEG, WebP, GIF, SVG and AVIF are encoded byte-for-byte with their own MIME type. HEIC and BMP are not displayable in web pages, so they are decoded (HEIC via libheif, on your device) and re-encoded as PNG first. The snippet's width and height come from the decoded image.
Frequently asked questions
Is my image uploaded?
No. The page is static and has no upload endpoint; your browser does the work on your own device and the result is saved straight back to your disk. The site's Content-Security-Policy only allows it to talk to its own origin, so it cannot send your file anywhere even by accident. Load the page, disconnect from the internet, and it still works.
What is a Base64 data URI?
A way of writing the bytes of a file as text — data:image/png;base64,iVBORw0… — so an image can live inside an HTML or CSS file instead of being a separate request. Every browser supports it.
When should I inline an image?
Small things: icons, logos, tiny backgrounds, e-mail signature images, or a placeholder. Under a few KB it saves a request and renders instantly. Above about 20–50 KB it is usually slower than a separate, cacheable file and bloats your HTML/CSS, so the tool warns you.
Why is the Base64 bigger than the file?
Base64 encodes 3 bytes as 4 characters, so text is 33% larger than the binary (gzip on the server claws some of that back). It is a format for convenience, not compression.
Is the original file encoded, or a re-encoded copy?
For PNG, JPEG, WebP, GIF, SVG and AVIF the original bytes are encoded unchanged. HEIC and BMP are not usable in web pages, so those are decoded and re-encoded as PNG first.
Is it free? Any limits or watermark?
Free, no account, no watermark, no daily quota. Because nothing runs on our servers there is nothing to meter. The only limits are your device's memory — anything up to roughly 50 megapixels is fine on a modern phone or laptop.