File to Base64 Converter

Convert any file to a Base64 string, with optional data: prefix.

Your data is never sent to any server.

Text → Base64 Base64 → Text File → Base64 Base64 → File

The file to Base64 tool turns any file into a Base64 text string, on its own or as a data URI with the data: prefix ready to embed in HTML or CSS. The file is read in your browser and is not uploaded anywhere.

With or without the prefix

Format	Looks like	Used in
Data URI	`data:image/png;base64,iVBORw0…`	An image `src`, `url()` in CSS
Base64 only	`iVBORw0…`	API JSON fields, emails, databases

The only difference is the header: the prefix states the file type so the browser knows how to display it. If the type is not recognised, the prefix starts switched off.

An example in CSS

A small embedded icon saves a request to the server:

.notice::before {
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0…") no-repeat;
}

For SVGs it is often better to skip Base64 and write the markup straight into the data URI, URL-encoded, because it is smaller. Base64 pays off mostly with PNGs, fonts and other binary formats.

How to use File to Base64

1
Choose the file
Drag it onto the drop zone or click to browse. Any format works: images, PDFs, fonts, audio or whatever you need.
2
Decide whether you want the data: prefix
Turn it on if you will paste the result into HTML or CSS, because it tells the browser what kind of file it is. Leave it off if the destination expects only the string, such as a JSON field in an API.
3
Copy the string
Press the copy button. For large files the string is very long, so copying beats selecting it by hand.

Frequently asked questions

What is a data URI?

A file written inside an address. It looks like data:type;base64,data, for example data:image/png;base64,iVBORw0KGgo… and it can go anywhere the URL of an image or a font would.

How much bigger does the file get in Base64?

A third. Base64 turns every 3 bytes into 4 characters, so a 30 KB image becomes about 40 KB of text.

Should I embed my website's images in Base64?

Only very small ones, such as icons of a kilobyte or two. An embedded image cannot be cached on its own and makes the HTML or CSS that contains it heavier, so for photos a normal file is better.

Is my file uploaded to any server?

No. Your browser reads the file and encodes it on your device; nothing leaves it. That is why you can use it with private documents.