What a data URI is
A data URI is an image written out as text. Base64 encoding takes the raw bytes of the file and represents them using 64 safe characters (letters, digits, plus and slash), then a short header such as data:image/png;base64, tells the browser what to do with it. The result can be pasted anywhere text goes: an HTML src attribute, a CSS background-image, a JSON payload, a config file or an email template.
This tool reads your image in the browser, encodes it, and hands you three things: the raw data URI, a CSS snippet and an HTML snippet, each with its own copy button. Nothing is uploaded; the entire conversion happens on your device.
The size cost of Base64
Base64 is not compression, it is the opposite. Every 3 bytes of image become 4 characters of text, so the encoded version is about a third larger than the file you started with:
When embedding helps
Data URIs shine when the image is small and belongs to the page anyway. Tiny icons, bullet graphics, small logos and one-off decorative touches all load with the page itself, saving a network request each. They are also the only sensible option in single-file situations: an HTML file that must work offline or be sent as one attachment, an email template where linked images get blocked, a code snippet that has to be self-contained, or a quick prototype where you cannot be bothered hosting assets.
The CSS snippet drops straight into a rule as a background image, and the HTML snippet is a complete img tag with the width and height filled in from your actual image, which helps the page reserve space before it renders.
When to leave images as files
Embedding has real costs, and they grow with the image. A normal image file is downloaded once and cached; a data URI is baked into the page, so it is re-downloaded with every page that contains it and it cannot be cached on its own. Big Base64 blobs also bloat your HTML or CSS, slow down editors and make version control diffs unreadable. As a rule of thumb, embed things under a few KB without guilt, think twice between 10 KB and 100 KB, and above that link to a file. If the image is genuinely needed inline but too heavy, compress or resize it first and then convert the smaller version.
Frequently asked questions
What is a Base64 data URI?
It is the entire image written out as text, wrapped in a small header like data:image/png;base64 so browsers know what it is. Because it is plain text, it can be pasted directly into HTML, CSS, JSON or code, and the image displays without needing a separate file or an extra network request.
How much bigger does Base64 make an image?
About a third bigger. Base64 encodes every 3 bytes of the file as 4 text characters, so the text is roughly the original size multiplied by 4 and divided by 3. A 48 KB logo becomes about 64 KB of text.
When should I embed an image instead of linking to it?
Embed tiny images that ship with the page anyway: icons, small logos, decorative bits under a few KB, or anything inside a single-file HTML document that must work offline. It saves a network request and keeps everything in one file.
When is a data URI a bad idea?
For anything big or reused. Embedded images cannot be cached separately, so they are re-downloaded with every page that includes them, and they bloat your HTML or CSS. A large photo as Base64 makes pages slow to load and painful to edit. Link to a normal file instead.
Is my image uploaded anywhere?
No. The file is read and encoded entirely in your browser. It never leaves your device and nothing is stored.