What is Base64 Encoding?
Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It was originally designed for email systems (MIME) that could only handle text, but is now widely used across the web. Base64 works by translating every 3 bytes (24 bits) of binary data into 4 ASCII characters from a set of 64 characters: A–Z, a–z, 0–9, +, and /. This is why it's called "Base64" — it uses a 64-character alphabet plus the = sign for padding.
Common Use Cases
Base64 is everywhere in modern web development. Data URLsembed images, fonts, or other files directly into HTML/CSS usingdata:image/png;base64,...This reduces HTTP requests but increases page size by ~33%.APIs and authentication frequently use Base64 to encode credentials in HTTP Basic Authentication headers (Authorization: Basic dXNlcjpwYXNz).Email attachments are encoded in Base64 via MIME.JSON Web Tokens (JWT) consist of three Base64-encoded parts. The MDN Base64 documentation provides comprehensive technical details.
Important: Base64 is NOT Encryption
A critical misunderstanding people often have is thinking Base64 hides or secures data. Base64 is encoding, NOT encryption. Anyone can decode a Base64 string back to its original form instantly without a key. Never use Base64 to store passwords, API secrets, or sensitive information. For security, use proper encryption like AES, or hashing functions like bcrypt. Base64 simply ensures binary data survives transmission through text-only systems like JSON, XML, or email protocols. The official RFC 4648 specification defines Base64 and other encoding schemes.
Size Overhead & Performance
Base64 encoding increases data size by approximately 33%. Every 3 bytes (24 bits) of original data becomes 4 bytes of Base64 output — a ratio of 4:3. For example, a 1MB image becomes roughly 1.33MB when Base64-encoded. This overhead matters for large assets. Modern web performance best practices recommend using Base64 only for small assets (under a few kilobytes), like icons or critical CSS. For larger images, standard binary loading via <img src="file.png">is more efficient. The browser's built-in btoa() and atob() functions handle encoding/decoding in JavaScript. This converter extends those to support file uploads using the FileReader API.
URL-Safe Base64
Standard Base64 uses + and / characters, which have special meaning in URLs. For web applications that need to pass Base64 strings in URLs or query parameters, URL-safe Base64 replaces+ with - (hyphen) and / with _ (underscore). Padding = is also often omitted in URLs. JWT tokens use this modified Base64url encoding as defined in RFC 7515. If you need URL-safe output, you can manually replace characters after encoding (e.g., base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')).
All content is AI-generated and reviewed by Adnan Aftab. Base64 is a standard encoding format defined by IETF RFC 4648. Always validate your encoded/decoded data before using in production systems, especially when handling binary files.