Convert an image into a Base64 data URI, ready to paste into HTML, CSS, or an API — free, instant, processed entirely in your browser.
JPG, PNG, WebP, GIF, SVG, and more
This page is built specifically for images. For text or any other file type, use the Base64 Encoder & Decoder. To go the other direction — paste Base64 and get an image back — use Base64 to Image Converter.
This tool reads an image file and encodes it as Base64 text using your browser's built-in FileReader API — the same encoding browsers already use for embedded images. You get four ready-to-use outputs: the raw Base64 string, the full data URI, an HTML <img> tag, and a CSS background-image snippet, each with its own copy button.
This is aimed squarely at developers and website owners embedding small images directly into code — icons, logos, email-safe inline images, or single-file HTML tools where avoiding an extra network request matters more than file size. Everything happens locally in your browser; the image is never sent to a server.
| Output | Looks like | Use it for |
|---|---|---|
| Raw Base64 | iVBORw0KGgo... | APIs and code that expect plain Base64 with no prefix |
| Data URI | data:image/png;base64,iVBOR... | Anywhere a URL is expected — src attributes, fetch calls, JSON |
| HTML <img> tag | <img src="data:image/png;base64,..."> | Pasting straight into an HTML page |
| CSS background-image | background-image:url(data:image/png;base64,...); | Pasting straight into a CSS rule |
What's the difference between the Data URI and the raw Base64 string?
The Data URI (starting with data:image/png;base64,...) is ready to paste directly into an HTML src or CSS url() — the browser reads the prefix to know the image type. The raw Base64 string is just the encoded data with no prefix, useful for APIs or code that expects plain Base64.
Why is the Base64 output so much longer than my original file?
Base64 encoding represents binary data using only text-safe characters, which costs about 33% extra size. A 100KB image becomes roughly 133KB of Base64 text — expected overhead, not a bug.
Is my image uploaded to a server?
No. The conversion happens entirely in your browser using the built-in FileReader API — the image data never leaves your device.
When should I actually embed an image as Base64 instead of linking to a file?
Base64 embedding is useful for small icons, inline email images, or single-file HTML tools where an extra network request is worse than a bigger file. For anything larger than a few KB, a normal linked image file with browser caching is usually faster overall.
Does this work for converting a file to Base64, not just images?
This page is built specifically for images, with a live preview and dimensions. For any other file type — PDFs, fonts, documents — use our general-purpose Base64 Encoder & Decoder instead.
What image formats can I convert?
Any image format your browser can open — JPG, PNG, WebP, GIF, SVG, and more. The tool reads whatever file you upload as-is; it doesn't convert between image formats.
Is there a file size limit?
No hard limit is enforced, but very large images produce very large Base64 strings that can be slow to copy or paste. For typical icons, logos, and photos under a few MB it's instant.