Base64 File Encoder
Encode any file to Base64 or a data URI directly in your browser. Your file is never uploaded.
Pure browser JavaScript — uses the FileReader API.
How to use this tool
- Choose any file.
- Pick plain Base64 or Data URI format.
- Copy the output or download it as a .txt file.
Encode any file to Base64 or a data URI directly in your browser. Your file is never uploaded.
How it works
Base64 encoding converts binary data into a string of printable ASCII characters. This is necessary whenever binary content must be embedded in a text-based format such as JSON, XML, HTML, or email. The tool encodes any file you choose into either a plain Base64 string or a data URI (e.g. data:image/png;base64,...) ready to embed directly in HTML or CSS.
Common uses include embedding images in HTML email without external hosting, inlining small icons in CSS (background-image: url('data:...')), storing binary blobs in JSON API payloads, or copying a file's contents into a form field.
Your file is read locally by the browser using the FileReader API. Nothing is uploaded to any server, making this safe for private documents, certificates, or keys.
Note that Base64 increases data size by approximately 33 percent. For large files this can be significant; consider whether a direct file reference would be more efficient than inlining the encoded content.
Worked example
Embed a company logo in an HTML email
- Select your logo PNG file using the file picker.
- Choose 'Data URI' as the output format.
- Click Encode.
- Copy the resulting data URI string.
- Paste it as the src attribute of an img tag in your HTML email template.
A self-contained HTML email that displays the logo without referencing an external URL, ensuring it renders even in email clients that block remote images.
Common mistakes to avoid
- Using a data URI for large files inside HTML -- browsers must parse the entire encoded string, which slows page rendering. Keep inlined images small (under ~10 KB ideally).
- Copying only part of the Base64 string -- the encoded output can be very long. Use the Copy button rather than selecting manually to avoid truncation.
- Forgetting to include the data URI prefix when embedding in HTML -- plain Base64 without 'data:image/png;base64,' will not work as a src attribute.
Key terms
- Base64
- An encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). Padding is added with '=' characters.
- Data URI
- A URL prefixed with 'data:' that embeds file content inline rather than pointing to an external resource. Format: data:[mediatype];base64,[encoded data].
- MIME type
- A label identifying the type of content, such as image/png or application/pdf. Included in data URIs so the browser knows how to interpret the data.
Frequently asked questions
- What is Base64 used for?
- Embedding binary files (images, PDFs) in JSON, HTML, CSS, or email without needing a separate file reference.