How to convert an image to Base64
- Add your images, drag and drop one or several onto the box, click to browse, or paste from your clipboard.
- Check each one, every image gets its own thumbnail, original size and encoded size in the list.
- Pick the output, leave the data URI prefix on for HTML/CSS use, or switch the toggle to raw base64 only for APIs that expect the bare string.
- Copy what you need, click View on any image to open its data URI, ready-made CSS
background-imagesnippet and HTMLimgtag, or hit Copy on a row for the fastest one-click grab.
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 CSS background-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.
The raw base64 only toggle strips off the data:image/png;base64, part and leaves just the encoded characters. Use the full data URI for HTML, CSS or anywhere a browser needs to render the image directly; use raw base64 when a backend, API or database column expects the payload on its own.
Frequently asked questions
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.
Can I encode more than one image at a time?
Yes. Drop or select several images at once, each one is encoded on its own, and you can copy any of them individually.
What's the difference between the data URI and raw base64 output?
The data URI includes the data:mime;base64, prefix so browsers and CSS treat it as a usable image. Raw base64 is just the encoded characters, useful when a backend or API expects the payload without that prefix.