Image to Data URI
Get a data: URI for any image, ready to paste directly into an <img src> or CSS background-image. All processing runs in your browser.
Drop an image here
or click to browse
BASE64
Converts an image to a full data URI (with MIME type prefix) ready to embed in HTML or CSS.
How it works
FileReader.readAsDataURL pulls your image into memory and asks the browser to wrap the bytes in a data: URI for you. Internally it base64-encodes the payload using the same algorithm as btoa() and prefixes the result with the file's MIME type (for example 'data:image/png;base64,...'). The returned string can be pasted directly into an <img src> attribute or a CSS background-image rule.
Processing runs in your browser
All encoding and decoding happens inside your browser tab. Our servers are not involved at any point. You can confirm this yourselfin your browser's DevTools Network tab.
Technical specification
Base64 is specified in RFC 4648 (IETF, 2006). The encoding groups every three input bytes (24 bits) into four 6-bit values, each mapped to a printable ASCII character from a 64-character alphabet (A–Z a–z 0–9 + /). If the input length is not divisible by 3, one or two = padding characters are appended. The URL-safe variant (RFC 4648 §5) replaces + with - and / with _, making it safe for use in URLs and HTTP headers without further percent-encoding.
- Standard
- RFC 4648. The Base16, Base32, and Base64 Data Encodings
- Size overhead
- ~33% overhead (every 3 bytes becomes 4 characters)
- Alphabet (standard)
A–Z a–z 0–9 + /with=padding- Alphabet (URL-safe)
A–Z a–z 0–9 - _(used in JWTs, data URIs)
Related operations
To compute MD5 or SHA hashes from text or files, use the hash generator. For percent-encoding query strings or URL paths, try URL encode. To decode signed tokens that wrap Base64 payloads, see the JWT decoder.
Frequently asked questions
- What is a data URI?
- A data URI is a Base64-encoded version of a file prefixed with its MIME type, e.g. data:image/png;base64,.... It can be used anywhere a URL is accepted.
- Will embedding images as data URIs affect performance?
- For small images (icons, logos) it can eliminate an HTTP request. For large images it increases HTML size, use sparingly.
- Which image formats are supported?
- JPEG, PNG, WebP, GIF, SVG, and any format your browser can read.
- Is my image sent to a server?
- All processing runs in your browser. The image is read with the FileReader API and the data URI is built locally. Our servers are not involved at any point.