Top 20 Base64 Examples
Base64 encoding has many practical applications in development, ranging from simple string manipulation to complex file transfer protocols. Understanding these examples helps developers recognize when and how to use Base64 effectively. Below are 20 real-world scenarios organized by category, with explanations for each.
Text Examples
1. Basic String Encoding
The simplest use case is converting a plain text string to Base64. This is useful when you need to pass text through systems that may misinterpret special characters or binary data. For example, Hello becomes SGVsbG8=. The equals sign at the end indicates padding because the input length (5 bytes) is not divisible by three. This fundamental example illustrates the core mechanics of Base64 encoding.
2. Email Address Encoding
Email addresses contain the @ symbol and dots, which can cause parsing issues in certain URL parameters or data formats. Encoding user@example.com produces dXNlckBleGFtcGxlLmNvbQ==. This encoded form can be safely embedded in URLs, JSON payloads, and configuration files without escaping concerns.
3. URL Encoding
URLs themselves contain characters that need to be preserved when transmitted inside other URLs, query parameters, or text protocols. Encoding https://example.com results in aHR0cHM6Ly9leGFtcGxlLmNvbQ==. This is distinct from URL percent-encoding and serves a different purpose — Base64 encoding is used when the entire URL needs to be treated as an opaque data block rather than parsed as a web address.
4. JSON Object Encoding
JSON objects are frequently nested inside other JSON structures, which requires cumbersome escaping of quotes and brackets. By encoding the entire JSON object as a Base64 string, you avoid nested quote issues entirely. For instance, {"key":"value"} becomes eyJrZXkiOiJ2YWx1ZSJ9. This technique is common in JWT tokens and API request payloads where structured data must be passed as a compact string.
5. Password Encoding
When automating login scripts or testing API endpoints, hard-coding plain text passwords in source code is a security risk. Encoding passwords like P@ssw0rd! to UEBzc3cwcmQh at least prevents casual shoulder-surfing, though remember that Base64 provides no real encryption. This example converts to UEBzc3cwcmQh and demonstrates how symbols and mixed-case characters are handled by the algorithm.
6. API Token Encoding
Bearer tokens and API keys are long random strings that often include characters incompatible with HTTP headers if transmitted raw. Encoding Bearer token123 gives QmVhcmVyIHRva2VuMTIz. Many API SDKs automatically Base64-encode credentials before attaching them to requests, making this one of the most common enterprise uses of Base64.
Image Examples
7. Single Pixel PNG Data URI
A 1x1 red pixel encoded as a data URI is a classic example used by web developers for placeholder images, tracking pixels, and lazy loading strategies. The full data URI data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg== can be placed directly in an HTML img src attribute.
8. Favicon Embedding
Favicons are small icons displayed in browser tabs. Instead of serving a separate favicon.ico file, you can embed a Base64-encoded favicon directly in the HTML head using <link rel="icon" type="image/png" href="data:image/png;base64,...">. This eliminates an HTTP request and guarantees the icon is always available, even on pages with broken asset paths.
9. User Avatar in JSON
When building social applications or chat systems, user profile images are often transmitted as Base64 strings inside JSON payloads. The server sends an avatar field like "avatar": "data:image/jpeg;base64,/9j/4AAQ..." and the client renders it immediately without an additional network request. This approach simplifies the API contract but increases payload size.
10. Embedded Signature in Documents
Digital signatures are frequently embedded as Base64-encoded images inside PDF or Word documents. When a document is signed electronically, the signature pad captures the user's handwriting, converts it to a PNG, and then Base64-encodes the image for storage inside the document file. This ensures the signature travels with the document and renders correctly across different viewers.
File Examples
11. PDF Attachment in Email
MIME email uses Base64 to encode binary file attachments like PDFs. When you send a PDF via email, the mail client reads the binary file, encodes it as Base64, and wraps it in MIME headers. The recipient's email client decodes it back to binary for display. This is why email attachments can be larger than the original file by about 37 percent after encoding and MIME overhead.
12. ZIP File Transfer via API
When transferring compressed archives through REST APIs, the ZIP binary must be encoded as text. The API receives a JSON payload like {"filename":"backup.zip","data":"UEsDBBQAAAAI..."} and decodes the Base64 string back to a binary ZIP file on the server side. This is the standard pattern for file upload APIs that accept JSON rather than multipart form data.
13. Audio Clip in Web Pages
Small audio clips, such as notification sounds or short voice messages, can be embedded directly in HTML5 audio tags using data URIs. The audio binary is Base64-encoded and placed in the src attribute: <audio src="data:audio/mpeg;base64,+3lRZ..." controls>. This is especially useful for progressive web apps that need to work offline.
14. Custom Font as Data URI
Web fonts like WOFF or TTF can be Base64-encoded and embedded inside CSS using @font-face declarations. The src: url(data:font/woff;base64,...) format allows a single CSS file to include everything needed for typography, eliminating font file requests. This technique is popular for icon fonts and small custom typefaces used across a site.
15. Video Thumbnail Preview
Video thumbnails are small images extracted from video frames. When building a video gallery API, returning Base64-encoded thumbnails inside JSON metadata eliminates the need for separate image endpoints. Each video object contains a thumbnail field with the Base64 string that the client renders directly.
API and Authentication Examples
16. Basic HTTP Authentication
HTTP Basic Auth sends credentials as a Base64-encoded string in the Authorization header. The format is Authorization: Basic base64(username:password). For example, if the username is admin and the password is secret, the header value becomes Basic YWRtaW46c2VjcmV0. Note that Base64 is not encryption — Basic Auth must always be used over HTTPS to prevent credential interception.
17. JWT Header and Payload
Every JSON Web Token consists of three Base64URL-encoded sections separated by dots. The header, payload, and signature are each encoded. For example, a JWT header {"alg":"HS256","typ":"JWT"} encodes to eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. Debugging JWT authentication issues often involves decoding these sections manually to inspect claims and expiration times.
18. OAuth Client Credentials
OAuth 2.0 client credentials — the client ID and client secret — are typically Base64-encoded when requesting an access token using the client credentials grant. The Authorization header contains Basic base64(client_id:client_secret). This is the standard way that server-to-server OAuth flows authenticate API requests.
19. Data URIs in HTML and CSS
Beyond images, any file type can be embedded as a data URI. CSS files commonly embed Base64-encoded background images, borders, and patterns. For example, a gradient background image or a small pattern tile can be inlined: background: url(data:image/svg+xml;base64,PHN2Zy...);. This technique reduces HTTP requests and is especially effective for CSS sprites and small UI elements.
20. MIME Base64 Email Attachments
The MIME standard defines Base64 as one of its content transfer encodings. Every email attachment is Base64-encoded and wrapped in MIME boundaries. The email structure includes headers like Content-Transfer-Encoding: base64 and Content-Type: application/pdf; name="document.pdf". Understanding this encoding is critical for developers building email parsing, sending, or archiving systems.
As these examples demonstrate, Base64 is a foundational encoding technique that appears across virtually every domain of software development. Use the Base64 Encoder/Decoder tool to try these examples yourself and explore how different inputs produce different encoded outputs.
