Image to Base64 encoder

How it works

The file is read with the FileReader API as a data URL, which is the raw bytes of the image encoded in Base64 behind a prefix such as data:image/png;base64,. A progress bar shows the read while it happens, so a larger file does not look like a stalled page. Only files whose type starts with image are accepted, and anything over 5 MB is refused with a message that states the limit. The result is written into a read-only text box you can copy straight into an HTML file or a stylesheet.

Worked example

A 1 KB PNG of 1,024 bytes becomes a data URI of about 1,372 characters, because Base64 turns every three bytes into four characters and adds a short prefix. Choosing a text file such as notes.txt does not produce an encoding at all: the tool says the file is not an image and stops before reading it, and a file over 5 MB is refused with the limit in the message.

Questions and answers