Image to Base64 and data URI converter (and back)

Base64 writes binary data (such as a PNG file) using 64 text-safe characters: A-Z, a-z, 0-9, “+” and “/”. Every 3 bytes of the file become 4 characters, so the text is about 33% longer than the file: a 30 KB image turns into roughly 40 KB of text (exactly 4 × ⌈n ÷ 3⌉ characters).

A data URI is Base64 with a prefix that states the data type, for example data:image/png;base64,iVBORw0KGgo…. The browser treats it like a file address, so you can put it in an image’s src or in a CSS url().

• Yes: small icons and patterns (up to a few KB), images in email templates, single-file HTML pages without external assets, data in JSON or API payloads, tests and prototypes.
• No: photos and large graphics. Base64 adds 33% to the size, is not cached separately by the browser and blocks CSS and HTML parsing. Serve large images as normal files, ideally WebP.

For SVG, a URL-encoded SVG string is often shorter than Base64 and works just as well in CSS.

Base64 length is 4 × ⌈n ÷ 3⌉ characters, where n is the file size in bytes. A data URI adds its prefix, e.g. data:image/png;base64, is 22 characters.

Above 100 KB the tool shows a warning. The file is encoded byte for byte without re-compression, so the Base64 also contains the photo’s EXIF metadata (including GPS). Before embedding a photo, strip it with the EXIF remover and shrink it with the image compressor.

• Truncated text - Base64 copied from logs or a console is often cut off. Typical symptom: an “invalid Base64” message or an image cut in half.
• Spaces and line breaks - removed automatically, so you can paste text wrapped every 76 characters as in MIME emails.
• URL-safe variant - “-” and “_” are turned back into “+” and “/”, and missing “=” padding is added.
• Code snippets - paste a whole CSS rule with url(…) or an <img src="…"> tag and the tool extracts the data itself.
• Data that is not an image - the type is detected from the file signature (JPG, PNG, GIF, WebP, BMP, ICO, AVIF, SVG), not just the data: prefix. Base64 containing a PDF or plain text is rejected.

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Logo">

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy…");
}

![Logo](data:image/png;base64,iVBORw0KGgo…)