Back to Blog
Expert ReviewedUpdated 2025utility
utility
10 min readApril 12, 2024Updated Oct 4, 2025

Base64 Encoding Explained: When, Why, and How to Use It

Learn what Base64 encoding is, how it works, and when to use it. Practical examples for embedding images, handling binary data, and API authentication.

You’ve probably seen those strange-looking strings that start with \"data:image/png;base64,\" followed by a wall of letters and numbers. That’s Base64 encoding in action. It’s a fundamental technique for converting binary data into text—and understanding it unlocks everything from embedding images in CSS to handling API authentication tokens.

Key Takeaways

  • 1
    Base64 converts binary data to text using 64 ASCII characters—it’s encoding, NOT encryption
  • 2
    Output is always 33% larger than input (3 bytes → 4 characters)
  • 3
    Data URLs embed small files inline: data:image/png;base64,... eliminates HTTP requests
  • 4
    Base64URL (using - and _ instead of + and /) is safe for URLs and used in JWTs
  • 5
    Use for assets < 10KB; larger files should remain as separate cacheable requests

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 ASCII characters. It takes any data—images, files, binary—and converts it into a string of letters (A-Z, a-z), numbers (0-9), plus (+), and slash (/). The equals sign (=) is used for padding.
Example: Simple Base64 Example

Scenario

Encode the text "Hello" to Base64

Solution

"Hello" → "SGVsbG8=" — Each character is converted to its binary representation, then grouped into 6-bit chunks and mapped to Base64 characters. The = is padding because the input isn't a multiple of 3 bytes.

Base64 increases size by ~33% on average
OriginalBase64 EncodedSize Increase
HelloSGVsbG8=60%
TestVGVzdA==100%
Base64QmFzZTY033%
AQQ==300%
Base64 is NOT encryption. It\

2How Base64 Encoding Works

Base64 works by converting binary data (8-bit bytes) into 6-bit groups, then mapping each group to one of 64 printable ASCII characters.

Encoding Process

1

Convert to binary

Each byte of input becomes 8 bits. "Hi" → 01001000 01101001

2

Group into 6-bit chunks

Concatenate all bits and split into 6-bit groups: 010010 000110 1001xx (pad with zeros if needed)

3

Map to Base64 alphabet

Each 6-bit value (0-63) maps to a character: A-Z (0-25), a-z (26-51), 0-9 (52-61), + (62), / (63)

4

Add padding

If input bytes aren't divisible by 3, add = padding. 1 remaining byte → ==, 2 remaining bytes → =

Why 64 characters? Because 64 = 2^6, each Base64 character represents exactly 6 bits. This makes the math clean and efficient.

3Common Use Cases

Base64 appears throughout web development, APIs, and data handling. Here are the most common applications.
  • **Data URLs** – Embed images directly in HTML/CSS without separate HTTP requests
  • **Email attachments** – MIME encoding uses Base64 to send binary files as text
  • **API authentication** – HTTP Basic Auth encodes username:password in Base64
  • **JWT tokens** – JSON Web Tokens use Base64URL encoding for header and payload
  • **Storing binary in JSON/XML** – Text formats can\
  • ,
Example: Data URL for Images

Scenario

Embed a small icon directly in CSS without an HTTP request

Solution

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."); — The browser decodes the Base64 string and renders the image inline.

Data URLs: Embedding Files Inline

Data URLs let you embed small files directly in HTML, CSS, or JavaScript. The format is: data:[mediatype][;base64],
Common Data URL MIME types
Use CaseData URL FormatBest For
PNG imagedata:image/png;base64,...Icons, small graphics < 10KB
SVG imagedata:image/svg+xml;base64,...Vector icons, logos
JPEG photodata:image/jpeg;base64,...Thumbnails only (size overhead)
PDF documentdata:application/pdf;base64,...Inline PDF viewing
JSON datadata:application/json;base64,...Embedded configuration
Plain textdata:text/plain;base64,...Text content
Data URLs increase file size by ~33% and can\

