Skip to content
DevKit Labs

Base64 to Image & Image to Base64 Converter

Convert an image to a Base64 data URI, or decode Base64 back to a downloadable image — in your browser.

Click to choose or drop an imagePNG, JPG, GIF, WebP, SVG — stays in your browser

About Base64 to Image & Image to Base64 Converter

Convert images to Base64 and back. In encode mode, drop or choose an image and get its Base64 data URI plus ready-to-paste snippets: a raw Base64 string, an HTML <img> tag and a CSS background-image rule. In decode mode, paste a data URI or raw Base64 and preview the image, then download it.

Base64-encoding an image lets you embed it directly in HTML, CSS or JSON as a data: URI, avoiding a separate network request — handy for small icons, email templates and inlined assets. The trade-off is roughly a third larger size and no caching, so it's best for small images.

Everything runs in your browser using the FileReader API. Your image is never uploaded — it's read and encoded locally, which keeps private images private. Works with PNG, JPEG, GIF, WebP and SVG.

Image → data URI

Input
icon.png (a small PNG)
Output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

Paste it into src="" or CSS url() to inline the image.

Frequently asked questions

Is my image uploaded to a server?

No. Encoding and decoding happen entirely in your browser with the FileReader API. The image never leaves your device.

When should I inline an image as Base64?

For small, rarely-changing assets like icons or email images, where avoiding an extra HTTP request helps. For larger or cacheable images, a normal file URL is better — Base64 is ~33% larger and can't be cached separately.

What image formats are supported?

Any the browser can read — PNG, JPEG, GIF, WebP and SVG. The output data URI keeps the original format's MIME type.

Can I decode Base64 without the data: prefix?

Yes. Paste raw Base64 and the tool assumes PNG; include a full data:image/…;base64, prefix to preserve the exact type.

Related tools

References