File to Base64 Converter (with data URI support, both directions)
Convert any file (image, PDF, and more) to a Base64 string or data URI, or decode a Base64 string / data URI back into a downloadable file. Everything runs in your browser — files are never sent to a server.
What Is File-to-Base64 Conversion?
Base64 is an encoding scheme that represents binary data — images, PDFs, and any other file type — using only 64 printable characters: A–Z, a–z, 0–9, +, and /. Developers reach for it whenever they need to embed file content somewhere that can only safely carry text, such as a JSON payload, a CSS stylesheet, or raw HTML. Adding MIME type information in front of the encoded string, as in data:image/png;base64,..., produces a data URI that a browser can interpret directly as an image without fetching a separate file.
This tool handles both directions: converting any file into a Base64 string or data URI, and decoding a Base64 string or data URI back into the original file for download. Every conversion runs as JavaScript inside your browser using the FileReader and Blob APIs, so file content is never transmitted to an external server. That makes it just as useful for quickly inspecting a mysterious Base64 blob found in someone else's source code as it is for handling sensitive files you would rather not upload anywhere.
How to Convert Files to and from Base64
- Choose a conversion direction Pick either "File → Base64" or "Base64 → File" depending on what you want to do.
- Provide the file or the Base64 text In File → Base64 mode, drag and drop or select a file. In Base64 → File mode, paste a Base64 string or a data URI.
- Let the conversion run automatically As soon as you select or paste your input, the conversion happens instantly inside your browser.
- Check the detected MIME type (Base64 → File) If the input is not a full data URI, a MIME type dropdown appears — choose the format that matches the original file.
- Copy the result or download the file Copy the encoded string, or download the reconstructed file, to finish the job.
Tips for getting more out of it
- The File → Base64 mode accepts any file type — images, PDFs, audio, and more — and lets you copy both the data URI form and the plain Base64 string.
- In Base64 → File mode, paste a full data URI starting with
data:and the MIME type is detected automatically. For a plain Base64 string, select the MIME type manually. - Every conversion runs entirely in your browser's JavaScript — the file content or Base64 string is never sent to a server, which makes this safe for sensitive files.
- To embed a small icon directly in CSS or HTML, paste the data URI output straight into
background-image: url(...)or an<img>tag'ssrc. - Base64 encoding makes the output about 33% larger than the original file, so converting very large files (tens of megabytes or more) can make your browser feel sluggish.
Common Use Cases
Embedding a small icon directly in CSS
Convert an icon image into a data URI and drop it straight into a background-image property, avoiding an extra HTTP request for a tiny asset.
Sending a file inside a JSON API payload
Encode an image or attachment as a Base64 string so it can travel as a plain string value in a JSON request or response body.
Inspecting a Base64 blob found in source code
Paste an unfamiliar Base64 string spotted in HTML or CSS source to decode it back into a viewable file and see exactly what it contains.
Embedding an inline image in an HTML email
Base64-encode a logo or icon so it can be embedded directly inside the body of an HTML email without a separate attachment.
Glossary
- Base64
- An encoding scheme that represents binary data using only 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. It is not encryption — merely a way to make arbitrary bytes safe to carry as text.
- Data URI
- A format that embeds a file's Base64-encoded content directly inside a URL. Because it carries MIME type information too, it can be used directly as an image source or a CSS background.
- MIME Type
- An identifier that describes a file's format, written as "type/subtype" (for example,
image/pngorapplication/pdf). Browsers use it to decide how to handle a given file. - Encoding
- The process of converting data from one representation to another. Base64 encoding specifically converts binary data into a printable text string.
- Client-side Processing
- Handling data entirely within the user's browser rather than sending it to a server. Every conversion this tool performs happens client-side, so files never leave your device.
- Payload Size Overhead
- The roughly 33% increase in data size caused by Base64 encoding. It is an unavoidable consequence of repacking 8-bit binary data into 6-bit characters.
FAQ
data:image/png;base64,iVBOR.... Because it also carries the MIME type, you can drop it straight into an <img> tag's src attribute or a CSS background-image to display the image.data:, a MIME type dropdown appears — pick the original file format (image, PDF, text, and so on) manually before downloading.
Side Note — Why Base64 Makes Files 33% Larger
Base64 encoding exists because many transport channels — email, JSON, URLs — can only safely carry printable ASCII text. Sending arbitrary binary data (like an image or an executable) as-is risks corruption from stray control characters, so Base64 was devised to represent any binary payload using just 64 printable characters: A–Z, a–z, 0–9, +, and /.
Base64 slices 3 bytes (24 bits) of binary data into four 6-bit chunks and maps each chunk to one Base64 character. Repacking 8-bit binary into 6-bit characters means the encoded output ends up roughly 4/3 the size of the original — about 33% larger. That size increase is the price paid for text-safe transport.
This same trick is put to good use in data URIs, which embed small images directly in HTML or CSS as data:image/png;base64,.... Doing so avoids an extra HTTP request for tiny assets like icons, which can speed up page loads. But the roughly 33% size overhead and the loss of browser caching make it a poor fit for large image files.