▤
Image → Base64 / Data URI
Read a local image into Base64 and Data URI with raw / data URI / CSS / HTML output. The real format comes from the file header rather than the extension, and anything over 5 MB is refused.
Runs in browserImageInline
Loading tool…
How to use
- No canvas.toDataURL(). That path re-encodes the image — JPEG loses quality to a second pass and PNG may be converted to another format, so what you get is no longer the file you picked. This encodes the bytes as they are.
- The MIME comes from the file header, not the extension. A .png file that is really a JPEG would be refused by the browser if labelled from its name, and the error only says the image is broken.
- Base64 inflation is a fixed 4/3: 3 bytes become 4 characters, so a 1 MB image becomes roughly 1.33 MB of text. Anything over 5 MB is refused — embedding it visibly slows first paint.
- SVGs get their own note: inside <img src> the browser does not run embedded scripts, but the same string pasted into innerHTML or inlined into the page will.
- The file never leaves the browser. Reading, encoding and output all happen locally.