Image to Base64 Converter (Data URI)
Turn an image into Base64 text you can paste straight into HTML, CSS or JSON, as a data URI, an <img> tag or a CSS background.
Results
Size of the Base64 text
32.0 kB
Characters
32,790
Bigger than the file by
33.3
%
It was
24.0 kB
What this tool does
A data URI puts the image itself inside the code, so a small icon or logo needs no separate file and no extra request. The price is size: Base64 writes every 3 bytes as 4 characters, so the text is about a third bigger than the file, and it cannot be cached separately by the browser. That makes it a good fit for small icons, email templates and single-file pages, and a poor one for photos. Nothing leaves your computer: the browser reads the file and writes the text on this page.
Formula
Base64 characters = 4 × ⌈bytes ÷ 3⌉ ; data URI = data:type;base64, + characters
Variables
| Symbol | Meaning | Unit |
|---|---|---|
snippet | Copy it as | — |
bytes_in | Original size, in bytes | — |
mime | File type | — |
OUT | Size of the Base64 text | — |
CH | Characters | — |
OV | Bigger than the file by | % |
BF | It was | — |
Worked example
- Copy it asuri
- Original size, in bytes24,576
- File typeimage/png
- Size of the Base64 text32.0 kB
- Characters32,790
- Bigger than the file by33.3 %
- It was24.0 kB
Limitations
- The calculation runs entirely in your browser. The values you type are never sent to a server.