Example Collection

Base64 Examples

Q: What does a Base64 encoded string look like?

A Base64 string consists of A–Z, a–z, 0–9, +, and /, optionally ending with = or == padding. For example, "Hello" encodes to "SGVsbG8=". The Base64URL variant uses - instead of + and _ instead of /, with no padding.

Q: What does a Base64 image look like in HTML?

A Base64 image in HTML looks like: . The src attribute contains a complete Data URI with the MIME type and Base64-encoded image data; the browser reads the image directly from the URL without making a network request.

Q: Should I use Base64 or multipart for file uploads in APIs?

For small files (< 1 MB) in a JSON API, Base64 is convenient — just embed the file in a JSON field. For larger files, when you need progress indicators, or when the endpoint is designed for file uploads, multipart/form-data is better: ~33% smaller and more efficient to process server-side.

Text, Image, SVG, Data URI, CSS, HTML, JSON, JWT, Email, API — 20+ real-world Base64 input/output examples with explanations.

Quick Reference

Input	Base64 Output	Note
Hello	SGVsbG8=	trailing = is padding
Hello, World!	SGVsbG8sIFdvcmxkIQ==	trailing == is padding
{"ok":true}	eyJvayI6dHJ1ZX0=	JSON → Base64
Base64 Files	QmFzZTY0IEZpbGVz	no padding needed
1×1 PNG (68B)	iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY…	image file

23 examples

"Hello" Encoding

Text

Input

Hello

Output

SGVsbG8=

5 bytes, mod 3 = 2, one = padding appended.

Text to Base64

"Hello, World!" Encoding

Text

Input

Hello, World!

Output

SGVsbG8sIFdvcmxkIQ==

13 bytes, mod 3 = 1, two == padding appended.

Text to Base64

Chinese Characters Encoding

Text

Input

你好，世界

Output

5L2g5aW977yM5LiW55WM

Chinese characters are multi-byte UTF-8: each CJK character takes 3 bytes. Use TextEncoder instead of btoa() directly.

Text to Base64

Base64 Decode to Text

Text

Input

QmFzZTY0IEZpbGVz

Output

Base64 Files

Every 4 Base64 chars decode to 3 original bytes; TextDecoder converts the result back to a UTF-8 string.

Base64 to Text

1×1 Transparent PNG

Image

Input

1×1 pixel transparent PNG (68 bytes)

Output

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

The smallest valid PNG Base64-encoded: 68 bytes → 92 chars (35% larger).

Image to Base64

HTML img Inline Image

Image

Input

<img src="[data URI]" alt="embedded image">

Output

<img src="data:image/png;base64,iVBORw0KGgo…==" alt="embedded image">

Embed the Data URI as src — the image is inlined in HTML with no extra HTTP request.

Image to Base64

SVG Circle Data URI

SVG

Input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#1591DC"/></svg>

Output

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iIz…

SVG content is encoded to UTF-8 bytes via TextEncoder, then Base64-encoded. MIME type is image/svg+xml.

SVG to Base64

SVG as CSS Background

SVG

Input

SVG graphic

Output

.icon { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }

Base64-encoded SVG written into CSS background-image — ideal for icons, no extra HTTP request.

SVG to Base64

PNG Data URI Structure

Data URI

Input

PNG file (image/png)

Output

data:image/png;base64,iVBORw0KGgo…==

Data URI format: data:[MIME];base64,[Base64 data]. The MIME type tells the browser how to render it.

Data URI Generator

PDF Data URI

Data URI

Input

PDF file (application/pdf)

Output

data:application/pdf;base64,JVBERi0xLjQ…

PDF Base64 typically starts with JVBERi0 (%PDF- encoded). Can be used as an iframe src for inline preview.

PDF to Base64

Text Data URI

Data URI

Input

Hello, World!

Output

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

Plain text can also be encoded as a Data URI — MIME type is text/plain.

Text to Base64

CSS background-image

CSS

Input

Small icon (PNG)

Output

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgo…==");
  width: 32px;
  height: 32px;
}

Inlining an icon in CSS avoids an extra HTTP request. Best for small icons (< 5 KB); adds ~33% size overhead.

Image to Base64

CSS @font-face Inline Font

CSS

Input

WOFF2 font file

Output

@font-face {
  font-family: 'MyFont';
  src: url('data:font/woff2;base64,d09GMgAB…') format('woff2');
}

Embedding a font in CSS enables a fully self-contained stylesheet with zero external requests. Best for small font subsets.

Font to Base64

HTML File Download Link

HTML

Input

<!DOCTYPE html><html><body><h1>Hello</h1></body></html>

Output

<a href="data:text/html;base64,PCFET0NUWVBFIGh0bWw+…" download="page.html">Download HTML</a>

Encode HTML content as a Data URI in an <a download> tag — clicking it downloads the file with no server needed.

HTML to Base64

Sandboxed iframe Embed

HTML

Input

HTML content

Output

<iframe
  src="data:text/html;base64,PCFE…"
  sandbox="allow-scripts"
></iframe>

HTML encoded as a Data URI embedded in a sandboxed iframe — scripts run in isolation, cannot access the parent page.

HTML to Base64

JSON Object Encoding

JSON

Input

{"name":"Alice","role":"admin"}

Output

