inyourbrowser.com

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

Image → Data URI

Converts an image to a full data URI (with MIME type prefix) ready to embed in HTML or CSS.

Runs entirely in your browser

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.

Related tools

URL encode / decode
Percent-encode and decode URLs, or parse query strings into key-value pairs.
Hash generator
Generate SHA-256, SHA-512, SHA-1, and MD5 hashes. Verify file checksums locally.
Image to Base64
Convert any image to a Base64 data URI. Copy directly into HTML, CSS, or JSON.
JWT decoder
Decode JWT header and payload instantly. All inspection runs in your browser.
Password generator
Generate random, strong, or memorable passwords using your browser's crypto API.