Image to Base64
Convert images to Base64
Convert images to Base64 Runs locally in your browser
About the
The Image to Base64 converter turns any image file into a Base64 data URI you can paste straight into HTML, CSS or JSON. The file is read with the browser's own file reader and encoded locally, so it is never uploaded, which makes it safe for logos and assets you would rather not send to a third party. The character count is shown alongside the result because Base64 inflates size by about a third, and that matters when the string ends up inline in a page.
Where people use the
- Inlining a small logo so an email template renders without external assets.
- Embedding an icon in a single-file HTML document.
- Putting an image into a JSON payload that only accepts text.
- Avoiding a mixed-content warning on a page served over HTTPS.
How to use the
- 1
Choose an image
Use the upload control to pick any image file. Common formats such as PNG, JPEG, GIF and SVG are all accepted.
- 2
Wait for the encoding
The data URI appears in a text area once the file has been read. Larger files take a moment longer.
- 3
Copy the string
Use the copy button to take the whole data URI, including the data: prefix and the media type.
- 4
Paste it where you need it
Use it as the src of an image tag, inside a CSS url() value, or as a field in a JSON payload.
Tips and best practices
- Keep inlined images small; the string is about a third larger than the file.
- Copy the whole data URI including the data: prefix, or the browser will not render it.
- For photographs, host the file and link to it instead of inlining it.
Frequently asked questions
Is the image uploaded anywhere?
No. The file is read and encoded in your browser, so it never leaves your device. That is the main reason to use this rather than an online converter that takes an upload.
Why is the string so much longer than the file?
Base64 represents three bytes with four characters, so the result is about a third larger than the original file before any other overhead.
Should I inline images in a page?
Only small ones. Inlining saves a request but blocks the file from being cached separately and makes the HTML bigger, so it suits icons and tiny logos, not photographs.
Can I go the other way?
Not here. This tool encodes an image file to text. Decoding needs a Base64 decoder plus the original media type.
Is there a file size limit?
There is no server limit, because nothing is uploaded. Very large images will still take time to encode and produce an unwieldy string.