What Is Base64 Encoding? A Plain-English Explanation
Base64 encoding converts binary data — like image files — into a string of printable text characters. If you have ever seen a long string starting with /9j/4AAQSkZ... inside HTML or a JSON response, you have seen Base64. Here is exactly how it works and when you should use it.
The Core Problem Base64 Solves
Computers store data as binary — sequences of 0s and 1s grouped into bytes. Image files, audio files, and most other media are pure binary. Text-based formats like HTML, CSS, JSON, and XML are designed to carry printable characters — letters, numbers, punctuation — not arbitrary binary bytes.
If you try to include raw binary image data inside a JSON string, the binary bytes may contain characters that break the JSON structure: null bytes, control characters, bytes that look like quote marks. The result is corrupted data.
Base64 solves this by translating every possible binary byte value into a safe printable character. The output contains only letters (A–Z, a–z), digits (0–9), plus (+), and slash (/). These are universally safe in any text-based format.
How Base64 Encoding Works
Base64 processes binary data in groups of 3 bytes at a time. Each group of 3 bytes (24 bits) is split into four 6-bit chunks. Each 6-bit value (0–63) maps to one of 64 printable characters using the Base64 alphabet:
Base64 alphabet (64 characters)
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/Because 3 bytes become 4 characters, the output is always 33% larger than the input. If the input length is not divisible by 3, one or two = padding characters are added at the end.
What a Base64 Image Looks Like
A Base64-encoded image is wrapped in a data URL — a string that tells the browser the data type before the encoded content:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEB...- data: — signals this is a data URL, not a file URL
- image/jpeg — the MIME type (image/png, image/webp also valid)
- ;base64, — declares the encoding method
- /9j/4AAQ... — the actual Base64-encoded image bytes
A browser treats a data URL exactly like a regular image URL. You can use it directly in an <img> tag or as a CSS background-image — no separate HTTP request needed.
The 33% Size Overhead
Base64 encoding always increases data size by approximately 33%. This is the fundamental trade-off: you gain the ability to embed binary data in text formats, but the data grows:
| Original image | Base64 size | Overhead |
|---|---|---|
| 5 KB (icon) | ~6.7 KB | +1.7 KB |
| 50 KB (thumbnail) | ~67 KB | +17 KB |
| 200 KB (photo) | ~267 KB | +67 KB |
| 1 MB (large photo) | ~1.33 MB | +330 KB |
When to Use Base64 for Images
Base64 makes sense in specific situations. Outside of these, you are usually better served by a regular image URL:
✅ Use Base64 when:
- Embedding images in HTML emails (external images are blocked by many email clients)
- Small icons under 5–10 KB where eliminating one HTTP request matters
- JSON API responses that must include image data inline
- Offline-first web apps that need images available without network access
- Canvas API output —
canvas.toDataURL()returns Base64
❌ Avoid Base64 when:
- Images are larger than 10 KB — the 33% overhead outweighs the request savings
- You need browser caching — Base64 images cannot be cached independently
- You are building a public website — external image URLs with CDN caching are significantly faster
- Multiple pages use the same image — external URLs can be cached once and reused
Using Base64 Images in HTML and CSS
Once you have a Base64 data URL, you can use it anywhere a regular image URL would appear:
HTML img tag
<img src="data:image/jpeg;base64,/9j/4AAQ..." alt="Logo" width="200" height="80" />CSS background
.logo { background-image: url("data:image/jpeg;base64,/9j/4AAQ..."); }JSON payload
{ "thumbnail": "data:image/jpeg;base64,/9j/4AAQ..." }Free Tools for Base64 and Images
You can convert images to and from Base64 directly in your browser:
Frequently Asked Questions
Why does Base64 make image files 33% larger?
Base64 encodes every 3 bytes of binary data into 4 printable characters. Because 3 bytes become 4 characters, the output is always 33% larger than the input. This size overhead is the fundamental trade-off — you gain the ability to embed binary data in text formats, but at a cost to file size.
When should I use Base64 for images?
Base64 makes sense for: small icons under 5–10 KB where eliminating one HTTP request matters, images embedded in HTML emails (external images are often blocked by email clients), JSON API responses that must include image data inline, and offline-first web apps that need images available without network access.
Can I use a Base64 image in an img tag?
Yes. A browser treats a Base64 data URL exactly like a regular image URL. Use it as the src attribute: <img src="data:image/jpeg;base64,/9j/4AAQ..." alt="Description" />. No separate HTTP request is needed, as the image data is embedded directly in the HTML.
Does Base64 compress images?
No. Base64 is an encoding scheme, not a compression algorithm. It converts binary bytes into text characters, which actually increases data size by 33%. If you want to reduce image file size, compress the image first (using JPEG quality reduction or PNG optimization), then encode the compressed result to Base64 if needed.
Are Base64 images cached by the browser?
No. Base64 images embedded in HTML or CSS cannot be cached independently by the browser — they are part of the document and cached only as long as that document is cached. External image URLs with their own cache headers can be cached indefinitely. This is a major reason to avoid Base64 for images larger than a few KB on public websites.
What is the difference between Base64 and a regular image URL?
A regular image URL (e.g., /images/photo.jpg) requires the browser to make an HTTP request to fetch the image file — a separate network round-trip. A Base64 data URL embeds the full image data inside the HTML or CSS, so no network request is needed. The trade-off: Base64 images are 33% larger, cannot be cached separately, and increase the size of the embedding document.