Convert files to Base64 and Base64 back to files
Base64 File Converter
Convert files to Base64 and Base64 back to files
A Base64-encoded file isn't a file anymore — it's a very long string
This trips people up the first time. When you Base64-encode a file for a data URI, you're not sending a file. The browser receives a plain text string, decodes it back to bytes in memory, and works from there. No disk read happens on the receiving end. No HTTP cache entry gets created. No separate network request. You traded one set of problems for a different set, and whether that trade was worth it depends entirely on what you're building.
The anatomy of a data URI
data:mime-type;base64,xxxxxxxxxxxxxxxxxxxxxx==
The
base64flag is required for binary files. Plain-text MIME types liketext/plaincan skip it and use percent-encoding, but Base64 is more compact the moment you have any non-ASCII bytes in the file.
MIME types people actually need when embedding files
- PNG image —
image/png - JPEG image —
image/jpeg - GIF image —
image/gif - SVG vector —
image/svg+xml - PDF document —
application/pdf - MP3 audio —
audio/mpeg - MP4 video —
video/mp4 - ZIP archive —
application/zip
The real size limit nobody tells you about
Modern browsers — Chrome, Firefox, Safari — don't cap data URI length. IE8 capped it at 32 KB, but that ship has sailed. The ceiling you actually hit is RAM. A 10 MB video file encodes to about 13.3 MB of Base64 text. The browser then needs another copy of that data while decoding it. You've blown through 26+ MB before the video player renders a single frame. I've seen this kill mobile browsers on mid-range phones for files most people would consider "not that big." Don't embed media files. Seriously.
Three lines of JavaScript to read any file upload as Base64
The FileReader API does all the work. Call reader.readAsDataURL(file), wait for the onload event, and reader.result is your complete data:mime;base64,... string. If you're sending it to a backend API that wants only the raw Base64 without the prefix, split it: reader.result.split(",")[1]. The browser handles the encoding. You just wait for the event and grab the result.