eyJuYW1lIjoiQWxpY2UiLCJyb2xlIjoiYWRtaW4ifQ==

JSON string converted to UTF-8 bytes then Base64-encoded. Commonly used for JWT payloads or API config transfer.

JSON to Base64

API File Upload Payload

API

Input

Binary file

Output

{
  "filename": "document.pdf",
  "content_type": "application/pdf",
  "data": "JVBERi0xLjQ…"
}

Pass a file as Base64 in a REST JSON payload — suitable for small files (< 1 MB). Use multipart/form-data for larger files.

API Base64

cURL Send Base64 File

API

Input

Base64-encoded file string

Output

curl -X POST https://api.example.com/files \
  -H 'Content-Type: application/json' \
  -d '{"data":"JVBERi0x…"}'

Write the Base64 into a JSON body and send with cURL. The receiver decodes it back to the original binary file.

API Base64

JWT Header Decode

JWT

Input

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Output

{"alg":"HS256","typ":"JWT"}

JWT's first segment is the Header, Base64URL-encoded (no padding, + → -, / → _). Decodes to algorithm info.

JWT Decoder

JWT Payload Decode

JWT

Input

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNzE2MjM5MDIyfQ

Output

{"sub":"1234567890","name":"Alice","iat":1716239022}

JWT Payload contains claims (sub, name, iat, etc.). Base64URL-decodes to plain JSON; does not include signature verification.

JWT Decoder

Base64URL vs Base64

JWT

Input

Standard Base64: TWFu+w==
Base64URL: TWFu-w

Output

Diff: + → -   / → _   remove trailing =

JWT uses Base64URL because = in URLs needs escaping and + / / are ambiguous. Base64URL lets tokens safely sit in URL params.

Base64URL Encoder

HTML Email Inline Image

Input

Image file

Output

<img src="data:image/png;base64,iVBORw0KGgo…==" alt="logo">

Email clients block external image requests by default. A Data URI inlines the image directly in HTML, ensuring it always shows.

Email Base64

MIME Email Multiline Format

Input

Base64 string (single long line)

Output

SGVsbG8sIFdvcmxkISBUaGlzIGlzIGEgbG9u
ZyBzdHJpbmcgdGhhdCBuZWVkcyB0byBiZSBz
cGxpdCBpbnRvIDc2LWNoYXIgbGluZXMu

RFC 2045 limits MIME email Base64 to 76 chars per line with \r\n, to prevent old mail servers from truncating content.

Email Base64

Common Patterns

Text / JSON Encoding

Plain text: use btoa() directly (ASCII only)
Unicode (e.g. Chinese): TextEncoder → btoa()
JSON.stringify then encode
JWT Payload uses Base64URL variant

Image / Media Inline

Data URI format: data:image/png;base64,...
HTML img src, CSS background-image
Recommended < 5 KB; use external URL for large images
HTML emails must inline images (external URLs blocked)

API / Server Transfer

Pass Base64 files in JSON payload
content_type + data field convention
< 1 MB use Base64; larger files use multipart
Node.js: Buffer.from(b).toString("base64")

All Tools

Text to Base64

Text ↔ Base64

Base64 to Text

Decode text

Image to Base64

Image → Data URI

SVG to Base64

SVG → Data URI

Font to Base64

@font-face inline

PDF to Base64

PDF → API payload

HTML to Base64

iframe / download link

JSON to Base64

JSON → Base64URL

API Base64

JS/cURL/Python examples

Email Base64

Inline image vs attachment

JWT Decoder

JWT Header / Payload

Base64URL Encoder

URL-safe variant

Frequently Asked Questions

What does a Base64 encoded string look like?

A Base64 string consists of A–Z, a–z, 0–9, +, and /, optionally ending with = or == padding. For example, "Hello" encodes to "SGVsbG8=". The Base64URL variant uses - instead of + and _ instead of /, with no padding.

What does a Base64 image look like in HTML?

A Base64 image in HTML looks like: <img src="data:image/png;base64,iVBORw0KGgo…==" alt="image">. The src attribute contains a complete Data URI with the MIME type and Base64-encoded image data; the browser reads the image directly from the URL without making a network request.

What is a JWT Base64 example?

JWT uses Base64URL encoding. The header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 decodes to {"alg":"HS256","typ":"JWT"}; the payload eyJzdWIiOiIxMjM0NTY3ODkwIn0 decodes to {"sub":"1234567890"}. Note: no = padding, and - and _ are used instead of + and /.

What should I watch out for when Base64-encoding JSON?

Non-ASCII characters like Chinese or emoji must first be converted to UTF-8 bytes using TextEncoder before encoding. Calling btoa() directly on a string containing non-Latin-1 characters throws an exception. When decoding, use TextDecoder instead of converting atob() output directly to a string.

How does email Base64 differ from regular Base64?

The MIME email spec (RFC 2045) requires Base64 lines to be at most 76 characters, each ending with \r\n. This ensures compatibility with legacy mail servers that limit line length. Modern API transports don't need the multiline format — a single-line Base64 string is fine.

Should I use Base64 or multipart for file uploads in APIs?

For small files (< 1 MB) in a JSON API, Base64 is convenient — just embed the file in a JSON field. For larger files, when you need progress indicators, or when the endpoint is designed for file uploads, multipart/form-data is better: ~33% smaller and more efficient to process server-side.