Image to Base64
Convert an image file to a Base64 data URL locally.
Base64 adds textual overhead, so data URLs are generally better for small assets than large images. Everything is processed locally.
How to convert an image to Base64
- Choose an image file.
- Wait for the browser to read the file as a data URL.
- Copy the resulting Base64 string for your HTML, CSS, JSON, or application code.
When Base64 is useful
Data URLs can be convenient for small icons, inline assets, tests, and self-contained examples. They add textual overhead, so large images are usually better served as normal image files rather than embedded Base64 strings.
What the output contains
The result is a complete data URL such as data:image/png;base64,.... The media type identifies the image format and the Base64 payload represents the file bytes as text.
HTML, CSS, JSON, and application use
- In HTML, a data URL can be used as an image source where the surrounding attribute accepts a URL.
- In CSS, it can be used in properties such as
background-imagewhere a URL is accepted. - For JSON or an API payload, remember that the Base64 string is text and can make the payload substantially larger.
- For larger reusable assets, a normal image file is usually easier to cache, replace, and manage.
Browser memory limits
FileReader reads the selected file into browser-managed memory before producing the data URL. Very large files therefore consume substantial memory, and practical limits depend on the browser and device.
Frequently asked questions
- Does this upload the image?
- No. FileReader reads the selected file in the browser and the resulting data URL stays in the page.
- Why is the Base64 output so long?
- Base64 represents binary data as text and adds overhead compared with the original binary file.
- Can I use the result in CSS?
- Yes. The output is a complete data URL that can be used where a CSS image URL is accepted, subject to the surrounding syntax.