Online Tool Store
Image to Base64
Turn an image into a Base64 data URI, ready to paste into CSS or HTML, with the size overhead shown up front. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
PNG, JPEG, WebP, GIF, SVG, or AVIF. Nothing is uploaded.
No image yet — choose one and its Base64 text appears here.
How it works
- Choose an image. It is read locally and never uploaded.
- Check the size figures — the overhead is shown before you commit to inlining anything.
- Pick the output you need: a raw data URI, Base64 on its own, or a ready-made CSS rule or HTML tag.
- Copy it, or download it as a text file if it is long.
Why encoding always costs exactly a third
Base64 exists to move binary data through channels that only handle text. It takes three bytes — 24 bits — and rewrites them as four characters of six bits each, drawn from a safe 64-character alphabet:
characters = 4 × ⌈bytes ÷ 3⌉ → ratio 4/3 = 1.333…
So the increase is not an implementation detail you can tune away — it is arithmetic. A 1KB image becomes 1368
characters, and adding the 22-character data:image/png;base64, prefix brings the total overhead to
about 36%. The = signs you sometimes see on the end are padding, there because the last group had only
one or two bytes to encode.
The real trade-off: requests against caching
Inlining removes one network request, which used to be the whole argument. It is a weaker argument now that HTTP/2 and HTTP/3 multiplex requests cheaply, and it comes with a cost that grows over time: an inlined image is part of the HTML or CSS that contains it, so it cannot be cached separately, cannot be served in a modern format to browsers that support one, and is re-downloaded in full whenever that file changes.
The practical rule: inline small, stable things — icons, a 1×1 spacer, an SVG glyph — and link to everything else. This tool warns you above about 100KB for exactly that reason, rather than letting you paste half a megabyte of text into a stylesheet and find out later.
FAQ
Is my image uploaded anywhere?
No. The encoding happens in your browser, which matters here because inlining an image usually means it is part of a private prototype, an internal email template, or a client design.
Why is the Base64 version bigger than the file?
Because Base64 spends four characters on every three bytes, to stay inside a safe set of text characters. That is a fixed one-third increase, plus a few characters for the data URI prefix — so a 1KB image becomes about 1.36KB of text.
When is inlining an image actually a good idea?
For small, unchanging assets — icons, a tiny logo, a background texture — where saving a separate network request is worth more than the extra bytes. It also solves the awkward cases: a single self-contained HTML file, an email template, or an SVG icon you want in a stylesheet.
When should I avoid it?
For photographs, anything above roughly 100KB, and anything that changes independently of the page. An inlined image cannot be cached on its own, so every visitor re-downloads it inside your HTML or CSS on every change, and one big data URI can delay the whole stylesheet from parsing.
What is the difference between the output formats?
The data URI is the complete string, prefix included, and is what you want in nearly every case. "Base64 only" strips the prefix for APIs or config files that add their own. The CSS and HTML options wrap the same data URI in a ready-made rule or tag.
Can I go the other way, from Base64 back to an image?
Not with this tool — it only encodes. Decoding a data URI is a different job; pasting one into a browser address bar will display it, which is often enough for a quick check.
How we compare
| Feature | Online Tool Store | Upload-based Base64 sites | Command line (base64) |
|---|---|---|---|
| Your image never leaves your device | ✓ | ✗ | ✓ |
| Shows the size overhead before you use it | ✓ | Rarely | ✗ |
| Ready-made CSS and HTML snippets | ✓ | ✓ | Assemble it yourself |
| Correct MIME type without guessing | ✓ | ✓ | You supply the prefix |
| Decodes Base64 back to an image | ✗ | ✓ | ✓ |
| Batch a whole folder of icons | ✗ | Some do | ✓ |
Reach for this when you need one small asset inlined — an icon in a stylesheet, a logo in an email template, an image in a single self-contained HTML file — and you would rather not send it to a stranger's server to get a string back. It tells you the overhead and warns when an image is too big to be a sensible candidate. For scripting a whole folder, the command line wins.