# Base64 Encoding and Decoding: A Developer's Guide Base64 is everywhere in web development — data URIs, JWT tokens, API authentication, email attachments. Here's everything you need to know. **[Encode/Decode online →](https://base64.pandan.is)** ## What is Base64? Base64 is a binary-to-text encoding scheme. It converts binary data into a string using 64 ASCII characters (A-Z, a-z, 0-9, +, /) plus `=` for padding. ### Why use it? - **Embed binary in text formats** — images in HTML/CSS, files in JSON - **Safe data transfer** — no special character issues in URLs, headers, or XML - **Authentication** — HTTP Basic Auth uses Base64 - **Data URIs** — `data:image/png;base64,...` embeds images directly in HTML ### The tradeoff Base64 increases data size by ~33%. A 3-byte input becomes 4 characters of output. Don't use it for large files when binary transfer is available. ## JavaScript ### Browser ```javascript // Encode const encoded = btoa('Hello, World!'); // 'SGVsbG8sIFdvcmxkIQ==' // Decode const decoded = atob('SGVsbG8sIFdvcmxkIQ=='); // 'Hello, World!' ``` ### Handle Unicode ```javascript // btoa() only handles Latin1. For Unicode: function toBase64(str) { return btoa(unescape(encodeURIComponent(str))); } function fromBase64(str) { return decodeURIComponent(escape(atob(str))); } toBase64('Héllo 🌍'); // Works! ``` ### Node.js ```javascript // Encode Buffer.from('Hello').toString('base64'); // 'SGVsbG8=' // Decode Buffer.from('SGVsbG8=', 'base64').toString('utf-8'); // 'Hello' // File to Base64 const fs = require('fs'); const b64 = fs.readFileSync('image.png').toString('base64'); ``` ## Python ```python import base64 # Encode encoded = base64.b64encode(b'Hello, World!').decode('utf-8') # 'SGVsbG8sIFdvcmxkIQ==' # Decode decoded = base64.b64decode('SGVsbG8sIFdvcmxkIQ==').decode('utf-8') # 'Hello, World!' # URL-safe variant (uses - and _ instead of + and /) base64.urlsafe_b64encode(b'data with +/= chars') # File to Base64 with open('image.png', 'rb') as f: b64 = base64.b64encode(f.read()).decode('utf-8') ``` ## Command Line ```bash # Linux/Mac echo -n 'Hello' | base64 # SGVsbG8= echo 'SGVsbG8=' | base64 --decode # Hello # File to Base64 base64 image.png > image.b64 # Base64 to file base64 --decode image.b64 > image.png ``` ## Common Use Cases ### Data URIs in HTML ```html ``` ### HTTP Basic Authentication ```javascript const credentials = btoa('username:password'); fetch(url, { headers: { 'Authorization': `Basic ${credentials}` } }); ``` ### Inline SVG in CSS ```css .icon { background-image: url('data:image/svg+xml;base64,PHN2Zy...'); } ``` ### JWT Tokens JWT tokens are three Base64URL-encoded segments separated by dots: ``` eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0In0.signature ``` Decode them with our **[JWT Decoder](https://jwt.pandan.is)**. ## Base64 vs Base64URL | Feature | Base64 | Base64URL | |---------|--------|----------| | Characters | A-Z, a-z, 0-9, +, / | A-Z, a-z, 0-9, -, _ | | Padding | `=` required | `=` optional | | Use case | General encoding | URLs, filenames, JWTs | ```javascript // Convert Base64 to Base64URL const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); ``` ## ⚠️ Base64 is NOT Encryption Base64 is encoding, not encryption. Anyone can decode it. Never use Base64 to "hide" passwords, tokens, or sensitive data. Use proper encryption (AES, RSA) for security. ## Quick Reference | Input size | Output size | Ratio | |-----------|------------|-------| | 1 byte | 4 chars | 4x | | 3 bytes | 4 chars | 1.33x | | 1 KB | 1.37 KB | 1.37x | | 1 MB | 1.37 MB | 1.37x | ## Try It Use our **[free Base64 encoder/decoder](https://base64.pandan.is)** — instant encode/decode, file support, no signup required. --- *More developer tools at [pandan.is](https://dev.pandan.is): [Regex Tester](https://regex.pandan.is) · [JWT Decoder](https://jwt.pandan.is) · [JSON Formatter](https://json.pandan.is) · [Screenshot API](https://api.pandan.is)*