Embed images directly in your code
Sometimes you need an image as text: inlining a logo in an HTML email, embedding an icon in CSS, stuffing a small graphic into a JSON payload, or avoiding an extra HTTP request. This tool converts any image into a Base64 data URI and hands you ready-to-paste snippets for HTML and CSS.
The encoding runs locally — useful since images headed for Base64 are often logos and assets from projects you may not want on a third-party server.
How to convert an image to Base64
- Drop an image into the box above.
- The data URI appears instantly with its encoded size.
- Copy the raw Base64, the data URI, or a complete HTML/CSS snippet.
Frequently asked questions
Is my image uploaded to a server?
No. The file is read with your browser's FileReader API and encoded locally. Nothing is transmitted.
What is a Base64 data URI?
It's the image's binary data encoded as text and prefixed with its MIME type, like data:image/png;base64,iVBOR… — which lets you embed the image directly in HTML, CSS, or JSON instead of referencing a separate file.
When should I use Base64 images?
For small images (icons, logos under ~10 KB) where saving an HTTP request matters, in emails, or where external files aren't allowed. For larger images a normal file is better — Base64 adds about 33% size overhead and can't be cached separately.
What formats are supported?
Anything your browser can read: JPG, PNG, WebP, GIF, SVG, AVIF, and more. The data URI preserves the original format exactly.