Image to Base64
Convert any image to a Base64 data URI instantly. Drag & drop or pick a file — the image is encoded entirely in your browser. Works with PNG, JPG, GIF, SVG, WebP and more.
🖼️ What This Tool Does
Convert any image to a Base64 data URI instantly in your browser. Drag & drop or pick a file, and get ready-to-paste snippets for HTML, CSS, and Markdown. Perfect for embedding small icons, inline SVGs, email templates, or reducing HTTP requests. 100% private — your image never leaves your device.
🔒 Privacy
- ✓ Read via browser FileReader API — no upload, no server
- ✓ Your image never leaves your device
- ✓ Works offline after page first loads
❓ FAQ
What is a Base64-encoded image?
A Base64-encoded image is the binary data of an image file represented as ASCII text. When wrapped in a "data:image/png;base64,..." URI, it can be embedded directly in HTML, CSS, JSON, or SVG — no separate image file needed. It is commonly used for small icons, inline email images, and reducing HTTP requests.
Is my image uploaded anywhere?
No. The conversion happens entirely in your browser using the FileReader API. Your image file is read from local disk into your browser tab's memory, encoded to Base64 there, and displayed. No upload, no server, no tracking. You can disconnect from the internet after the page loads and it still works.
What image formats are supported?
All common formats: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF. Any file type that your browser recognizes as an image is supported. The tool preserves the original format in the data URI.
When should I use Base64 images?
Good for: small icons (<10KB), email templates where external images are blocked, inline SVG sprites, single-file HTML pages, and reducing HTTP requests on performance-critical pages. Bad for: large images (Base64 is ~33% bigger than binary), main content images, and anything that could be cached as a separate file.
Why is the Base64 version bigger?
Base64 encodes 3 bytes of binary data as 4 bytes of text, so the encoded version is roughly 33% larger than the original file. Add headers like "data:image/png;base64," and you get a 34-37% size increase. This is the main tradeoff — you save an HTTP request but pay in bytes.
Can I embed this in CSS?
Yes. The tool generates ready-to-paste snippets for HTML (<img src="...">), CSS (background-image: url(...)), and Markdown (). Just copy and paste into your code.