How to convert an image to Base64
- Add an image — drag and drop it onto the box, click to browse, or paste from your clipboard.
- Preview & check the size — you instantly see a thumbnail, the original file size and the Base64 size.
- Copy what you need — grab the full
data:URI, or the ready-made CSSbackground-imagesnippet, with one click.
What is a Base64 data URI?
A data URI is a way of embedding a file directly inside your code instead of linking to a separate file. The image bytes are encoded as Base64 text and prefixed with the format, like data:image/png;base64,iVBORw0KG…. Browsers treat that string exactly like a normal image URL, so you can drop it into an <img src>, a CSSbackground-image, an email template, or a JSON payload.
Inlining small images this way removes an extra network request, which can speed up page loads for things like icons, logos, sprites and tiny placeholders. The trade-off is size: Base64 is about 33% larger than the raw file, so it is best for small assets rather than large photos.
Is it private?
Yes. This tool reads your image with the browser's built-in FileReader.readAsDataURL and does all the encoding on your own device. Your image is never uploaded to any server, never stored, and never logged — which makes it safe to use with private screenshots, internal mockups or confidential assets.
Frequently asked questions
Is my image uploaded anywhere?
No — it is encoded locally in your browser and never leaves your device.
Why is the Base64 string larger than my file?
Base64 turns every 3 bytes into 4 characters, so the result is roughly a third bigger than the original. That overhead is expected.
Which formats can I use?
Any image the browser can open — PNG, JPG, WebP, GIF, BMP, SVG and ICO — keeping the original format and quality.
Should I inline large photos?
Usually no. Data URIs are ideal for small icons and logos; for large photos a normal image file (and caching) is more efficient.