Bild in Base64 umwandeln
Image to Base64 turns a picture into a block of text you can paste straight into your code. That text is a data URI, valid in CSS, HTML, JSON and Markdown, and it carries the whole image — so the page needs no separate file and makes no extra request for it. The text runs about 33% larger than the file, which the page shows you, because that cost is the whole reason to think before inlining.
Die Oberfläche dieses Tools ist auf Englisch.
Drop an image here
or drop anywhere on this page · Choose a file · 100 MB
Drop a PNG, JPG, SVG or icon to get a data URI and ready-made snippets.
Die folgende Anleitung ist nur auf Englisch verfügbar.
How does Image to Base64 work?
A data URI is a file inlined into the place that references it. Instead of src="logo.png" pointing at something the browser must fetch, the bytes of the image are written into the attribute itself. No request, no second file, nothing that can 404.
Why base64 rather than the raw bytes
Because the places these strings go — a CSS file, an HTML attribute, a JSON value — are text, and a PNG is not. Its bytes include quotes, newlines, null bytes and everything else that would terminate a string or corrupt a document. Base64, defined in RFC 4648, maps every three bytes onto four characters drawn from a 64-symbol alphabet that is safe everywhere, padding with = when the input does not divide evenly.
Four characters for every three bytes is where the 33% comes from. It is not overhead that a better encoder could remove; it is arithmetic.
When inlining is worth it
For small assets used immediately: an icon in a CSS rule, a 1 × 1 spacer, a logo in an HTML email where external images are blocked by default, a placeholder that must render before anything else loads. In all of these the request you save costs more than the 33% you spend — a request has DNS, connection setup and round-trip latency attached, and on a mobile connection that is tens of milliseconds for a file that would have transferred in one packet.
When it is a mistake
For anything large or reused. A data URI cannot be cached independently: inline a 200 KB hero image in your stylesheet and every visitor downloads it again with every change to any rule in that file. It cannot be fetched in parallel either — it is part of the document, so it is downloaded before the document finishes, blocking the render it was supposed to speed up. And it cannot be lazy-loaded, resized by a CDN, or served as WebP to browsers that support it.
The rough line is a couple of kilobytes. Under that, inlining usually wins; over about 10 KB it usually loses, and this page says so when you cross it.
Content Security Policy
A strict CSP blocks data URIs unless you allow them. Images need img-src 'self' data:; a font inlined the same way needs font-src to allow data: too. This is worth knowing before you inline something and find it missing only in production, where the CSP is enforced.
Base64 is not encryption
It is worth saying plainly, because the confusion is common: base64 is an encoding, reversible by anyone, with no key involved. Anything inlined this way is as readable as it was before. It hides nothing.
Where this runs
In your browser. The file is read with a FileReader and encoded locally — nothing is uploaded, which for an image you are about to embed in your own source code is the only sensible arrangement.
Input
icon.png — 1.2 KB image/png
Output
data:image/png;base64,iVBORw0KGgo… 1.6 KB (+33%) no HTTP request
What options and edge cases does Image to Base64 support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Data URI | data:… | default | The bare URI. Paste anywhere a URL is expected. |
| CSS | background-image | — | A rule ready to drop into a stylesheet. |
| HTML | <img> | — | An img element with the alt attribute left for you to fill in. |
| JSON | string | — | Properly quoted, for an API payload or a fixture file. |
| Markdown | ![]() | — | Image syntax, for a README that must be self-contained. |
| Base64 only | no prefix | — | The encoded bytes alone, for a field that adds its own MIME type. |
| Size cost | +33% | — | Four output characters per three input bytes. Arithmetic, not overhead. |
| CSP | img-src data: | — | A strict policy blocks data URIs until this is allowed. |
Frequently asked questions
Why is the base64 bigger than the image?
Because base64 represents three bytes with four characters, which is a 33% increase by construction. The alphabet has 64 symbols, so each character carries six bits; three bytes are twenty-four bits, which is exactly four characters. No encoder can do better while staying inside a text-safe alphabet. If size matters, compress the image before encoding it — that is where the savings are.
Should I inline images as data URIs?
Small ones, yes: icons, spacers, a logo in an HTML email, anything under a couple of kilobytes that is needed immediately. The saved request usually costs more than the 33% you spend. Large ones, no: a data URI cannot be cached separately, cannot be downloaded in parallel, and blocks the document or stylesheet it sits in — so a 200 KB inlined hero image is re-downloaded on every change to the file containing it, and delays the render it was meant to accelerate.
Does base64 encryption protect the image?
Base64 is not encryption. It is a reversible text encoding with no key, designed to move binary data through channels that only accept text. Anyone can decode it in a browser console in one line. It offers no confidentiality whatsoever, and treating it as though it did is a recurring source of real security incidents.
Why is my data URI blocked by Content Security Policy?
Because a strict CSP treats data: as a source that must be allowed explicitly. For images you need img-src to include data:; for an inlined font, font-src needs it too. The failure is easy to miss in development, where CSP is often not enforced, and appears only in production — so check the policy before committing to inlining.
Can I decode a data URI back to a file?
Yes. Everything after the comma is base64; decode it and you have the original bytes, byte for byte — the encoding is lossless in both directions. The Base64 Encode / Decode tool on this site handles the text side of that, and any browser will render a data URI pasted straight into the address bar.
Is the image uploaded to encode it?
No. The file is read by your browser's FileReader and encoded in this tab; nothing is transmitted. That matters here in a small way that is easy to overlook — the images people base64-encode are usually assets from a project they are working on, and there is no reason for those to travel anywhere.