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.
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.