~/tools/base64
Base64 Encoder / Decoder
Encode and decode Base64 instantly — text, URL-safe, and images. Runs entirely in your browser.
What is Base64?
Base64 is a binary-to-text encoding scheme that represents binary data using a set of 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. The name "Base64" refers to this 64-character alphabet. It was originally designed to allow binary data (such as images, audio, or executable files) to be safely transmitted over text-only channels such as email (SMTP) or embedded in XML and JSON payloads.
Base64 is defined in RFC 4648. It is not encryption — it is a reversible encoding. Anyone with the encoded string can trivially decode it. Never use Base64 as a security measure.
How Base64 Encoding Works
Base64 works by taking 3 bytes (24 bits) of input at a time and splitting them into 4 groups of 6 bits each. Each 6-bit group is then mapped to one of the 64 printable characters. Because 3 bytes become 4 characters, Base64-encoded data is approximately 33% larger than the original binary data.
// Encoding "Man" → "TWFu" Input: M a n ASCII: 77 97 110 Binary: 01001101 01100001 01101110 Groups: 010011 010110 000101 101110 Index: 19 22 5 46 Output: T W F u
Standard vs URL-Safe Base64
Not all Base64 is the same. Standard Base64 uses two characters — + and / — that have reserved meanings in URLs. If you place a standard Base64 string directly into a URL query parameter, those characters will be misinterpreted by browsers and servers. URL-Safe Base64 solves this by replacing them with - and _, making the encoded string safe to use anywhere a URL can appear — including JWT tokens, OAuth state parameters, and filename-safe identifiers.
Common Use Cases
Base64 encoding appears in more places in web development than most developers realize. Because it converts any binary data into a sequence of printable ASCII characters, it acts as a universal adapter — letting images, files, and credentials travel through systems that were originally designed only for text. You'll encounter it in HTTP headers, JSON payloads, CSS stylesheets, and authentication protocols.
Embedding Images
Inline images in HTML/CSS as data: URLs — no extra HTTP request needed
JWT Tokens
JSON Web Tokens use URL-safe Base64 to encode header and payload segments
Basic Auth
HTTP Basic Authentication encodes "username:password" in Base64 in headers
Email Attachments
MIME encoding uses Base64 to embed binary files in plain-text email messages
API Payloads
Sending binary data (PDFs, images) in JSON or XML API request bodies
CSS Backgrounds
Embedding small icons and SVGs as base64 data URIs in CSS background-image
Data URL Format
A Data URL (or data URI) embeds file content directly in a URL string. It follows the format:
data:[mediatype][;base64],[data]Example: data:image/png;base64,iVBORw0KGgo... — can be used directly as an img src, CSS background-image, or href attribute. The Image tab in this tool generates all three formats automatically.