Convert Images to Data URLs

Use our Image to Base64 tool to instantly convert any image to a Data URL you can paste directly into your code.

Open Image to Base64

5Base64 in API Authentication

HTTP Basic Authentication uses Base64 to encode credentials. While simple, it has important security implications.
Example: Basic Auth Header

Scenario

Authenticate with username "admin" and password "secret123"

Solution

Authorization: Basic YWRtaW46c2VjcmV0MTIz — The value is Base64("admin:secret123"). The server decodes it to extract credentials.

Basic Auth is NOT secure over HTTP. Always use HTTPS. Base64 is trivially decoded—it\
Authentication method comparison
MethodProsCons
Basic Auth (Base64)Simple, widely supported, statelessCredentials sent every request, not encrypted, no expiration
Bearer Token (JWT)Contains claims, can expire, doesn't expose passwordMore complex, token can be stolen, larger header size

6Base64 vs Base64URL

Standard Base64 uses + and / which have special meaning in URLs. Base64URL is a URL-safe variant that replaces these characters.
Base64 vs Base64URL comparison
FeatureStandard Base64Base64URL
AlphabetA-Z, a-z, 0-9, +, /A-Z, a-z, 0-9, -, _
Padding= (required)= (often omitted)
URL safeNo (needs encoding)Yes
Used inEmail, data URLsJWTs, URL parameters
JWTs use Base64URL encoding. If you\

Performance Considerations

Base64 is computationally cheap, but the 33% size increase has real implications for bandwidth and storage.
33%
Size overhead
Base64 output is always 4/3 the input size
< 10KB
Data URL sweet spot
Inline assets under 10KB to reduce HTTP requests
0ms
Decode time (typical)
Modern browsers decode Base64 instantly
  • **DO** use Data URLs for critical above-the-fold icons that would otherwise block render
  • **DO** use Base64 for small assets (< 10KB) in CSS to reduce HTTP round-trips
  • **DON\
  • ,
  • T** embed Base64 images in JavaScript bundles (they can\

8Working with Base64

Every programming language has built-in Base64 support. Here's how to encode and decode in common environments.
Base64 in different languages
LanguageEncodeDecode
JavaScriptbtoa(string)atob(string)
Node.jsBuffer.from(str).toString("base64")Buffer.from(b64, "base64").toString()
Pythonbase64.b64encode(bytes)base64.b64decode(string)
PHPbase64_encode($data)base64_decode($data)
Command lineecho -n "text" | base64echo "dGV4dA==" | base64 -d
JavaScript\

Encode & Decode Online

Use our free Base64 tool to quickly encode text, decode strings, or convert files—all in your browser with no data sent to servers.

Open Base64 Encoder

Frequently Asked Questions

Is Base64 encoding secure?
No. Base64 is encoding, not encryption. Anyone can decode Base64 without any key. Never use Base64 to protect sensitive data—use proper encryption instead. Base64 is only for representing binary data as text.
Why does Base64 make files larger?
Base64 uses 6 bits per character, while input uses 8 bits per byte. This means 3 bytes of input become 4 Base64 characters, a 33% size increase. This is the trade-off for making binary data safe for text-only channels.
What does the = at the end mean?
The = signs are padding. Base64 processes input in 3-byte chunks (24 bits = four 6-bit groups). If input isn’t a multiple of 3 bytes, padding is added: one = for 2 bytes remaining, two == for 1 byte remaining.
When should I use Data URLs vs separate image files?
Use Data URLs for small, critical assets under 10KB that are needed for initial render. Use separate files for larger images, images that appear on multiple pages (cacheable), or when HTTP/2 is available (multiplexing makes small requests efficient).
What’s the difference between Base64 and hex encoding?
Hex encoding represents each byte as two hexadecimal characters (0-9, A-F), resulting in a 100% size increase. Base64 is more efficient at 33% overhead. Hex is simpler to read and used for hashes/colors, while Base64 is preferred when size matters.

Related Topics

#Developer#Utility#Encoding#Web Development