Convert an image to Base64
Turn a picture into a data URI you can paste straight into CSS, HTML or JSON.
Drop an image to start
Runs in your browser. Nothing is uploaded.
A data URI is the picture itself, written as text, so a stylesheet or a template can carry it instead of pointing at a file. That removes one request from the page and one file from the deployment, which is why small icons, spacers and email signatures are so often inlined this way.
Four forms come out of the same encode because they are the four places it gets pasted. The data URI on its own goes in a JSON field or an `src` attribute you are writing by hand; the CSS rule and the img tag arrive with their syntax already correct; and the raw Base64, with the `data:` prefix stripped, is what an API that wants a bare string expects.
The cost is size: Base64 spends four characters on every three bytes, so the text is about a third larger than the file it came from, and it is on the critical path of whatever document holds it rather than cached separately. Under a few kilobytes that trade is usually worth making, and above a hundred it usually is not — the panel shows both numbers so the decision is not a guess.
Step by step
- 1Drop in the image.
- 2Pick the form you need: the data URI, a CSS rule, an img tag, or the raw Base64.
- 3Press Copy and paste it where it goes.
Questions
What is a data URI?
A URL that contains the file rather than pointing at one. It starts with `data:`, names the media type, and carries the bytes Base64-encoded, so anything that accepts a URL accepts the picture itself.
Why is the Base64 bigger than my image?
Encoding binary as text costs about 33%, because three bytes become four printable characters. Compression on the wire wins some of it back, but the text is always larger than the file.
When should I not inline an image?
When it is large, when several pages use it, or when it changes often. An inlined picture cannot be cached on its own and is re-downloaded with every copy of the document that carries it.
Is my image uploaded to be encoded?
No. The file is read by the browser and turned into text in this tab. Nothing is sent anywhere, which is also why it works with no connection once the page has loaded.