Image to Base64 Converter

You get a complete data URI: data:, the file's type, ;base64, and then the encoded bytes. Here is a real 1 × 1 red PNG (69 bytes) as the tool outputs it:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC

That string is 114 characters long. A JPG starts with data:image/jpeg;base64, and a WebP with data:image/webp;base64,.

The tool reads your file's bytes and encodes them directly. Nothing is redrawn or re-compressed, so the image decodes back to exactly the same file, metadata and all.

Base64 turns every 3 bytes into 4 characters, so the data is about a third larger than the original, plus the short prefix:

The label above the output counts these characters and shows them as KB, which is why it reads higher than your file size.

• CSS: background-image: url(data:image/png;base64,...) with the full string in place of the dots.
• HTML: paste the whole string as the image element's src attribute.
• JSON and APIs: many APIs want the raw Base64 only. Delete everything up to and including the first comma before you send it.

Embedded images can't be cached on their own: the bytes are downloaded again with every copy of the page or stylesheet that contains them. That's a fair trade for a small icon used once, and a poor one for a large photo.

Because the original bytes are kept, so is everything stored in the file. A phone photo encoded here still carries its EXIF data, which can include GPS position, inside the Base64. Anyone who decodes the string can read it. If that matters, run the photo through JPG to PNG or the Image Compressor first, since both write a fresh file from pixels only, and encode the result. The encoding happens in your browser; the image isn't uploaded.