Boneyard Tools

Base64 File Encoder and Data URI Generator

Drop in any file to convert its bytes to standard Base64 and a ready-to-paste data URI. Useful for embedding small images, fonts, or assets straight into HTML, CSS, or JSON without a separate request. The file is read entirely in your browser and never uploaded.

How to encode a file to Base64

  1. Drag a file onto the box, or click browse to pick one.
  2. Copy the raw Base64 string, or the full data: URI, with one click.
  3. Paste it into your HTML, CSS, JSON, or wherever you need an inline asset.

Examples

A small PNG icon

icon.png (a 2 KB image)
data:image/png;base64,iVBORw0KGgo... (about 2.7 KB of text)

Frequently asked questions

Is my file uploaded anywhere?

No. The file is read and encoded entirely in your browser using JavaScript. Nothing is sent to a server, so even private files stay on your device.

How does Base64 encoding work?

Base64 maps every 3 bytes of binary data to 4 printable characters drawn from a 64-character alphabet. A final partial group is padded with '=' so the length is always a multiple of 4. That lets binary data travel safely through text-only channels.

What is a data URI and when should I use it?

A data URI embeds a file's bytes directly in a string like data:image/png;base64,.... You can drop it into an img src, a CSS background, or JSON to avoid a separate network request. It works best for small assets, since Base64 adds about a third to the size.

Why is the Base64 output larger than my file?

Base64 uses 4 characters for every 3 bytes, so encoded output is roughly 33 percent larger than the original. The tool shows the size before and after so you can decide whether inlining is worth it.

Does it work on images, fonts, and binary files?

Yes. It reads the raw bytes of any file type, so images, fonts, PDFs, and arbitrary binaries all encode correctly. The data URI uses the file's own MIME type when the browser reports one.

Related tools