Image to Base64 Converter
Turn a small icon or logo into a data URI you can inline in HTML, CSS or Markdown, or paste Base64 from an API response, email source or stylesheet to see and download the image it contains. The file type is identified from the bytes themselves, not the file name.
or click to browse — PNG, JPEG, GIF, WebP, SVG, ICO, AVIF, BMP…
How to use
- To encode: keep Direction on Image → Base64, then drop an image onto the box or click it to choose one.
- Pick the output you need — data URI, raw Base64, a CSS background-image rule, an HTML <img> tag or Markdown — and click Copy.
- For SVG files, tick “Use URL-encoded SVG” to get a shorter data URI that is not Base64 at all.
- To decode: switch Direction to Base64 → Image and paste raw Base64 or a full data: URI.
- Check the preview, type and dimensions, then click Download to save the image with the right extension.
Examples
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVR4nGP4z8DAwMDAxMDAwMDAAAANHQEDasKb6QAAAABJRU5ErkJggg==
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Ccircle%20cx='4'%20cy='4'%20r='4'/%3E%3C/svg%3E
Supported formats
- Encodes any image file: PNG, JPEG, GIF, WebP, SVG, ICO, AVIF, BMP, TIFF and others your system labels as image/*. The MIME type in the data URI comes from the file's magic bytes, falling back to the type your browser reports.
- Decodes raw Base64 or data: URIs, ignoring spaces and line breaks, accepting the URL-safe alphabet (- and _) and missing = padding. A surrounding url(…) or quotes are stripped too.
- Recognises PNG, JPEG, GIF, WebP, BMP, ICO/CUR, AVIF, HEIC/HEIF, TIFF, JPEG XL and SVG when decoding. Anything else is rejected with a note on what the bytes appear to be.
Privacy
This tool runs entirely in your browser. Nothing you enter or open is sent anywhere. Privacy policy.
Limitations
- Base64 makes data about 33% larger, and an inlined image cannot be cached on its own. Data URIs are worth it for small icons, not for photos — the tool warns above 100 KB.
- Files over 20 MB are refused.
- The preview and dimensions come from your browser, so formats it cannot display (HEIC and TIFF in most browsers, JPEG XL and some AVIF in older ones) are converted but not previewed.
- The URL-encoded SVG option collapses line breaks and encodes spaces as %20 and swaps double quotes for single quotes when the file has no single quotes; the drawing is unchanged but the markup is not byte-for-byte identical.
- This tool does not resize or compress the image — what you drop in is what gets encoded.
FAQ
When should I inline an image as a data URI?
For small, frequently used images such as icons, tiny logos or CSS backgrounds of a few kilobytes, where saving a request matters more than caching. For anything large, a separate file is better: it is not 33% bigger, the browser can cache it and it does not delay the HTML or CSS that contains it.
Why is the URL-encoded SVG data URI smaller than the Base64 one?
SVG is already text, so it only needs a handful of characters such as <, > and # escaped. Base64 always adds a third to the size, while URL-encoding a typical icon adds much less. Both work in CSS and in img tags.
Is it safe to decode Base64 from an untrusted source?
The decoded image is only shown through an <img> element using a local blob: URL, which browsers treat as a plain picture: scripts inside an SVG do not run and it is never inserted into the page as markup. Nothing is sent to a server.
Why does it say the data URI type doesn't match?
The MIME type written in a data URI is just a label. The tool checks the actual bytes, so if a URI says image/png but contains a JPEG, it tells you and downloads the file as .jpg.
How is this different from the Base64 Encoder/Decoder?
The Base64 tool converts text. This one works with image files: it reads the bytes, detects the format, shows a preview and produces ready-to-paste data URI, CSS, HTML and Markdown snippets.