Image to Base64
Choose an image with the file picker. Encoding runs locally with FileReader; you get a preview, raw Base64, a full data URI, plus MIME type and file name. Copy Base64 or Copy data URI as needed.
Updated 2026-08-04 · developer
About this tool
Only files with an image MIME type are accepted. readAsDataURL builds the data URI; the raw Base64 is the part after the comma. Status text reports file size in KB or explains why a non-image was rejected.
How to use
- Choose an image file: Use the Image file control and pick a PNG, JPG, GIF, WebP, or similar image.
- Wait for local encoding: The browser reads the file and shows a preview with Base64 and data URI fields.
- Copy Base64 or data URI: Click Copy Base64 for the raw string, or Copy data URI for the full data URL.
- Check MIME and name: Confirm the MIME code and file name shown under the textareas before you embed the result.
Common use cases
- Inline a small icon into CSS or HTML without hosting a separate asset.
- Paste a data URI into a prototype or email template that blocks external images.
- Check the MIME string and Base64 length before embedding in JSON.
Tips
- Prefer small images; huge files make long strings that are hard to paste.
- Use Copy data URI when you need the data:image/...;base64, prefix included.
FAQ
Are images uploaded to a server?
No. FileReader encodes the selected file in your browser only.
What if I pick a non-image file?
The tool clears output and asks you to select an image file such as PNG or JPG.
What is the difference between Base64 and data URI?
Base64 (raw) is only the encoded bytes; the data URI includes the data:image/...;base64, prefix.
Why did encoding fail?
If the file cannot be read, the status shows Failed to read the file—try another image.