Image to Base64
Image to Base64 — runs in your browser. Inputs are not stored.
Image → Base64
Enter values, then press Calculate.
Preview
The file is read only in the browser and is not uploaded to a server.
How to use
- In image file, choose a local file. Only
image/*is accepted. - As soon as you choose, FileReader builds a data URL and fills the preview and text field.
- The info line shows the file name and an estimated Base64 size (KB).
- Copy puts the whole data URL on the clipboard. You can paste it into HTML
img src, CSS, or Markdown. - Reset clears the file choice and the string. The chosen file is read only in this tab’s memory.
- Before inlining, check the estimated KB. For a large original, resize first. The chosen file is not uploaded.
Key concepts
Image → Base64 turns a local file into a data URL such as data:image/png;base64,.... Use it to inline small favicons or icons in HTML, or to put a thumbnail in a JSON/Markdown draft. Base64 is about 33% longer than the original, and large photos blow up HTML size and parse cost. Choosing a file converts immediately; there is no separate run button. Preview and string fill together.
Reading uses only FileReader.readAsDataURL and does not call an upload API. If MIME is not image/, a notice appears and the string stays empty. Copy uses the clipboard API; if permission is denied, select the result field yourself. Sensitive screenshots also do not leave this tab. Inline images are baked into the page with no cache/CDN, so repeated large photos are better as file URLs.
Example
Choose a small PNG icon: a preview appears and the text starts with data:image/png;base64,. Copy it into <img src="…"> and the picture shows with no external file. Choose JPEG and the MIME becomes jpeg. The estimated KB on the info line is from string length, so it can differ slightly from disk file size. Choosing the same file again refreshes the content; reset then choose when trying another icon. If estimated KB is large, prefer a static file URL over HTML inline.
Related: Base64 → image · URL encoder · Character counter
Frequently asked questions
How do I convert an image to Base64?
Choose an image file and FileReader immediately builds a data URL. Preview and text fill in; there is no separate convert button.
How do I put image Base64 in HTML?
Paste the copied string into an <code>img</code> <code>src</code> or CSS <code>background-image: url()</code>. You can also use Markdown image syntax.
Do JPG, WebP, and GIF work for image to Base64?
If the browser recognizes the file as <code>image/*</code>, the data URL MIME matches. If it is not an image, only a notice appears.
Do large photos work?
They can be read, but the string is very long and copy/paste and page size suffer. It is suited to icons and small thumbnails.
Is the file uploaded to a server?
No. The chosen file is read only in this page’s browser memory and is not transmitted or uploaded.
What if copy fails?
Allow clipboard permission or select the result field and copy yourself. A success message appears on the info line.
Last reviewed: 2026-09-04