Base64 & data URI converter
Turn an image into a base64 data URI for embedding in CSS or HTML, or paste a data URI back in to decode and download the original image. Two-way, no queue.
Direction
Drop an image on the right to get its base64 data URI.
Size
- Original
- —
- Base64 text
- —
- Overhead
- —
Base64 text runs roughly 33% larger than the raw bytes it encodes — three bytes become four characters.
Related tools
Drop an image here
or · one at a time
Data URI
Drop an image above and its exact original bytes are read and shown here as a base64 data URI, ready to copy.
Paste data URI
Paste a full data:image/…;base64,… string, or just the base64 text — a image/png header is assumed if none is given.
Result
Paste a data URI above and click Decode. The image previews here and can be downloaded.
- Type
- —
- Size
- —
- Pixels
- —
What a data URI actually is
A data URI packs a file's raw bytes directly into a URL, using base64 to turn
arbitrary binary data into plain text made only of letters, digits and a
handful of symbols. The result looks like
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… — a MIME type, a
flag saying the payload is base64, and the encoded bytes themselves. Anywhere
a browser accepts an image URL, it will accept this instead: an
<img src>, a CSS background-image, or an SVG
<image> element.
Because the whole file rides inside the URL, no separate request is needed to fetch it — useful for a handful of tiny icons, and actively harmful for anything larger, since it bloats whatever document it's embedded in and can't be cached independently the way a normal image file can.
Why base64 specifically
URLs and most text formats can't safely carry arbitrary binary bytes — some byte values would be misread as control characters or syntax. Base64 sidesteps that by re-encoding every three raw bytes as four printable characters drawn from a 64-symbol alphabet, which is where the fixed 33% size increase comes from: four characters take more space than the three bytes they represent.
Encoding versus decoding here
Image → Data URI reads the file you drop with the browser's
FileReader, which returns the exact original bytes re-encoded as
base64 — not a re-drawn copy. That matters if the source already has specific
compression artefacts or metadata you want preserved exactly, unlike the
convert or compress tools, which always redraw onto a canvas and therefore
always produce a fresh file.
Data URI → Image does the reverse: it validates the pasted string looks like a real data URI, decodes the base64 back into raw bytes, and hands you the result as a downloadable file with the right extension for its MIME type.
What is a data URI?
A data URI embeds a file's contents directly inside a URL as base64 text, in the form data:<mime-type>;base64,<data>. It can be used anywhere a normal image URL is used, including in an <img> src, a CSS background-image, or an email.
Why is the base64 text bigger than the original file?
Base64 encodes each group of three raw bytes as four text characters, so the encoded text runs about 33% larger than the file it represents.
Does converting to base64 re-compress or change the image?
No. The original file's exact bytes are read and encoded as-is, with no re-drawing or re-encoding, so the decoded image is byte-for-byte identical to what you started with.
Can I paste base64 text without the data: prefix?
Yes. If the pasted text looks like plain base64 without a data: header, the decoder assumes image/png and adds the header for you automatically before decoding.
Is a large data URI a good idea for a real website?
Only for very small images, like icons under a few kilobytes. Inlining a large photo bloats the HTML or CSS file it lives in and defeats browser caching, since the image can no longer be cached separately from the page.