Base64 Encoding in Data URIs

How Base64 Works in Data URIs

Base64 is a binary-to-text encoding that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). In data URIs, the ;base64 flag tells the browser that the payload after the comma is Base64-encoded.

The Encoding Process

1. Take the raw binary bytes of the file
2. Split into groups of 3 bytes (24 bits)
3. Divide each 24-bit group into four 6-bit values
4. Map each 6-bit value to a Base64 character
5. Pad with = if the input length is not a multiple of 3

Why 33% Overhead?

Since 3 bytes of input produce 4 characters of Base64 output, the encoded size is always 4/3 (approximately 133%) of the original. For a 10 KB image, the Base64 representation is about 13.3 KB. After adding the data URI prefix (data:image/png;base64,), the total overhead is slightly more.

Original file:    10,000 bytes
Base64 encoded:   13,336 bytes  (+33.4%)
Data URI prefix:      22 bytes
Total data URI:   13,358 bytes  (+33.6%)

When Base64 Is Required

Base64 is necessary for binary file types:

• Images: PNG, JPEG, GIF, WebP, ICO
• Fonts: WOFF, WOFF2, TTF
• Audio/Video files
• PDF documents
• Any non-text binary data

When Base64 Is Optional

For text-based content, you can use percent-encoding instead:

• SVG images (data:image/svg+xml,...)
• Plain text (data:text/plain,...)
• HTML (data:text/html,...)
• CSS (data:text/css,...)

For SVG specifically, percent-encoding often produces smaller data URIs than Base64 because most SVG content is printable ASCII that does not need encoding.