Base64 Encoding & Decoding Guide: What It Is and How to Use It 2026

Base64 encoding is one of those things every developer encounters but few fully understand. Whether you're dealing with email attachments, embedding images in HTML, or sending binary data through JSON APIs, Base64 is the bridge between binary and text worlds.

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into a string of 64 safe ASCII characters (A-Z, a-z, 0-9, +, /). It was designed to safely transmit binary data through text-only channels like email (SMTP), which can corrupt raw binary.

• Takes 3 bytes (24 bits) of binary data at a time
• Splits them into 4 groups of 6 bits each
• Maps each 6-bit group to one of 64 printable ASCII characters
• Result is always ~33% larger than the original binary data
• Uses = padding when input length isn't divisible by 3

Why Use Base64?

Base64 solves a fundamental problem: how to include binary data in text-based formats. Common use cases include:

• Email attachments (MIME): Raw binary files are encoded to Base64 for safe transmission through SMTP servers that only handle 7-bit ASCII.
• Data URIs in HTML/CSS: Embed small images directly in HTML using data:image/png;base64,... to eliminate extra HTTP requests.
• API payloads (JSON): JSON doesn't support binary data, so files and images must be Base64-encoded to be included in request/response bodies.
• JWT tokens: JSON Web Tokens use URL-safe Base64 (base64url) to encode header, payload, and signature.
• HTTP Basic Authentication: Username and password are combined and Base64-encoded in the Authorization header.

Standard Base64 vs URL-Safe Base64

Standard Base64 uses + and / characters, which have special meaning in URLs. URL-safe Base64 (also called base64url) replaces these:

• Standard: uses A-Z, a-z, 0-9, +, / with = padding
• URL-safe: replaces + with -, / with _, and removes = padding
• JWT tokens always use URL-safe Base64
• When in doubt, URL-safe is the safer choice for web applications

Image to Base64: Practical Guide

Converting images to Base64 is useful for embedding small images directly in HTML or CSS. However, keep these guidelines in mind:

• Good for small images (<10KB): Icons, logos, small UI elements benefit from inline embedding — fewer HTTP requests.
• Bad for large images (>50KB): Base64 is 33% larger than binary. A 100KB image becomes 133KB as Base64, and it can't be cached separately.
• Format: data:image/png;base64,iVBORw0KGgo... — the prefix specifies the MIME type.
• Use our Image tab to instantly convert any image to its data URI format.

Tool Comparison: btoa()/atob() vs Terminal vs QuickFigure

• JavaScript btoa()/atob(): Built-in browser functions, but btoa() only handles Latin1 characters — fails on Unicode/emoji. Need TextEncoder workaround for UTF-8.
• Terminal (base64 command): Works on Mac/Linux with `echo -n 'text' | base64`. Great for scripts, but no image support or URL-safe mode.
• QuickFigure: Handles UTF-8, URL-safe toggle, image drag-and-drop, bidirectional conversion, byte size stats. All in-browser, no data sent to servers.