How Does It Work?
- Choose an imageAny raster or vector image your browser can read. The file is opened locally with the FileReader API, so it never leaves your device.
- Pick the output you needA plain data URI, the Base64 payload on its own, or a ready-made HTML tag or CSS declaration you can paste directly.
- Copy itOne button puts the whole string on your clipboard, however long it is.
What Is It Used For?
Base64 turns binary data into plain text using 64 safe characters, which lets an image travel anywhere text can go — inside a stylesheet, an HTML attribute, a JSON payload or an email template. The trade-off is size: every three bytes become four characters, so an encoded image is about 33% larger than the original file, plus a little padding. That makes it worthwhile for small icons and logos, where you save a network request, and a poor idea for photographs, where you add weight to a file that then cannot be cached separately.
- Embedding a small logo or icon directly in CSS to avoid an extra request.
- Putting an image inside an HTML email template that must be self-contained.
- Storing a small picture in a JSON document or a database text column.
- Pasting an image into a code sandbox or a documentation page with no file hosting.
- Passing an image to an API that expects a Base64 string rather than a file upload.
Examples
| Original file | Encoded size | Sensible use? |
|---|---|---|
| 2 KB SVG icon | ~2.7 KB | Yes — saves a request |
| 8 KB PNG logo | ~10.7 KB | Yes for a single small logo |
| 150 KB JPEG | ~200 KB | Rarely — it cannot be cached separately |
| 2 MB photo | ~2.7 MB | No — link to the file instead |