Base64 Image Converter

Turn an image into a data URI — files never leave your browser.

Pick an image above to convert it to a base64 data URI.
Best for small icons and textures (under ~10 KB). Larger images will bloat your CSS and can't be cached independently.

What is a base64 data URI?

A data URI embeds the image file directly inside your HTML or CSS as base64 text. The browser renders it without a separate HTTP request, which removes one round-trip — useful for tiny icons, placeholder backgrounds and single-file demos.

Everything here happens locally: the file is read with the browser's FileReader API and encoded with JavaScript. Nothing is uploaded to any server, so it is safe to use with confidential images.

Base64 encoding inflates file size by roughly 33%. Inline only small images; load anything bigger over HTTP with normal caching so repeat visits stay fast.

FAQ

How do I use the data URI in CSS?

Paste it as the url value: background-image: url(data:image/png;base64,....). In HTML, use it directly as the src attribute of an img tag.

Why is my converted image larger than the original?

Base64 encodes 3 bytes into 4 characters, so output is about 4/3 of the binary size. That is normal.

What formats are supported?

Whatever your browser can display: PNG, JPEG, GIF, WebP, SVG. The mime type is detected from the file automatically.