Base64 encoding is a binary-to-text encoding scheme that represents binary data using a set of 64 printable ASCII characters, enabling binary content like images to be safely transmitted through text-based protocols and embedded directly in text documents like HTML and CSS.

The Base64 algorithm works by processing binary data in groups of 3 bytes (24 bits) at a time. Each 24-bit group is divided into four 6-bit segments, and each 6-bit value (ranging from 0 to 63) is mapped to one character from the Base64 alphabet: A-Z (values 0-25), a-z (values 26-51), 0-9 (values 52-61), and + and / (values 62 and 63). When the input length is not a multiple of 3 bytes, padding is applied. If one byte remains, it produces two Base64 characters plus two = padding characters. If two bytes remain, it produces three Base64 characters plus one = padding character. This padding ensures that Base64 output length is always a multiple of 4 characters, making it parseable without knowing the original data length. The mathematical consequence is that Base64 encoding increases data size by exactly 4/3 (approximately 33%), since 3 bytes of input become 4 bytes of Base64 text.

Data URIs combine Base64-encoded content with a header that specifies the content type, following the format: data:[mediatype][;base64],[data]. For example, a PNG image becomes data:image/png;base64, followed by the Base64 string. When a browser encounters a data URI in an img src attribute or CSS background-image, it decodes the Base64 string back to binary and renders the image, completely eliminating the need for a separate HTTP request to fetch the image file.

The decision of when to use Base64 embedding versus external file linking involves a performance tradeoff analysis. Each external image file requires a separate HTTP request, which carries overhead: DNS lookup, TCP connection, TLS handshake (for HTTPS), HTTP headers, and server processing time. For HTTP/1.1, browsers limit concurrent connections per domain (typically 6-8), so many small images create a bottleneck. Base64 embedding eliminates these per-file requests but increases the HTML or CSS file size by 33% for each embedded image, and the Base64 data cannot be cached independently from the containing document. The general guidance is to embed images smaller than approximately 2-4 KB, where the HTTP request overhead exceeds the Base64 size penalty, and use external files for larger images where caching benefits outweigh request overhead. With HTTP/2 and HTTP/3 multiplexing, the per-request overhead is significantly reduced, shifting the tradeoff further toward external files for all but the smallest images.