Image to Base64
Convert any image to a Base64 data URI. Drag & drop or click to upload — nothing leaves your browser.
What Is a Data URI?
A data URI embeds file content directly into a URL using Base64 encoding. The format is data:[mime];base64,[encoded]. Browsers can display images without a separate HTTP request. Learn more about Base64: Base64 Encoding: A Complete Developer Guide.
When to Use It
- Inline images — embed in HTML/CSS for zero extra requests
- Email templates — avoid broken images from blocked URLs
- API payloads — send images as JSON strings. Format JSON with the JSON Formatter.
- Offline apps — store images as text in localStorage
Caveats
- Base64 is ~33% larger than the original binary
- Not cached separately — each page load re-parses the string
- Best for small assets (icons, tiny images) under ~10 KB
- Large data URIs can delay initial paint
Frequently Asked Questions
Is my image sent to a server?
No — the conversion happens entirely in your browser using the FileReader API. The image data never leaves your device.
How do I use the output in CSS?
Set background-image: url('data:image/png;base64,…') or use it as an <img src="data:…"> attribute directly in HTML.
Why is the output so long?
Base64 represents binary bytes as ASCII characters. Every 3 bytes become 4 characters, so a 100 KB PNG becomes ~133 KB of text.
Can I convert SVG files?
Yes. SVG files are uploaded and encoded just like raster images, producing a data:image/svg+xml;base64,… URI. For SVGs you can also use URL-encoding instead of Base64 for slightly smaller output.