Drag an image or click to select
PNG, JPEG, GIF, WebP, SVG, BMP
How it works
It converts an image into a Base64 string in the form of a Data URI (data:image/…;base64,…), which you can embed directly in HTML or CSS without a separate file or an additional HTTP request.
The result takes up about 33% more than the original file, which is why it is best reserved for small images: icons, logos, patterns, or placeholders.
In decoding mode it accepts a Base64 string or a full Data URI, detects the image type from its first bytes, and shows a downloadable preview.
Examples
logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…The data:image/png;base64, prefix indicates the type. Every encoded PNG starts with iVBORw0KGgo, which corresponds to its file signature.background-image: url("data:image/png;base64,iVBORw0KGgo…");The Data URI can be used as-is inside a CSS rule to embed the image without an external file.Use cases
- Embed small icons or logos in CSS/HTML via data URIs, avoiding extra requests.
- Store an image inside a JSON, a configuration file, or a database.
- Send images through APIs or emails (MIME) that only accept text.
- Recover and preview an image from a Base64 string or a Data URI.
Frequently asked questions
Should I convert all images to Base64?
No. It increases the size by about 33% and the browser cannot cache the image separately. It is ideal for small images, but for large ones a separate file is almost always better.
Which image formats does it support?
Any of them when encoding (PNG, JPEG, GIF, WebP, BMP, SVG). When decoding, it automatically detects the type from the file's first bytes.
Why is my Data URI so long?
Because Base64 represents every 3 bytes with 4 characters, so the text grows by about 33% compared to the original binary. This is normal, especially with images.
Is my image uploaded to a server?
No. The image is read and encoded entirely in your browser; it never leaves your computer.